fbpx

Angular 5

This course is designed to help you understand how Angular is different than the traditional web development frameworks. Explore Angular coding and architecture best practices. Understand and use Angular Forms, Observables, Dependency Injection, and Routing.

Enquire Now

Course Advantage

  • Upgrade an existing application from AngularJS to Angular 5 over time by running both frameworks in the same project.
  • Develop an application from scratch using Angular 5.
  • Create, build, and deploy an Angular (Angular 5) application using the Angular CLI.
  • Develop dynamic Model-driven forms that are easier to unit test.

Available Modules

In-class and Online

Eligibility

Any graduate with prior knowledge of HTML, CSS and Javascript

Course Duration

24 hours of classroom session

Module 1 : Introduction

• Introduction of A5 (Angular 5)

Module 2: Why Angular 5

• 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

Module 4:- Understanding Angular 5

• Drop-in replacement for Angular 2

Module 5:- 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 6:- Working with Angular CLI

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

Module 7:- Main Building Block of Angular 5 (Birds Eye Angular 5)

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

Module 8:- Component

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

Module 9:- 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 10: Directives

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

Module 11 : Pipes

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

Module 12:- 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 13: Routing & Navigation

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

Module 14 :– 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

Module 16 : — Testing

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

Enquire Now

Course Advantage

  • Upgrade an existing application from AngularJS to Angular 5 over time by running both frameworks in the same project.
  • Develop an application from scratch using Angular 5.
  • Create, build, and deploy an Angular (Angular 5) application using the Angular CLI.
  • Develop dynamic Model-driven forms that are easier to unit test.

Become a MEAN