Call us at 1-800-413-0939

Angular 2 Programming

Over 100 metro locations. Attend face-to-face, remotely or on site at your facility.

Travel Packages Remote Attendance

Developing Web Applications Using Angular 2

Duration: 5 Days

Price: $2595 *California residents and government employees call for pricing.

Remote Attendance: Click here for more information.

Students Will Learn:

  • Using TypeScript and ECMAScript 6 to create components
  • Using directives and components to define UI elements, routes and screens
  • Working effectively with component lifecycle events
  • Injecting dependencies to lessen coupling and increase testability
  • Unit testing Angular 2 applications with Karma and Jasmin
  • Using property binding to link DOM elements with model data
  • Building Single Page Applications using Angular 2
  • Integrating forms with Angular 2
  • Organizing code using modules
  • Communicating with RESTful Web services

Course Description: This hands on programming course provides a thorough introduction to the second major release of the AngularJS JavaScript Framework, Angular 2. Attendees will learn the fundamental skills necessary to build Web Applications using Angular 2 and the MVVM (Model-View-ViewModel) design pattern. Topics include using TypeScript and ECMAScript 6 to create components, using directives and components to define UI elements, routes and screens, applying dependency injection, designing views/templates, routing, data binding and pipes, applying directives, as well as form integration and validation. Students will also use the Angular 2 services to communicate with RESTful web services and provide CRUD database operations.

Comprehensive hands on exercises are integrated throughout to reinforce learning and develop real competency.

Course Prerequisites: Knowledge of HTML, CSS and JavaScript equivalent to attending the Web Site Development with HTML5/JavaScript course. Knowledge of jQuery is helpful, but not required.

Overview of Angular 2 and the MVVM Design Pattern
  • Features and Benefits of Angular 2
  • Angular 2 Architecture
  • MVVM Design Pattern Overview
  • Downloading Angular 2
  • Referencing Angular 2 Using a CDN
  • Choosing an IDE
  • Creating a Simple Application with Angular 2
Working with TypeScript
  • TypeScript vs ECMAScript 6
  • TypeScript Basics
  • Types
    • Working with Built-In Types
    • Custom Types
  • Utilities
    • Using Fat Arrow Syntax
    • Template Strings
  • Setting Up and Using Node.js
  • Transpiling TypeScript into JavaScript
  • TypeScript Compiler Configuration
  • TypeScript Declaration Files
  • Installing Typings Files
Angular 2 Modules
  • Using Modules to Create an Application
  • Default Modules
  • Exporting Classes, Functions and Values
  • Limiting Scope
  • Grouping Modules
  • Specifying Module Dependencies
  • Organizing Code Files
  • Module Testing
  • Best Practices
Angular 2 Components
  • Component LifeCycle
  • Component Templates to Define Views
  • Using Decorators to Define MetaData
  • Component Styles
  • Encapsulation
    • ShadowDOM Style Encapsulation
    • View Style Encapsulation
    • No Encapsulation
  • ElementRef and Popups
  • ExportAs
  • Lifecycle Hooks
    • OnInit, OnDestroy, OnChanges, DoCheck
    • AfterContentInit, AfterViewInit
    • AfterContentChecked, AfterViewChecked
  • Change Detection
  • Basic Data Binding
    • One-Way Binding
    • Two-Way Binding
  • Directives
Using Built-In Directives and Filters
  • Overview of Angular 2 Built-In Directives
    • NgIf, NgFor, NgClass, NgStyle, NgSwitch, etc.
  • Building Custom Directives
  • Overview of Angular 2 Built-In Filters
    • Currency, Date, Json, LimitTo, Number, etc.
  • Building Custom Filters
Working with Pipes
  • Built-In Pipes
  • Custom Pipes
  • Adding and Using Parameters
  • Using a Pipe in a Component
  • Data Pipes
Defining and Consuming Services
  • Dependency Injection
  • Registering Providers with the Injector
  • Creating a Service
  • Consuming a Service
  • Mocking a Service
  • Working with Async Services and Promises
The Angular 2 Animation System
  • The Web Animations API
  • States and Transitions
  • Entering and Leaving
  • Animating Properties
  • KeyFrames
  • Parallel Animation Groups
The HTTP Library
  • Callbacks, Promises and Observables
  • Importing the HTTP Module
  • Creating Requests
  • Processing Responses
  • Web API
  • Interacting with a RESTFul Service
    • POST Requests
    • DELETE Requests
    • PUT Requests
    • HEAD Requests
Angular 2 Routing and Navigation
  • Overview of Routing
  • Client-Side vs Server-Side Routing
  • Working with the Component Router
  • Adding Router Imports
  • Performing Router Configuration
  • Using Router State
  • Redirects
  • Location Strategies
  • Routing Parameters
  • Router Lifecycle Events
  • Nesting Routes
Data Binding and Programming Models
  • Interpolation
  • One-Way (Unidirectional) Binding
  • Two-Way Binding
  • Event Binding
  • Observables vs. Promises
  • Working with Observables
  • Dealing with Out of Order Responses
  • Altering Observables with Reactive Extensions (Rx)
  • Reactive Programming Model
  • Organizing Code Using Domain Models
Building and Deploying Applications
  • Developing a Deployment Strategy
  • Picking a Package Manager
  • Using a Module Loader
  • Angular CLI
  • Using Gulp for More Complex Builds
    • Adding Gulp to a Project
  • Managing Dependencies
  • Using Sourcemaps
  • Including Static Libraries and Files
  • Transpiling
  • Linting
  • Handling Static Files
  • Dealing with Internationalization Issues
  • Using Modules to Create an Application
  • Bootstraping and Application with Dependencies
  • Exporting Classes, Functions and Values
  • Best Practices
  • Template Driven Forms
    • Input and Output Properies
    • Property and Event Binding
    • Interpolation
  • Form Components
  • Using Control and ControlGroup
  • Using the FormBuilder Factory
  • Form State
  • Form Validation
  • NgModel and NgForm Directives
  • Model Driven Forms
  • FormGroup and FormControl Classes
Creating Single Page Applications (SPAs)
  • SPA Characteristics and Advantages
  • SPA Potential Drawbacks
  • Structuring Templates in an SPA
  • Security Challenges and Approaches for Angular 2 SPAs
  • When Not to Use SPA Architecture
Unit Testing and TDD with Angular 2
  • TDD vs End-to-End Testing
  • Jasmine Testing Framework
    • Defining Expectations
  • Running Tests in Karma
  • Using the Angular 2 Unit Test Framework
    • Fulfilling Dependencies
    • Mocking Out Data
    • Creating Testing Fixtures
  • Testing Services and HTTP
  • Using Test-Doubles (Mocks, Stubs and Spies)
  • Testing Components
  • Testing Forms
  • Course materials include student guide, hands-on lab manual and USB flash drive for examples and lab work
  • Students receive a certificate of completion at the end of class
  • Students can retake any portion of a class that has been completed, within 12 months at no extra cost
  • There are no registration fees or cancellation fees

Individual training passes: save up to 43%! For complete discount options » click here «

# Courses Total Cost Cost Per Course % Savings
2 $4,090 $2,045 22%
3 $5,490 $1,830 30%
4 $6,690 $1,672 36%
5 $7,790 $1,558 40%
6 $8,890 $1,482 43%

Multiple Training Locations - Convenience and Cost Control

Attend Regularly Scheduled Courses in More than 100 Cities Across North America and the United Kingdom or via Remote Attendance