Angular 2 Development

Key Information

Duration: 4 days

Course Learning Skills: TypeScript, Rich UI

Brief

Course Overview

This course takes a detailed look at Angular 2. We show how to create Rich Internet Applications incorporating powerful Angular features such as data binding, service dependency injection, routing, and REST / Web Sockets integration. Note that we also have a course that covers Angular 4, which is the latest version of the Angular library.

What You’ll Learn

• Angular architectural concepts
• Creating and testing Angular apps
• Templates
• Displaying data and accepting user input
• Dependency injection
• Pipes
• Directives
• Routing and navigation
• Lifecycle hooks
• Calling REST services
• Web sockets
• Angular CLI

Prerequisites

• Familiarity with HTML and JavaScript programming
• Experience in AngularJS 1.x is beneficial but not required

Course details

Angular 2 Essentials

• Angular 2 vs Angular 1
• Angular 2 architecture components
• Development tools state-of-play

TypeScript and ECMAScript 6 Essentials

• Overview of TypeScript and ECMAScript 6
• Transpilation
• Using the TypeScript Playground
• Configuring and using the TypeScript transpiler

Understanding TypeScript Syntax

• Variables and types
• Functions
• Classes
• Generics
• Inheritance
• Interfaces

Creating a Simple Angular 2 Application

• Structure of an Angular 2 application
• Importing Angular libraries
• Angular bundles
• Angular components
• Templates
• Binding expressions
• Bootstrapping Angular

Data Binding

• A closer look at data binding
• Two-way data binding
• Using built-in pipes
• Defining custom pipes
• Applying pipes programmatically
• Built-in structural directives

Configuration

• A closer look at SystemJS
• Loading multiple modules
• Configuring SystemJS
• Using a package manager

Tooling

• Overview of Node Package Manager, Bower, Grunt, and Gulp
• Using Bower to manage client packages
• Defining static content
• Gulp tasks

Component Hierarchies

• Structuring applications
• Defining component inputs
• Defining component outputs
• The mediator pattern

Dependency Injection

• Overview of dependency injection in Angular
• Simple dependency injection
• Using the provide() function
• A hierarchy of injectors
• Global provision
• Injection into services
• Values and factories

Angular 2 Routing

• Getting started with routing
• The role of routing in Single Page Applications
• Route parameters
• Lazy loading

Calling Rest Web Services

• Overview of Rest services
• Calling Rest services from Angular 2
• Using the conditional navigation operator

Web Sockets

• Web Sockets concepts
• Calling Web Sockets from JavaScript
• Using RxJs Observables with Web Sockets

Testing Angular Code

• Setting the scene for unit testing
• Getting started with Jasmine
• Using Jasmine to test Angular code

Implementing Custom Directives

• Attribute directives
• Specifying parameters and events
• Structural directives
• Transclusion

Angular CLI

• Overview of Angular CLI
• Creating a template application
• Generating components, services, and other artefacts
• Bundling and tree-shaking

 

Book an Instructor Led Course

Do a short survey to tell us what you think about training?

Click here to take the survey, it’ll only take a few minutes!