Developing Web Applications Using Angular (Canada) Seminar

Presented by Hands-On Technology Transfer

Hands On Technology Transfer Computer Training

Bring this seminar on-site to your facility for groups of 10 or more.

This hands on programming course provides a thorough introduction to the Angular JavaScript Framework including coverage of versions 2 through 5

Course Description

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 applications with Karma and Jasmine
Using property binding to link DOM elements with model data
Building Single Page Applications using Angular
Integrating forms with Angular
Organizing code using modules
Communicating with RESTful Web services

Course Description

This course introduces Angular versions 2 through 5. Students interested in Angular 1.x should take the Developing Web Applications Using AngularJS course instead.

This hands on programming course provides a thorough introduction to the Angular JavaScript Framework including coverage of versions 2 through 5. Attendees will learn the fundamental skills necessary to build Web Applications using Angular 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 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 Website Development with HTML5, CSS and Bootstrap and JavaScript Programming courses. Knowledge of jQuery is helpful, but not required.

Course Overview

Overview of Angular and the MVVM Design Pattern Features and Benefits of Angular Angular Architecture MVVM Design Pattern Overview Downloading Angular Referencing Angular Using a CDN Choosing an IDE Creating a Simple Application with Angular	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 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 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 Built-In Directives NgIf, NgFor, NgClass, NgStyle, NgSwitch, etc. Building Custom Directives Overview of Angular 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 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 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
Bootstrapping Using Modules to Create an Application Bootstrapping and Application with Dependencies Exporting Classes, Functions and Values Best Practices	Forms 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 SPAs When Not to Use SPA Architecture	Unit Testing and TDD with Angular TDD vs End-to-End Testing Jasmine Testing Framework Defining Expectations Running Tests in Karma Using the Angular Unit Test Framework Fulfilling Dependencies Mocking Out Data Creating"

More Seminar Information

Hands-On Technology Transfer
Summary	This hands on programming course provides a thorough introduction to the Angular JavaScript Framework including coverage of versions 2 through 5
Delivery Method	Seminar
Also Available As	On-Site Training
Who Should Attend	Beginner to Intermediate Angular programmers