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.
AngularJS is a development platform for building mobile and desktop web applications. Angular 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?
Angular vs AngularJS
Scope and Goal of Angular
Architecture (Big Picture/Concepts)
A basic Angular Application

TypeScript Introduction
Programming Languages for Angular
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

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

Angular CLI
Installation
Usage
Generating a New Project
Generating Components, Directives, Pipes and Services
Generating a Route
Creating a Build
Build Targets and Environment Files
Bundling

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

Pipes
What are Pipes?
Using Pipes
Built-in Pipes
Pipe Syntax
Chaining pipes
Creating a Custom Pipe
Pure vs Impure Pipes

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 Decorator
Multiple Service Instances
@Optional and @Host Decorators

HTTP
The Angular 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()

Template-Driven Forms and Validation
Template-Driven Forms
Binding Input Fields
Accessing the Form Object
Binding the Submit Event
HTML5 Validation
Angular Validation
Defining Validation Directives
Tracking Change State of Form Controls
Displaying Validation State
Disabling Submit When Invalid
Send Us a Message
Choose one