Angular 2 Training

Angular 2 Training

Course Description

The Angular 2 training course is designed to teach developers how to use AngularJS to facilitate the development of the Single Page Applications. It provides the knowledge and skills required to become a successful Front-End full stack developer. It starts with the fundamental concepts of AngularJS like Directives, Filters, Controllers, Services and then move to the advanced concepts like Dependency Injection, Custom Services, Routing, Templates, TypeScript, REST Exposure and Angular2 features.

Course Objective

After the completion of this course, Trainee will:

Hands on experience of developing Single Page Applications using Angular

Using AngularJS 2 features like pipes, templates, cross platform features

Exposure to RESTful web services

Understand how to use Node.JS, MongoDB (MEAN Stack)

Why learn and get certified in Angular 2?

AngularJS is a powerful JavaScript MVC framework developed and maintained by Google. Ever since its release, Angular ecosystem has grown beyond imagination with a growth rate of 1400%. It currently boasts the biggest community of developers and is most used JavaScript framework for developing Single Page Applications

With Angular 2.0 is a complete-rewrite with massive changes like internationalization, tight integration with ES6, TypeScript, comprehensive routing , mobile support and more

AngularJS is listed with more job opportunities compared to the other JavaScript framework. Average Salary of an Angular developer is $102,000 per year

Who should attend this training

AngularJS is one of the fastest growing client side technology and maintained by Google. There is an increasing demand for AngularJS professionals in the market. This professional course is ideally suited for:

Junior and Senior Front end/Web/Javascript Developers

MEAN Stack Developers

AngularJS 1.X Developers upgrading to newer Angular version

Technical Leads and Architects

Quality and Testing Professionals

Graduates aiming to build a career in Web or Front end Development

How will I perform the Practicals?

For practicing, completing the assignments and case studies provided in this training course for AngularJS 2, you will need the following tools. All these tools are Open source,

Editors – Sublime Text3, Brackets, Notepad++

Browsers – Google Chrome, Firefox, IE 9+

Apache Server – XAMPP Server

Pre-requisites

Moderate knowledge of HTML,CSS and JavaScript

The DOM ( Document Object Model

JavaScript functions, events, and error handling

Key features

32 hours of instructor-led training

5 simulation exams (250 questions each)

8 domain-specific test papers (10 questions each)

30 CPEs offered

98.6% pass rate

Angular 2 Training Duration :- 4 Days

Day –1:

Introduction

Angular 2 V/S other popular JS frameworks

(Ext js/ Backbone / Ember /React)

Writing Our First Application:

Getting started

TypeScript

Example Project

Angulars Dependencies

All Dependencies Loaded

Adding CSS

Our First TypeScript

Making a Component

Adding a template

Booting Our Application

Loading our Application

Running The App

Compiling the TypeScript Code to js

Using npm

Serving The App

Compiling on every change

Adding Data to the Component

Working with arrays

Expanding our Application

The Application Component

Adding Interaction

Adding the Article Component

Rendering Multiple Rows

Creating an Article class

Storing multiple Articles

Configuring the ArticleComponent with inputs

Rendering a List of Articles

Adding New Articles

Finishing Touches

Displaying the Article Domain

Re-sorting Based on Score

Introducing TypeScript :

Angular 2 is built in TypeScript

What do we get with TypeScript?

Types

Trying it out with a REPL

Built-in types

Classes

Properties

Methods

Constructors

Inheritance

Utilities

Fat Arrow Functions

Template Strings

Angular Internals :

Application

The Navigation Component

The Breadcrumbs Component

The Product List Component

Product Model

Components

Component Decorator

Component selector

Component template

Adding A Product

Viewing the Product with Template Binding

Adding More Products

Selecting a Product

Listing products using

The ProductsList Component

Configuring the ProductsList @Component Options

Component inputs

Component outputs

Emitting Custom Events

Writing the ProductsList Controller Class

Writing the ProductsList View Template

The Full ProductsList Component

The ProductRow Component

ProductRow Component Configuration

ProductRow Component Definition Class

ProductRow template

ProductRow Full Listing

The ProductImage Component

The PriceDisplay Component

The ProductDepartment Component

NgModule and Booting the App

Booting the app

The Completed Project

A Word on Data Architecture

Components Inbuilt :

Introduction

NgIf

NgSwitch

NgStyle

NgClass

NgFor

Getting an index

NgNonBindable

Day –2:

Working with Forms :

Forms are Crucial, Forms are Complex

FormControls and FormGroups

FormControl

FormGroup

Our First Form

Loading the FormsModule

Simple SKU Form: @Component Annotation

Simple SKU Form: template

Simple SKU Form: Component Definition Class

Try it out!

Using FormBuilder

Reactive Forms with FormBuilder

Using FormBuilder

Using myForm in the view

Adding Validations

Explicitly setting the sku FormControl as an instance variable

Custom Validations

Watching For Changes

ngModel

Working with HTTP Service:

Introduction

Using @angular/http

import from @angular/http

A Basic Request

Building the SimpleHTTPComponent @Component

Building the SimpleHTTPComponent template

Building the SimpleHTTPComponent Controller

Full SimpleHTTPComponent

Writing a YouTubeSearchComponent

Writing a SearchResult

Writing the YouTubeService

Writing the SearchBox

Writing SearchResultComponent

Writing YouTubeSearchComponent

@angular/http API

Making a POST request

PUT / PATCH / DELETE / HEAD

RequestOptions

Working with Routes :

Why Do We Need Routing?

How client-side routing works

The beginning: using anchor tags

The evolution: HTML client-side routing

Writing our first routes

Components of Angular 2 routing

Imports

Routes

Installing our Routes

RouterOutlet using

RouterLink using [routerLink]

Putting it all together

Creating the Components

HomeComponent

AboutComponent

ContactComponent

Application Component

Configuring the Routes

Routing Strategies

Path location strategy

Running the application

Route Parameters

ActivatedRoute

Music Search App

First Steps

The SpotifyService

The SearchComponent

Trying the search

TrackComponent

Wrapping up music search

Router Hooks

AuthService

LoginComponent

ProtectedComponent and Route Guards

Nested Routes

Configuring Routes

ProductsComponent

More on Dependency Injection:

Injections Example: PriceService

Dependency Injection Parts

Playing with an Injector

Providing Dependencies with NgModule

Providers

Using a Class

Using a Factory

Using a Value

Using an alias

Dependency Injection in Apps

Working with Injectors

Substituting values

NgModule

NgModule vs JavaScript Modules

The Compiler and Components

Dependency Injection and Providers

Component Visibility

Specifying Providers

Day –3:

Data Architecture in Angular 2

An Overview of Data Architecture

Data Architecture in Angular 2

Data Architecture with Observables – Services

Observables and RxJS

Note: Some RxJS Knowledge Required

Learning Reactive Programming and RxJS

Chat App Overview

Components

Models

Services

Summary

Implementing the Models

User

Thread

Message

Implementing UserService

currentUser stream

Setting a new user

UserService ts

The MessagesService

the newMessages stream

the messages stream

The Operation Stream Pattern

Sharing the Stream

Adding Messages to the messages Stream

Our completed MessagesService

Trying out MessagesService

The ThreadsService

A map of the current set of Threads (in threads)

A chronological list of Threads, newest-first (in orderedthreads)

The currently selected Thread (in currentThread)

The list of Messages for the currently selected Thread (in currentThreadMessages)

Venue is finalized few weeks before the training and you will be informed via email. You can get in touch with our 24/7 support team for more details. Contact us Mob no:- 8447121833, Mail id: [email protected] . If you are looking for an instant support, you can chat with us too.