Angular 6 Training

• Understand the difference between Angular and  traditional web development frameworks
• Learn to write the code with using TypeScript language and ES6 features
• Build a robust application with Angular 6
• Understand and use Angular Forms, Dependency Injection, Observables, and Routing
• Explore Angular coding and architecture best practices
• Know about all the parts of an Angular application including Modules, Services, Components, and Pipes
• Design, develop and deploy an Angular 6 application using the Angular CLI
• Build reusable elements using angular elements
• Develop dynamic model-driven forms that are easier to unit test

• Web Developers who want to build sophisticated applications through Angular
• Students who want to pursue web application development as a career

• The candidates should have the basic knowledge of HTML and JavaScript.

Module 1: Introduction

• Introduction

Module 2: Why Angular?

• User Experience similar to a Desktop Application
• Productivity and Tooling
• Performance
• Community
• Full-featured Framework
• Platform for Targeting Native Mobile not just Web Browsers

Module 3: Understanding Angular Versions

• AngularJS (Angular 1.x)
• Angular
• Angular 2
• Angular 4
• Angular 5
• Angular 6

Module 4: Typescript & ES6

• Introduction
• What is Typescript
• Why Typescript
• Setup and installation
• IDE support
• Scoping using Let and Const Keywords (ES6)
• Template Literals  (ES6)
• Spread Syntax and Rest Parameters  (ES6)
• Destructuring (ES6)

Module 5: Power of Types

• Introduction
• Type inference
• Type Annotations
• Number
• Boolean
• String
• Array
• Tuple
• Enum
• Any
• Void
• Null and Undefined
• Never (Typescript 2)

Module 6: Explore Functions

• Introduction
• Using types in functions
• Function as types
• Optional and default parameters
• Arrow functions
• Function overloading

Module 7: Classes

• Introduction
• Inheritance
• Access modifiers
• Getters and setters
• Read only& static
• Abstract classes

Module 8: Interfaces

• Introduction
• Optional properties and methods
• Readonly&const
• Strict structural contract
• Extending interface
• Implementing interface

Module 9: Modules

• Introduction
• Import
• Export
• Default

Module 10: Decorators (Typescript Aspect Oriented Programming)

•     Decorators (Typescript Aspect Oriented Programming)

Module 11: Working with Angular CLI

• Angular CLI
• Anatomy of the project
• Debugging Angular apps
• Working with Augury

Module 12: 8 Main Building Blocks of Angular (Birds eye view of Angular 5)

• Modules
• Components
• Templates
• Metadata
• Data binding
• Directives
• Services
• Dependency injection

Module 13: Angular Modules

• Angular Modules

Module 14: Angular Libraries

• Angular libraries

Module 15: Components

• Introduction
• Component decorator
• Component configuration object
• Custom components
• Component with templates
• Inline
• External
• Component with Styles
• Inline
• External

Module 16: Templating

• HTML as template
• Data binding
• Interpolation
• Property Binding
• Event Binding
• Two way binding
• Template expressions
• Template syntax
• Attribute, class and style bindings
• Input ()
• Output
• Template reference variables
• Safe navigation operator

Module 17: Directives

• Introduction
• Built-in directives
• Structural directive
• NgIf
• NgFor
• NgSwitch
• Attribute directive
• NgClass
• NgStyle
• NgModel
• Directive decorator

Module 18: Pipes

• Introduction
• Built-in pipes
• Pipe decorator
• Custom pipe development

Module 19: Forms

• Introduction
• Angular/forms library
• Template driven forms
• Form and field validation
• Validation check with ng-pristine,ng-dirty, ng-touched, ng-untouched, ng-valid, ng-invalid
• Show and hide validation error messages
• Form submission with ngSubmit
• Reactive/ Model drive forms
• ReactiveFormsModule
• FormGroup, FormControl classes
• FormBuilder for easy form building
• Validations using Validators
• Setting form model using setValue and patchValue
• Use FormArray to build repeated from controls or form groups

Module 20: Dependency Injection

• Introduction
• Why DI
• Injectable decorator
• Custom service development
• Registering the service with NgModule using providers key
• Provider Types
• Class
• Factory
• Value

Module 21: Routing and Navigation

• Introduction
• Angular/router library
• Configure routes
• RouterModule.forRoot and RouterModule.forChild
• RouterOutlet, RouterLink, RouterLinkActive
• Nested Routes
• Parametrized routes
• Route guards
• Router events

Module 22: RxJs Primer

• Introduction
• Why RxJs
• Observable interface
• Streams
• Operators
• Subscription
• Subject
• Schedulers

Module 23: HTTP Deprecated & HttpClient

• Setup installing the module
• Making a request for JSON data
• Typechecking the response
• Reading the full response
• Error handling
• Requesting non-JSON data
• Sending data to the server
• Making a POST request
• Configuring other parts of the request
• Working with HTTP interceptors for better error handling in http requests

Module 24: New Features in Angular 6

• New features in angular CLI
• ng update
• ng add
• Angular Elements
• Updates to @angular/material
• CLI workspaces
• Building libraries
• Tree shakable providers
• RxJs 6 Support

Module 25: How to upgrade Angular 6

• How to upgrade Angular 6

Module 26: Testing

• Introduction
• Testing in Typescript
• Testing Component
• Testing Service/Provider
• Testing Pipe

Module 27: Deployment

• Manually
• Using the Angular CLI with Ahead-Of-Time (AOT) Compilation and Tree-Shaking (removing unused library code)