Angular 9
Course Overview
Developed and maintained by Google, Angular has evolved over the years into a comprehensive development framework that includes all of the tools and components required to build a web applications.
At the end of the training, participants will be able to:
- Introduce Angular 9
- Discuss what is Angular 9
- Discuss the various versions of Angular
- Define the features of Angular 9
- Explain about Typescript and its features
Pre-requisite
- Any developer who is building Angular applications
- Teams getting started with or working on Angular projects
Duration
5 Days
Course Outline
- Introduction
- Types & Strict Typing
- REPL
- Built-in types
- Classes
- Properties
- Methods
- Constructors
- Inheritance
- Utilities
- Annotations
- Tuples
- Fat Arrow Functions
- Template Strings
- Introduction to SPA’s & Angular
- Angular v/s v/s React v/s Vue
- Preparing the Angular-cli &Development Environment
- Creating and Preparing the Project
- Creating the Project
- Adding the Bootstrap CSS Package
- Starting the Development Tools
- Editing the HTML File
- Adding Angular Features to the Project
- Preparing the HTML File
- Creating a Data Model
- Preparing the Template
- Preparing the Component
- Understanding DI (dependency injection)
- Putting the Application Together
- Adding Features to the Example Application
- Adding the To-Do Table
- Creating a Two-Way Data Binding
- Adding To-Do Items
- Finishing touches
- Preparing the Project
- Installing the Additional NPM Packages
- Preparing the RESTful Web Service
- Preparing the HTML File
- Understanding the MVC Pattern
- Understanding RESTful Services
- Common Design Pitfalls
- Putting the Logic in the Wrong Place
- Adopting the Data Store Data Format
- Planning Architecture (SRP / Separation of concerns )
- Starting the RESTful Web Service
- Preparing the Angular Project Features
- Updating the Root Component
- Updating the Root Module
- Inspecting the Bootstrap File
- Starting the Data Model
- Creating the Model Classes
- Creating the Data Source with Observables
- Creating the Model Repository
- Creating the Feature Module
- Creating the Store Component and Template
- Creating the Store Feature Module
- Updating the Root Component and Root Module
- Adding Store Features the Product Details
- Displaying the Product Details
- Adding Category Selection
- Adding Product Pagination
- Creating a Custom Directive
- Understandind SRP & OCP etc (single responsibility principle & Open & Closed Principle)
- Creating the Cart
- Creating the Cart Model
- Creating the Cart Summary Components
- Integrating the Cart into the Store
- Adding URL Routing
- Creating the Cart Detail and Checkout Components
- Creating and Applying the Routing Configuration
- Navigating Through the Application
- Guarding the Routes
- Completing the Cart Detail Feature
- Processing Orders
- Extending the Model
- Collecting the Order Details
- Using the RESTful Web Service
- Applying the Data Source
- View Encapsulation
- Creating the Lazy Loaded Module
- Configuring the URL Routing System
- Navigating to the Administration URL (Auxiliary routes & Lazy Loading)
- Implementing Authentication
- Understanding the Authentication System
- Extending the Data Source
- Creating the Authentication Service
- Enabling Authentication
- Extending the Data Source and Repositories
- Creating the Administration Feature Structure
- Creating the Placeholder Components
- Preparing the Common Content and the Feature Module
- Implementing the Product Feature
- Rxjs Operators
- Implementing the Orders Feature
- Adding Progressive Features
- Installing the PWA Package
- Caching the Data URLs
- Responding to Connectivity Changes
- Preparing the Application for Deployment
- Creating the Data File
- Creating the Server
- Changing the Web Service URL in the Repository Class
- Building and Testing the Application
- Testing the Progressive Features
- Containerizing the SportsStore Application
- Installing Docker
- Preparing the Application
- Creating the Docker Container
- Running the Application
- Adding Form Data Validation
- Validating the Entire Form
- Using Model-Based Forms
- Enabling Model-Based Forms Feature
- Defining the Form Model Classes
- Using the Model for Validation
- Generating the Form Elements from the Model / Service
- Creating Custom Form Validators
- Applying a Custom Validator
- Creating a Simple Attribute Directive
- Applying a Custom Directive
- Accessing Application Data in a Directive
- Reading Host Element Attributes
- Creating Data-Bound Input Properties – @input
- Responding to Input Property Changes
- Creating Custom Events – @output
- Binding to a Custom Event
- Creating Host Element Bindings – @hostBinder & @hostListener
- Creating a Two-Way Binding on the Host Element
- Replacing the ngModel directive
- Exporting a Directive for Use in a Template Variable
- Change Detection Strategy
- Creating a Simple Structural Directive
- Implementing the Structural Directive Class
- Enabling the Structural Directive
- Using the Concise Structural Directive Syntax
- Creating Iterating Structural Directives
- Replacing the *ngFor directive
- Providing Additional Context Data ( Template variables like index,first,last,odd,even etc)
- Using the Concise Structure Syntax
- Dealing with Property-Level Data Changes – ngOnInit & ngOnChanges
- Dealing with Collection-Level Data Changes – ngDoCheck
- Restricting Memory leak – ngDoCheck
- Querying the Host Element Content @ViewChild
- Querying Multiple Content Children @ViewChildren
- Receiving Query Change Notifications
- Understanding the Performance issue with ngDoCheck
- Solving the Problem with Reactive Extensions
- Understanding Observables
- Understanding Observers
- Understanding Subjects
- Using the Async Pipe
- Using the Async Pipe with Custom Pipes
- Scaling Up Application Feature Modules
- Going Beyond the Basics
- Filtering Events
- Transforming Events
- Receiving Only Distinct Events
- Taking and Skipping Events
- Debugging with Angular 9 Ivy
- Angular Ivy Validation
- Running a Simple Unit Test
- Working with Jasmine
- Testing an Angular Component
- Working with the TestBed Class
- Testing Data Bindings
- Testing a Component with an External Template
- Testing Component Events
- Testing Output Properties
- Testing Input Properties
- Testing with Asynchronous Operations
- Testing an Angular Directive