| Outcomes
By the end of the course, learners will be able to:
Source course link: Click here Course contributors: 1. Viveghaa Vasudevan 2. Bhoomika S Hiremath 3. Sudharshan Sekar |
Level: | 02 |
| Duration: | 35 Hours | |
| Pre-requisites: | CSS: Level 01
|
|
| What’s next: | AngularJS:Level 03 |
Note: The textual content in the lessons are not exclusive of video contents.
Lessons
The Basics
- How an Angular App gets Loaded and Started
- Components are Important!
- Creating a New Component
- Understanding the Role of AppModule and Component Declaration
- Using Custom Components
- Creating Components with the CLI & Nesting Components
- Working with Component Templates
- Working with Component Styles
- Fully understanding the Component Selector:
- Practicing Databinding - Assignment Solution
- What is Databinding
- String Interpolation
Course project the basics
- Planning the App
- Installing Bootstrap Correctly
- Setting up the Application
- Creating the Components
- Using the Components
- Adding the Navigation Bar
- Alternative Non-Collapsible Navigation Bar
- Creating a "Recipe" Model
- Adding Content to the Recipes Components
- Outputting a List of Recipes with ngFor
- Displaying Recipe Details
- Working on the Shopping List Component
Handling Forms in Angular Apps
- Module Introduction
- Why do we Need Angular's Help
- Template-Driven (TD) vs Reactive Approach
- An Example Form
- TD Creating the Form and Registering the Controls
- TD Submitting and Using the Form
- TD Understanding Form State
- TD Accessing the Form with @ViewChild
- TD Adding Validation to check User Input
- Built-in Validators & Using HTML5 Validation
- TD Using Form Data
- TD Outputting Validation Error Messages
Course Project - Forms
- Introduction
- TD Adding the Shopping List Form
- Adding Validation to the Form
- Allowing the Selection of Items in the List
- Loading the Shopping List Items into the Form
- Updating existing Items
- Resetting the Form
- Allowing the User to Clear (Cancel) the Form
- Allowing the Deletion of Shopping List Items
- Creating the Template for the (Reactive) Recipe Edit Form
- Creating the Form For Editing Recipes
- Syncing HTML with the Form