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.
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
- Fixing a bug
- Adding Ingredient Controls to a Form Array
- Adding new Ingredient Controls
- Submitting the Recipe Edit Form
- Adding a Delete and Clear (Cancel) Functionality
- Redirecting the User (after Deleting a Recipe)
- Adding an Image Preview
- Validating User Input
- Providing the Recipe Service Correctly
- Deleting Ingredients and Some Finishing Touches
- Deleting all Items in a FormArray