Choose your language:

France
Germany
Hong Kong
India
Ireland
Japan
Malaysia
Netherlands
New Zealand
Singapore
Sweden
United Kingdom
United States

Introduction to Angular

Course Code

IN1560

Duration

3 Days

Participants should have a thorough understanding of HTML, CSS and JavaScript. Familiarity with AngularJS (the prior version) is not required.
Angular is a development platform for building mobile and desktop web applications. Angular 2 is a complete re-invention of the incredibly popular platform providing better performance and maintainability, using TypeScript instead of JavaScript. This course will teach developers how to build rich client applications for platforms from desktop to mobile.
This course is designed for developers.

Upon completion of this course, participants will be able to:

  • Build rich client applications for platforms from desktop to mobile
Introduction
What is Angular 2?
Angular2 vs Angular
Scope and Goal of Angular 2
Architecture (Big Picture/Concepts)
Setting Up Your Environment
A basic Angular 2 Application

TypeScript Introduction
Programming Languages for Angular2
How TypeScript Works
Transpiling TypeScript
TypeScript Syntax
The Type System
Classes
Interfaces
Arrow Functions
Modules
Generics

Components
What is a component?
Angular Modules
Developing a simple component
HTML Templates
Models
Nesting components

Data Binding
Unidirectional Data Flow
Binding Syntax
Template Expressions
One-Way Binding
Event Binding
Template Statements
Two-Way Binding

Directives
What is a Directive?
Kinds of Directives
Attribute Directives
Setting Attributes Dynamically
Structural Directives
Adding and Removing Elements Dynamically

Service and Dependency Injection
What is a Service?
Service Example
What is Dependency Injection
Why do I Need Dependency Injection
Registering a Service
Injecting a Service
@Injectable Classes
Multiple Service Instances
@Optional and @Host Decorators

HTTP
The Angular2 HTTP Client
Setting Up the Root Component
Http Client Using Promises
Observables and Reactive Programming
Http Client in Using Observables
Enhancing Services with .map() and .catch()
Cross-origin HTTP Requests

Unit and Integration Testing
Setting Up the Test Environment
Mocks, Fakes, and Spies
Parts of an Angular2 Unit Test
Testing a Simple Component
Components with Inputs and Outputs
Component with Service
Testing a Service in Isolation

Forms
Template-Driven Forms
Binding Input Fields
Accessing the Form Object
Binding the Submit Event
HTML5 Validation
Additional Input Types

Form Validation
Angular Validation
Defining Validation Directives
Tracking Change State of Form Controls
Displaying Validation State
Disabling Submit When Invalid

Routing
Routing and Navigation
Component Router
Router Terminology
Router Setup
Programmatic Navigation
Passing Data While Navigating
Using Route Parameter Values

Pipes
What are Pipes?
Using Pipes
Built-in Pipes
Pipe Syntax
Chaining pipes

Appendix A: Application Setup
npm Dependencies
TypeScript configuration
SystemJS/Webpack configuration
App Component
Create an App Module
Entry Point (main.ts) and Bootstrapping
html
Build and run the app
Other
Using a seed or boilerplate
Send Us a Message
Choose one