AngularJS

Course Curriculum

DAY 1

• Introduction

  • Angular Introduction

  • Single Page Application

  • MVC Pattern

  • Single Page vs Multi-page application

  • Introduction to Development environment

  • Introduction to Node.js

  • Introduction to npm (Node Package Manager)

  • Introduction to CommonJS

  • Introduction to Transpilers

• Environment Setup

  • Node.js

  • HTTP RESTful API Server for Workshop

  • Setup NPM project with quick start configuration

  • Visual Studio Code

  • Debugger for Chrome

  • Debugging with Visual Studio Code

• Foundation Type Script & ECMA 2016/ES6

  • ES6 features, arrow functions

  • Template Literals

  • Block Scope, Constant, Variables

  • ES6 Classes, Inheritance, Interfaces

  • ES6 modules, export, import

  • Promise

  • TypeScript static type checking

  • TypeScript Generics

  • TypeScript Compiler

  • @types, Definitely Typed project

  • Angular 1 vs Angular 2 vs Angular Overview

• Foundations

  • Components

  • Zone.js

  • Reflect.js

  • Core.JS/Shim

  • RxJS

  • Webpack

  • Angular Branding => 1.x vs 2.0 vs 4.0

• Angular Get Started with SystemJS Universal Module Loaders

  • Angular App Component

  • Angular App Module

  • Angular Main Module, dynamic bootstrapping

  • Bootstrapping an Application component

  • Bootstrapping Process

  • Introduction to System JS

  • Introduction to require module loading, CommonJS

• Angular-Cli

  • Introduction to Webpack

  • Webpack and Module loaders for Angular

  • Angular-cli

  • Create projects

  • Create Services/Components, Helps

  • Build and Serve

• Angular Components

  • Creating Components

  • Providers

  • Component selector

  • Component Templates

  • Component Styles

  • Data Bindings

  • Interpolation

  • Property Binding [One way, Two way]

  • Event Binding

  • ngModel

  • Get data into Component through Input

  • Subscribing to components events through output

  • Nested Component

  • Deeper Nesting of Components

  • Components Events

  • Component Life Cycle

  • Accessing Other Components

• Directives

  • Attribute Directives (NgStyle, NgClass)

  • Structural Directives (NgIf, NgFor, NgSwitch)

• Angular Templates

  • Template Syntax

  • Function Calls

  • Property Binding Syntax

  • Two Way Binding

  • One-way Binding

  • Interpolation

  • Syntactic Sugars in Angular

• Pipes

  • Pipes Introduction

  • Built in Pipes (Currency, Date, Number, Percentages, JSON)

  • Creating custom Pipes

  • Passing Arguments to Pipes

  • Registering Pipes

  • Chaining Pipes

  • Http Web Service Calls with Pipes

  • Async Pipes

  • Handling Promises in Pipes

• Services

  • Implementing Services in Angular

  • Service Dependency

  • Dependency Injection

  • Injectable decorators

  • Provider definition

  • Provider configuration at Angular Bootup

  • Singleton & Multiple Services Instance

  • Http Web Service calls with Services

DAY 2

• Angular Module

  • Creating a custom Module

  • Module Declarations

  • Imports

  • Exports

  • Providers

  • Reusing Modules, Components, Directives, Services

• Rxjs

  • Introduction to Reactive Extension (RxJS) Library

  • What is Reactiveness

  • Observables

  • Subscription

  • Events

  • Streaming in Observables

  • Http Web Service with Observables

• Promises

  • ES6 Promise Introduction

  • Custom Promises

  • Promises vs Observable

  • Using HTTP Web Services with Promises

• HTML5 Forms

  • Form Controls

  • Input

  • Select

  • Buttons

  • ngSubmit

  • HTML 5 Validations

  • Angular Styles, special form valid, pristine, dirty features

  • Two Way Binding

  • Angular Basic Validations

• Routing

  • Route Introduction

  • Configuring Routes

  • Redirection

  • Linking

  • Passing values/parameters between Routes

  • Router Outlet

  • Nested Routing /Child Routes

  • Handling Query Parameters

  • CanActivate Guard

  • CanDeactivate Guard

• HTTP

  • Angular HTTP

  • HTTP backend REST API/Web API Communication with GET, POST, PUT, DELETE methods using Angular HTTP

  • HTTP GET, POST, PUT and DELETE

  • URL Query Parameters

  • Promises

  • HTTP with Observables

DAY 3

• Custom Directives

  • Creating Custom Attribute Directives

  • Creating Custom Structural Directives

  • HostListener

  • HostBinding

• Angular Reactive Forms

  • Reactive Forms Introduction

  • Control Groups

  • Form Validation

  • Form Builder

  • Form Builder Validation

  • Custom Validation

• Angular Security

  • Cross Origin Request

  • CORS Headers Introduction

  • JSONP

• Advanced Concepts

  • Advanced Concepts

  • Shadow DOM

  • View Encapsulation

  • Dynamic rendering of components

  • Creating Native Mobile Builds

• ???????Authentication Authorization

  • JWT Token based Authentication

  • Storing Tokens in HTML5 Storage

  • Authorization with Angular

  • Handling Multiple Roles

• CSS/SCSS

  • Handling SCSS files [Optional]

  • Scoped styles

  • In-lining CSS in components

  • Handling CSS Files using webpack

• HTML5 Storage

  • Introduction to localStorage

  • Introduction to sessionStorage

  • Security with HTML5 storage

  • Cookie fundamentals

  • HTML5 Storage for Application Cache

• Unit Testing Angular

  • Test Driven Development

  • Introduction to Jasmine

  • Introduction to Karma

  • Jasmine Test Suites, Specs, Expectations

  • Jasmine Matchers

  • Jasmine Custom Matchers

  • Setup Injection, Environment for Angular testing

  • Testing Pipes

  • Testing a Components

  • Testing a Service

  • Testing with HTTP

  • Mocking HTTP, Services

  • Testing Directives

• Angular AoT Compilation

  • AoT Compilation

  • AoT Module Bootstrapping

• Setup Release Environments

  • Release Build

  • Optimizing Build Processes

  • Bundle Creation

  • Source map generation with ts-config

Prerequisite

Tools

• Install NodeJS 6.10 LTS from https://nodejs.org/en/download/
• Google Chrome Version 55 or later

            https://www.google.com/chrome/browser/desktop/

• Git - https://git-scm.com
• Visual Studio Code https://code.visualstudio.com/
• Angular-cli - https://github.com/angular/angular-cli

IDE

• Visual Studio Code
  • + Debugger for Chrome Plug-in
  • + TypeScript Angular code snippets for Visual Studio Code

Developer Skill

• Basic JavaScript (/Intermediate preferred) level
• HTML, CSS Basic level
• Web Technologies

            Below skills are preferred, but can be done along with course as well.

• RESTful APIs (basic level) (GET/POST/DELETE methods)
• Awareness of ES6 (ECMA 2015) preferred

            http://es6-features.org/

Internet

• Course need fulltime internet connectivity for Developers. Trainer shall use DataCard or Company given WIFI connectivity

Firewall

• If you have firewall setup, you should enabled npm registry, github website or provide a proxy settings with username/password for installing software modules

System

• Laptop/Desktop PCs with one of the operating system

  • Windows 7.0 or later

  • Mac OS 10.11

  • Ubuntu Linux Desktop 15.10 or later

Administrator Account

• All the systems must have Administrator privileges for developers attending training.

Certification

On successful completion of the training program, participants will receive the certificate of participation.