Share Description
In this course, you will :
- Built a Single Page Application using Angular.
- Using TypeScript.
- Implementing various building blocks in Angular.
- Using Third Party Modules like Angular Material and AngularFire 2.
Syllabus :
1. Single Page Applications, Why Angular, and Getting Started
- Introduction to Single Page Applications(SPA)
- What do we need Angular for
- Setting up the Development Environment
- Angular is rapidly evolving! Stay in the loop!
- Angular Application Architecture
- First Angular App
2. TypeScript and ESNext
- Module Introduction and Introduction to TypeScript
- Setting up the environement to write TypeScript
- Variable declarations(var, let, and const)
- Types - Primitives
- Types - Reference and Special Types
- Operators - Spread and Backticks
- Operators - Destructure and Rest
- Classes
- Interface
- Arrow Functions
- Modules
- fetch
- async/await
3. Decorators, @NgModule, Angular Modules and App Bootstrap Mechanism in Angular
- What are decorators?
- Angular Modules and the @NgModule Decorator
- declarations
- imports and exports
- providers, bootstrap, and entryComponents
- Angular Application Bootstrap Mechanism
4. @Component Decorator, Angular Components, Communication, and the Lifecycle Hooks
- Angular Components and the @Component Decorator
- Creating an Angular Component using the Angular CLI and on StackBlitz
- Component Decorator Metadata
- View Encapsulation - Emulated, ShadowDom, None
- Data Binding - String Interpolation - {{ }}
- Property Binding - []
- Event Binding - ()
- @Input and @Output Property Decorators
- Two-way Data Binding - [()]
- Attribute Binding - [attr.]
- Class Binding - [class.]
- Style Bindings - [style.]
- Quiz on Component Bindings and Communication Techniques
- Introduction to Lifecycle Hooks in Angular
- Lifecycle Hooks - When to use which method?
- View Queries - @ViewChild
- View Queries - @ViewChildren
- View Queries - @ContentChild and @ContentChildren
- Change Detection Mechanism in Angular. ZoneJS, NgZones
5. Angular Routing, Guards
- Implementing Routing in an Angular App
- Creating a User List. Setting the stage for Child Routing
- Abstracting the user link to a separate component
- Implementing Child Routes
- Path Match and Route Types
- Introduction to Route Guards in Angular
- CanActivate and CanActivateChild Guards in Angular
- CanDeactivate Guard in Angular
- Prefetching Data for a Component using Resolve
6. Dependency Injection(As a Pattern, As a Framework), Services, HTTP, Observables
- Introduction to Section 4
- DI as a Pattern, DI as a Framework and Types of Providers
- Hierarchical Dependency Injection
- Introduction to Services in Angular
- GET data from a Rest API using HttpClient
- CRUD Operations using HttpClient, HttpParams and HttpHeaders
- Observables and Operators in Observables - Map, Retry, Catch
- Behavior Subject and Sharing Data using Behavior Subjects
7. Directives and Pipes in Angular
- Introduction to Directives
- Built in Structural Directives
- Built in Attribute Directives
- Building custom Attribute Directives
- Building Custom Structural Directives
- Introduction to Pipes in Angular
- Using Built In Pipes
- Creating Custom Pipes in Angular
- Pure and Impure Pipes in Angular
- Decorators Revisited
- Building Custom Decorators in Angular
- Building Custom Property Decorator in Angular
8. Forms in Angular
- Types of Form Building Strategies in Angular
- Creating Long Bootstrap forms quickly using VS Code using Emmet
- Adding FormControl(s) to a Template Driven form using the ngModel directive
- Getting the JavaScript Object Representation of a form using ngForm directive
- Disabling the Submit Button on a Form using form's $invalid flag
- Getting the JavaScript Object Representation of a form in TypeScript Class
- Adding Checkbox, Radio Buttons and Select List to your Template Driven Form
- Creating Subsections in the form using NgModelGroup directive
- Steps to implement a Reactive form in Angular
- Quickly creating a Bootstrap form for our Reactive form using Emmet
- Creating a Reactive form in the TypeScript class & connecting it to the template
- Adding form Validations to a Reactive Form
- Dynamically Adding or Removing FormControl(s) or FormGroup(s) using FormArray(s)
- Adding Synchronous Custom Validations to your Reactive Form
- Adding Async Custom Validations to your Reactive Form
- Resetting the value of a form
9. Using Third Party Libraries and Frameworks like MDB, Angular Material & Firebase
- Creating an Angular CLI Project with SCSS as a base style
- Introducing Material Design Bootstrap into your Angular CLI Project
- Adding a Navbar in your header
- Adding Material Design Buttons
- Adding Cards
- Using Material Design Dropdowns and Form Inputs
- Introducing Angular Material into your Angular CLI Project on the top of MDB
- Adding Radio Buttons, Slide Toggle, Slider, Progress Bar and Spinner
- Creating an App using the Firebase Console
- Interacting with Firebase Realtime Database using methods on AngularFireList
- Adding and Reading Data from Realtime Database in Firebase
- Updating and Deleting Data from Realtime Database in Firebase
