Angular Js Training Course
Duration:
35 HRS
Subjects:
Angular Js
- Course Overview
- Where to find the Course Source Code
- What is Angular?
- Why Angular?
- What You Should Already Know
- Building Blocks of an Angular Application
- Basic Architecture of an Angular Application
- Angular js vs Angular 2 vs Angular 4 vs Angular 5 vs Angular 6 vs Angular 7 vs Angular 8
- Angular Semantic Versioning
- Angular Release Frequency and Schedule
- Angular Preview releases
- Support policy and schedule
Introducing Angular
- Angular Environment Setup
- IDE for writing your code (Editor)
- What is Node.js
- Why does Angular 2 and above need Node.js
- What is Node Package Manager (NPM)
- What is Angular CLI
- Installing VS Code
- Installing Node.js and NPM
- Installing CLI
- Creating a New Project (First App)
- Building the Application
- Running the Application
- Editing the First App
- Project Structure
- package json and package-lock json
- Package Version Numbering Syntax
- Updating Packages
- Uninstalling Packages
- Workflow of angular
- What is a Component?
- An Example Component
- The Component Class
- Adding a Component to Its Module
- Creating a Component Using Angular CLI
- The Application Root Component
- Brief of @Component Decorators
- template & templateUrl
- Styles and StyleUrls
- preserveWhitespaces
- viewProvider
- moduleId
- Interpolation
- Encapsulation
- Selector
- Input Property
- Component Lifecycle Hooks
- Constructor Vs ngOnInit
- What are Directives
- Component Directives
- Structural directives
- Attribute Directive
- Custom Directives
- Custom Structural Directive
- TemplateRef
- ViewContainerRef
- Component view
- Host view
- Embedded view
- Custom Attribute Directive
- ElementRef
- Renderer
- Binding to Directive Properties using Custom property binding
- Structural directives
- NgIf
- NgIf with HTML Elements
- NgIf Null Check
- NgIf with Enum
- ng-template
- NgIf with Else
- Angular NgIf-Then-Else
- Expanding ngIf into template
- ngIf - ng-template
- ngIf-else - ng-template
- ngIf-then-else - ng-template
- NgIf with Component Elements
- NgIf with Async Pipe
- More than one ng-template for then and else block (NgIf-ThenElse)
- NgFor
- NgForOf with HTML Elements
- NgForOf with ng-template
- index, even and odd with HTML Elements
- index, even and odd with ng-template
- first and last with HTML Elements
- first and last with ng-template
- NgForOf with Async Pipe with HTML Elements
- NgForOf with Async Pipe with ng-template
- trackBy with HTML Elements
- trackBy with ng-template
- NgSwitch
- NgSwitch with html element
- Expanding ngSwitchCase and ngSwitchDefault into template
- NgSwitch with ng-template
- NgSwitch with Enum
- NgSwitch with NgFor and class
- NgSwitch and NgFor in same element
- Attribute Directive
- ngStyle
- Alternative syntax of ngStyle
- ngClass
- NgClass with String
- NgClass with Array
- NgClass with Object
- Alternative syntax of NgClass
- NgSwitch with NgFor and NgClass
- NgClass with Array
- NgClass with Object
- Alternative syntax of NgClass
- NgSwitch with NgFor and NgClass
- NgIf with NgFor and NgClass
- Data binding
- Binding Syntax
- Classification of Data Binding
- One-Way Data Binding
- Different types of one-way data binding
- Difference between attribute and property
- Interpolation
- Attribute Binding
- Style Binding
- Class Binding
- Property Binding
- What is the difference between Property Binding and Interpolation?
- Event Binding
- How can we say that - two-way data binding in Angular is actually a combination of both Property Binding and Event Binding?
- Two-Way Data Binding
- What are Pipes?
- Formatting Changes in Angular
- What is ngNonBindable?
- Built-in Pipe
- Lowercase pipe
- Uppercase pipe
- Titlecase pipe
- Slice pipe
- Json Pipe
- Decimal pipe
- Percent Pipe
- Currency Pipe
- Date Pipe
- Percent Pipe
- Parameterized pipes
- Multiple pipes (Chaining pipes)
- Async Pipe
- Custom Pipe
- Chaining of Custom Pipes
- Use Built-in Pipe in Custom Pipe
- Pure and Impure Pipes
- Pure Pipe Example
- What is decorators
- @NgModule
- @Component
- @Injectable
- @Directive
- @Pipe
- @Input
- @Output
- EventEmitter
- emit()
- @HostBinding
- @HostListener
- @ContentChild
- @ContentChildren
- @ViewChild
- @ViewChildren
- What is JavaScript?
- What is Typescript?
- Transpilation
- Programming Languages for Use with Angular
- Programming Languages for Use with Angular
- Typescript Syntax
- Why use Typescript
- Text Editors For Typescript
- Why Typescript is developed while having JavaScript?
- Typescript Version
- Features of Typescript
- Advantage of Typescript over JavaScript
- Disadvantage of Typescript over JavaScript
- Typescript vs. JavaScript
- Difference between JavaScript and Typescript
- Components of Typescript
- TypeScript - Type Annotations
- TypeScript - Variable
- var Declaration
- let Declaration
- Advantages of using let over var
- Const Declaration
- Typescript Data Type
- Static Data Type
- Built-in or Primitive Type
- Number Type
- String Type
- Boolean Type
- Void Type
- Any Type
- Null Type
- User-Defined DataType
- Array
- Tuple
- Interface
- Class
- Enums
- Functions
- Generics Data Type
- Decorators Data Type
- Difference between Null and Undefined
- Typescript - Decision Making
- Typescript - if
- Typescript - if else Condition
- Typescript - else if Condition
- Typescript - switch
- Typescript - Loops
- Typescript - for Loops
- Typescript - while Loop
- Typescript - do. While loop
- Typescript - Data Modifiers
- public
- private
- protected
- Typescript - Function
- named functions
- Anonymous functions
- Function Parameters
- Optional Parameters
- Default Parameters
- Arrow Function
- Typescript - Rest Parameters
- The Type System – Classes & Objects
- Class Constructors
- Interfaces
- Working with Modules
- What is a Service?
- Creating a Basic Service
- What is Dependency Injection?
- What Dependency Injection Looks Like
- Injecting Services
- Using a Service in a Component
- Using onInit to Initialize Component Data
- Injector
- Provider
- @Injectable Decorator
- @Inject() Decorator
- providedIn
- Tree Shakeable Providers
- Include the Service in component level
- Include the Service in module level
- Inject Service into other Service (Nested Services)
- Single VS Multiple Instance of Services
- Routing and Navigation
- The Component Router
- Component Router Terminology
- Setting up the Component Router
- A Basic App with Routing
- Router Outlet
- Router Link
- Router Link – Client Side
- Router Link – Server-Side
- Creating a Routing Module
- ForRoot() and ForChild()
- Create Component/Service/pipe/directive/class/guard without spec.ts
- Difference-between-the-href-and-routerLink
- Redirecting Routes
- Wildcard Route
- Child Routes / Nested Routes
- Nested Routes (Nesting Children’s under a child)
- Parameterize Route
- The Snapshot Way
- The Observable/Stream Way
- Passing Data During Navigation
- Passing Data During Navigation
- Navigating with Route Parameters
- Retrieving the Route Parameter
- Route Guards
- Basic information about route guards
- Route Guards Parameters
- ActivatedRouteSnapshot
- RouterStateSnapshot
- Route Guard Types
- CanActivate guard
- CanActivateChild guard
- CanDeactivate guard
- Resolve guard
- CanLoad guard
- Named and Multiple Router-Outlets (Auxiliary Routes or secondary routes)
- Difference between [routerLink] and routerLink
- RouterLinkActive
- Navigate
- NavigateByUrl
- Query Parameters
- Introduction of modules
- The Root Module
- @ngmodule decorator
- Purpose of @ngModule
- Types of ngModule
- @ngModule Metadata Properties
- Feature Modules in Angular
- Eager Loading
- Lazy Loading Modules
- Preloading Modules
- Custom Preloading Modules strategy
- Custom Preloading Modules strategy with delay
- How to Create a Module
- Importing BrowserModule or CommonModule…etc
- What is HTML Web Storage?
- What is localStorage and sessionStorage?
- Set Entries
- Updating Entries
- Deleting Entries
- Clearing Everything
- Storing Json Objects
- Checking for Items
- Checking for Support
- Iterating Over Items
- What is Observable
- What is Subscribe
- Angular In-Memory Web API
- Observable and subscribe with Web API
- Observable with Async pipe and ngFor
- Observable with Async pipe and ngIf
- Observable map
- What is Promise
- Difference between observable and promise
- The Angular HTTP Client
- Using The HTTP Client - Overview
- Importing HttpClientModule
- Service Using HttpClient
- Using the Service in a Component
- HTTP VS HttpClient
- HttpModule VS HttpClientModule
- HttpClient get()
- HttpClient post()
- HttpClient put()
- HttpClient delete()
- HttpParams and HttpHeaders
- Use of headers in HttpClient
- Use of observe in HttpClient
- Use of params in HttpClient
- Use of reportProgress in HttpClient
- Use of responseType in HttpClient
- Use of withCredentials in HttpClient
- Requesting JSON using HttpClient.get using subscribe method
- Requesting JSON using HttpClient.get useing async pipe with Observable
- Requesting Text data using HttpClient.get using subscribe method
- Requesting Text data using HttpClient.get useing async pipe with Observable
- Using HttpParams
- Using HttpParams and HttpHeaders
- Using HttpClient.get with observe Property
- Error Handling
- RxJS retry() to Handle Error
- HttpClient.post Body
- HttpClient.post with Headers
- HttpClient.post with observe Option
- HttpClient.post and Response Type
- HttpClient.post with Error Handling
- HttpClient.put Body
- HttpClient.put with Headers
- HttpClient.put with observe Option
- HttpClient.put and Response Type
- HttpClient.put with Error Handling
- HttpClient.delete with Headers
- HttpClient.delete with observe Option
- HttpClient.delete and Response Type
- HttpClient.delete with Error Handling
- Forms in Angular
- Template Driven Forms
- Template Driven Forms features
- Importing Forms Module
- A Basic Angular Form
- What is NgForm?
- What is NgModel?
- Template Driven Forms with Validation
- What is ng-touched?
- What is ng-untouched?
- What is ng-pristine?
- What is ng-valid?
- What is ng-invalid?
- Binding Input Fields
- Accessing the Form Object
- Binding the Form Submit Event
- The Submit Function
- Basic HTML5 Validation - "required" Attribute
- HTML5 vs. Angular Validation
- Angular Validators
- Angular Validation State
- Controlling when validation is applied
- Displaying Form Validation State
- Displaying Field Validation State
- Displaying Validation State Using Classes
- Disabling Submit when Form is Invalid
- Submitting the Form
- Checkboxes
- Select (Drop Down) Fields
- Rendering Options for Select (Drop Down)
- Date fields
- Radio Buttons
- Model Driven Forms
- Setup for Model Driven Forms
- Form Component Setup
- Setup Main FormGroup
- formControlName
- FormControl Object
- Getting Form Values
- FormBuilder Form Initialization
- Validation
- Built-In Validators
- Controlling when validation is applied
- What is FormControl?
- What is FormGroup?
- What is FormBuilder?
- Reactive forms with Validation
- FormGroup Get Value and reset()
- FormGroup setValue() and patchValue()
- valueChanges() and statusChanges()
- What is FormArray?
- Use of FormArray in component
- What is Nested FormArray?
- Use of Nested FormArray in component
- What is Nested FormGroup?
- Use of Nested FormGroup
- Reactive Form Using Angular Material Design
- Custom Validator
- Using a Custom Validator
- What is Angular Material?
- Angular Material - Features
- Angular Material - install and use
- Angular Material Theming
- Angular Material All Modules
- What is bootstrap?
- Install and Use bootstrap in Angular
- How to Import and Use jQuery in Angular
- What is Cookies?
- Creating Cookies using ngx-cookie-service in Angular
- Cookie methods-Check
- Cookie methods-Get
- Cookie methods-GetAll
- Cookie methods-Set
- Cookie methods-Delete
- Cookie methods-DeleteAll
- Angular Versions
- Angular 8 Overview
- Upgrading to Angular 8
- Creating New Projects with Angular v5
- What's New in Angular 8 and How to update to version 8
- Differential Loading by Default in Angular 8
- Dynamic Imports in Angular 8
- Builder APIs in the CLI in Angular 8
- Workspace APIs in the CLI
- Web Worker Support
- Use Analytics Data
- Bazel Support
- Bye Bye @angularhttp
- Changes in ViewChild and ContentChild
- Support SVG Template
- Ivy Rendering Engine
- AngularJS Migration Improvements
- What is a Single Page Application (SPA)
- SPA Workflow
- Traditional Web Application Capabilities
- Single Page Application Advantages
- SPA and Traditional Web Sites
- SPA Challenges
- Implementing SPA's Using Angular
- Simple SPA Using Visibility Control
- SPA Using Angular Components
- Implement SPA Using an Angular Component Router