Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

Objective: This assignment aims to introduce students to the basics of Angular, including project setup, component creation, and basic data binding. Instructions: 1 . Setup

Objective: This assignment aims to introduce students to the basics of Angular, including project setup, component creation, and basic data binding. Instructions: 1. Setup and Installation: Install Node.js and Angular CLI if not already installed. Create a new Angular project named yourname_assignment1 using Angular CLI. 2. Project Structure: Familiarize yourself with the generated project structure. Understand the purpose of key files and folders. 3. Create Components: Create the following components: header: For the sites header. footer: For the sites footer. home: For the home page content. testimonials: For displaying user testimonials. include-testimonial: For including new testimonials (child component).4. App Component: In the app.component.html, set up a basic layout that includes the header, a router outlet, and the footer. 5. Routing: Configure routing for the home and testimonials components. Set the home component as the default route. 6. Home Component: In the home component, include the following: A welcome heading. A brief description of the application. A section where you describe yourself, including: Your skills Projects you have worked on Your aims Your hobbies Your image. Navigation links to the testimonials page. 7. Testimonials Component: In the testimonials component, display some dummy testimonials. Include an input box for the user to enter their name and an "Add Testimonial" button. On clicking the "Add Testimonial" button, the name from the input box should be passed to the include-testimonial child component and make it visible. Display a text box for the user to write their testimonial and a submit button. In the include-testimonial component, display a thank you message such as "Thank you, John, for giving a testimonial." On submitting the testimonial, pass the testimonial information back to the parent testimonials component and display it there. 8. Styling: Add basic styles to your application to ensure it looks clean and organized. You can use CSS or Angulars built-in styling solutions. 9. Data Binding: Demonstrate both interpolation and property binding in your components, especially in the home and testimonials components. 10.Submission: Run your Angular application and take screenshots of the following: The home page. The testimonials page showing added testimonials. Submit a .docx file containing the screenshots along with the source code of your Angular components and the routing module.

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

50 Tips And Tricks For MongoDB Developers Get The Most Out Of Your Database

Authors: Kristina Chodorow

1st Edition

1449304613, 978-1449304614

More Books

Students also viewed these Databases questions