Table of Contents

Angular 2 Training Overview

Angular 2 is one of the next versions of AngularJS Framework for building large scle web applications. As it is next version in AngularJS it contains almost all the new necessary things which are required for developing a high-scale frond-end web and mobile applications. With the help of simple programming it provides mainly new things like performance and load time in respect to the web and mobile development.

Objectives

  • To understand the difference between AngularJS and Angular 2
  • To understand the design of single page application
  • To work with TypeScript
  • To work with MVC(Model View Controller)
  • To use Angular CLI

Pre-requisites

  • HTML and JavaScript
  • Angular JS

Angular 2 Course Content

Getting Started

  • Working with JavaScript Modules and SystemJs
  • Introduction to TypeScript
  • A Conceptual Overview of Angular 2
  • Here’s What We’ll Be Building
  • Installing Git and Node
  • Creating Your First Component
  • Using the Angular CLI

Creating and Communicating Between Components

  • Creating Your First Data-bound Component
  • Using External Templates
  • Communicating with Child Components Using @Input
  • Communicating with Parent Components Using @Output
  • Using Template Variables to Interact with Child Components
  • Styling Components
  • Exploring Angular’s CSS Encapsulation
  • Adding a Site Header

Exploring the New Template Syntax

  • Interpolation, Property Bindings, and Expressions
  • Event Bindings and Statements
  • Repeating Data with ngFor
  • Handling Null Values with the Safe-Navigation Operator
  • Hiding and Showing Content with ngIf
  • Hiding Content with the [Hidden] Binding
  • Hiding and Showing Content with ngSwitch
  • Styling Components with ngClass
  • Styling Components with ngStyle

Creating Reusable Services

  • Introduction
  • Why We Need Services and Dependency Injection
  • Creating Your First Service
  • Wrapping Third Party Services

Routing and Navigating Pages

  • Adding Multiple Pages to Your App
  • Adding Your First Route
  • Accessing Route Parameters
  • Linking to Routes
  • Navigating from Code
  • Guarding Against Route Activation
  • Guarding Against Route De-activation
  • Pre-loading Data for Components
  • Styling Active Links

Collecting Data with Forms and Validation

  • Introduction
  • Using Models for Type Safety
  • Creating Your First Template-based Form
  • Using the Data from Your Template-based Form
  • Validating Template-based Form
  • Validating Reactive Forms

Communicating Between Components

  • Passing Data into a Child Component
  • Passing Data out of a Child Component

Reusing Components with Content Projection

  • Content Projection
  • Multiple Slot Content Projection

Displaying Data with Pipes

  • Using Built-in Pipes
  • Creating a Custom Pipe
  • Sorting and Filtering Overview
  • Creating a Filtering Display
  • Filtering Data

Understanding Dependency Injection

  • Using Third Party Global Services – The Problem
  • Angular Dependency Injection Lookup
  • Using OpaqueToken for Dependency Injection
  • Using the @Inject Decorator
  • The useClass Provider

Creating Directives and Advanced Components

  • Implementing the Session Search
  • Adding jQuery
  • Creating a Modal Component
  • Fixing Template Parse Errors
  • Creating Directives – The Trigger Directive
  • Binding an ID
  • Routing to the Same Component
  • Using the @ViewChild Decorator
  • Creating Settings on Components

Communicating with the Server Using HTTP, Observables, and Rx

  • Moving Data Storage to the Server
  • Listening to Resolved Data Changes
  • Using Querystring Parameters
  • Using POST and PUT
  • Using DELETE
  • Integrating Authentication with the Server
  • Persisting Authentication Status Across Page Refreshes
  • Saving User Data to the Server
  • Implementing Logout

  Unit Testing Your Code

  • Installing Karma
  • Unit Testing Services
  • Testing Mock Calls
  • Testing Components with Isolated Tests

Going to Production

  • Learning the Concepts
  • Linting with TSLint
  • Tuning Your rxJS Requests
  • Enabling Production Mode
  • Basic Copy Deployment
  • Ahead of Time Compiler Overview
  • Preparing for the AOT Compiler
  • Making Coding Fixes for the AOT Compiler
  • Running the AOT Compiler
  • Tree Shaking and Bundling with Rollup