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