Introduction to Angular 2 Programming Training

Customized Onsite Training

3
Days
  • Customized Content
  • For Groups of 5+
  • Online or On-location
  • Expert Instructors

Live Online Training

$1,575.00
or 3 vouchers
  • Expert Instructors
  • Guaranteed to Run
  • 100% Free Re-take Option
  • 1-minute Video

Upcoming Classes

  • See More Classes

Please select a class.
Overview

This Introduction to Angular 2 training class covers everything you need to know to get started with this next generation of the Angular framework. Angular 2 makes the creation of single-page applications even easier that before. In this course developers will learn to use Angular 2 Directives and to create Angular 2 Components and Services to develop applications based on the Model-View-Controller (MVC) architecture. You will learn to use HTML Templates to define views and to connect views with code using output, two-way, event and property bindings. The course reviews the benefits and challenges of Single Page Applications and how to overcome those challenges using the Angular 2 Router. The course also covers everything you need to know about Typescript - a programming language based on JavaScript that is used to create Angular 2 applications.

Goals
  1. Create single-page web applications using the MVC pattern of Angular 2.
  2. Understand how write and organize Angular 2 code.
  3. Program Angular 2 View Components and Services.
  4. Use Angular 2 output, two-way, event and property bindings.
  5. Exchange data with network servers using the Angular 2 HTTP Client.
  6. Work with Angular 2 Pipes to format data.
  7. Create and work with Angular 2 Forms.
  8. Angular 2 Component Router.
Outline
  1. Introducing Angular 2
    1. What is Angular 2?
    2. Central Features of the Angular Framework
    3. Why Angular?
    4. Scope and Goal of Angular
    5. Angular 2 vs. AngularJS
    6. Installing and Using Angular 2
    7. Adding Angular 2 and Dependencies to Your App
    8. Building Blocks of and Angular 2 Application
    9. A Basic Angular 2 Application
    10. Basic App - index.html - 1/2
    11. Basic App - index.html - 2/2
    12. Basic-App: Application Module File
    13. Basic-App: Main Bootstrap File
    14. Basic-App: The Component File - 1/2
    15. Basic-App: The Component File - 2/2
    16. Summary
  2. Introduction to TypeScript and ES6
    1. Programming Languages for Use with Angular
    2. TypeScript Syntax
    3. The Type System – Defining Variables
    4. The Type System – Defining Arrays
    5. The Type System – Classes & Objects
    6. Class Constructors
    7. Class Constructors – Alternate Form
    8. Interfaces
    9. Parameter and Return Value Types
    10. Working with Modules
    11. TypeScript Transpilation
    12. Arrow Functions
    13. Template Strings
    14. Template Strings – Variables and Expressions
    15. Template Strings – Multiline
    16. Generics - Class
    17. Generics - Methods
    18. Generics - Restricting Types
    19. Generics - Restricting Types: Example
    20. Summary
  3. Components in Angular 2
    1. What is a Component?
    2. An Example Component
    3. Component Starter
    4. Developing a Simple Login Component
    5. Login Component: Add HTML
    6. The HTML Component Template
    7. The templateUrl property
    8. Login Component: Add CSS Styling
    9. Login Component: Hook Up Input Fields and Button
    10. Login Component: Fields & Button in the Component Class
    11. Component Decorator Properties
    12. Component Lifecycle Hooks
    13. Using a Lifecycle Hook: OnInit
    14. Summary
  4. Data and Event Binding
    1. Binding Syntax
    2. One-Way Output Binding
    3. Binding Displayed Output Values
    4. Two-Way Binding of Input Fields
    5. Input Binding Examples
    6. Binding Events
    7. Binding Events Examples
    8. Setting Element Properties
    9. Setting Properties: Examples
    10. Summary
  5. Attribute Directives and Property Bindings
    1. What are Directives
    2. Directive Types
    3. Apply Styles by Changing Classes
    4. Changing Classes – Example
    5. Applying Styles Directly
    6. Applying Styles Directly - Example
    7. Obsolete Directives and Property Binding
    8. Controlling Element Visibility
    9. Setting Image Source Dynamically
    10. Setting Hyperlink Source Dynamically
    11. Summary
  6. Structural Directives
    1. Structural Directives
    2. Adding and Removing Elements Dynamically
    3. Looping Using ngFor
    4. ngFor - Basic Syntax
    5. ngFor - Full Template Syntax
    6. Creating Tables with ngFor
    7. ngFor Local Variables
    8. ngFor Changes in the backing data source
    9. Swapping Elements with ngSwitch
    10. ngSwitch - Basic Syntax
    11. ngSwitch - Full Template Syntax
    12. Summary
  7. Template Driven Forms
    1. Template Driven Forms
    2. Importing Forms Module
    3. A Basic Angular Form
    4. Binding Input Fields
    5. Accessing the Form Object
    6. Binding the Form Submit Event
    7. The Submit Function
    8. Basic HTML5 Validation - "required" Attribute
    9. HTML5 vs. Angular Validation
    10. Angular Validators
    11. Angular Validation State
    12. Displaying Form Validation State
    13. Displaying Field Validation State
    14. Displaying Validation State Using Classes
    15. Disabling Submit when Form is Invalid
    16. Submitting the Form
    17. Binding to Object Variables
    18. Additional Input Types
    19. Checkboxes
    20. Select (Drop Down) Fields
    21. Rendering Options for Select (Drop Down)
    22. Date fields
    23. Radio Buttons
    24. Summary
  8. Services and Dependency Injection
    1. What is a Service?
    2. Creating a Basic Service
    3. What is Dependency Injection?
    4. What Dependency Injection Looks Like
    5. Injecting Services
    6. Using a Service in a Component: Dedicated Instance
    7. Using a Service in a Component: Dedicated Instance - Example Code
    8. Using onInit to Initialize Component Data
    9. Using a Shared Service Instance
    10. Dependency Injection and @Host
    11. Dependency Injection and @Optional
    12. Summary
  9. HTTP Client
    1. The Angular HTTP Client
    2. Using The HTTP Client - Overview
    3. Importing HttpModule
    4. Importing Individual Providers into Services
    5. Service Using Http Client
    6. Service Imports
    7. The Observable object type
    8. What does an Observable Object do?
    9. Making a Basic HTTP GET Call
    10. Using the Service in a Component
    11. The PeopleService Client Component
    12. Client Component Code Review
    13. Importing Observable Methods
    14. Enhancing the Service with .map() and .catch()
    15. Using .map()
    16. Using .catch()
    17. Using toPromise()
    18. GET Request
    19. GET Request with Options
    20. POST Request
    21. POST Request Example
    22. Reading HTTP Response Headers
    23. Summary
  10. Pipes and Data Formatting
    1. What are Pipes?
    2. More on Pipes
    3. Formatting Changes in Angular 2
    4. Using a Built-in Pipe
    5. Built-In Pipes
    6. Using Pipes in HTML
    7. Chaining Pipes
    8. Using Pipes in JavaScript
    9. Some Pipe Examples
    10. Decimal Pipe
    11. CurrencyPipe
    12. Custom Pipes
    13. Custom Pipe Example
    14. Using Custom Pipes
    15. A Filter Pipe
    16. A Sort Pipe
    17. Pipe Category: Pure and Impure
    18. Pure Pipe Example
    19. Impure Pipe Example
    20. Summary
  11. Introduction to Single Page Applications
    1. What is a Single Page Application (SPA)
    2. SPA Workflow
    3. Traditional Web Application Capabilities
    4. Single Page Application Advantages
    5. SPA and Traditional Web Sites
    6. SPA Challanges
    7. Implementing SPA's Using Angular 2
    8. Simple SPA Using Visibility Control
    9. SPA Using Angular Components
    10. SPA with Angular Components - Switching
    11. SPA with Angular Components - The Displayed Component
    12. Implement SPA Using an Angular Component Router
    13. Summary
  12. The Angular Component Router
    1. Routing and Navigation
    2. The Component Router
    3. Traditional Browser Navigation
    4. Component Router Terminology
    5. Setting up the Component Router
    6. Local URL Links
    7. Browser pushState and
    8. Routes
    9. The app.routes.ts File
    10. The app.routes.ts File - Example
    11. Importing Routing in app.module.ts
    12. A Basic App With Routing
    13. App Routes
    14. AppComponent - Code
    15. AppComponent - Router Related Features
    16. AppComponent -
    17. AppComponent - precompile array
    18. AppComponent - routerLinks
    19. Programmatic Navigation
    20. Basic Navigation
    21. Passing Data During Navigation
    22. Creating Routes with Route Parameters
    23. Navigating with Route Parameters
    24. Using Route Parameter Values
    25. Retrieving the Route Parameter Synchronously
    26. Retrieving a Route Parameter Asynchronously
    27. Query Parameters
    28. Query Parameters - Example Component
    29. Query Parameters - queryParams
    30. Query Parameters - Navigation
    31. Retrieving Query Parameters Asynchronously
    32. Problems with Manual URL entry and Bookmarking
    33. Fixing Manual URL entry and Bookmarking
    34. Summary
  13. Introduction to Node.js
    1. What is Node.js?
    2. Application of Node.js
    3. Installing Node.js and NPM
    4. "Hello, Node World!"
    5. How it Works
    6. Built on JavaScript – benefits
    7. Traditional Server-Side I/O Model
    8. Disadvantages of the traditional Approach
    9. Event-Driven, Non-Blocking I/O
    10. Concurrency
    11. Using Node Package Manager (NPM)
    12. Express
    13. Summary
  14. Module and Dependency Management
    1. Nature of a Node.js Project
    2. Introduction to Modules
    3. A Simple Module
    4. Using the Module
    5. Directory Based Modules
    6. Example Directory Based Module
    7. Using the Module
    8. Making a Module Executable
    9. Core Modules
    10. Loading Module from node_modules Folders
    11. Dependency Management Using NPM
    12. Installing a Package
    13. About Global Installation
    14. Setting Up Dependency
    15. Package Version Numbering Syntax
    16. Updating Packages
    17. Uninstalling Packages
    18. Alternate Dependency Management
    19. Summary
  15. Build and Dependency Management
    1. Introduction
    2. Bower Package Manager
    3. Managing Packages Using Bower
    4. Using Bower Packages
    5. Describing Dependency
    6. Grunt Build Manager
    7. Installing Grunt Components
    8. Writing a Grunt Build Script
    9. Running Grunt
    10. Running JSHint Task
    11. Compiling Less Files
    12. Compressing CSS Files
    13. Gulp Build Manager
    14. Gulp vs. Grunt
    15. Installing Gulp Components
    16. Writing a Build Script
    17. Running Gulp
    18. Compiling Less Files
    19. Summary
Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this Angular class:

  • Prior understanding of web development using HTML, CSS, and JavaScript. Experience developing with AngularJS (the prior version) is not required.
Preparing for Class
Follow-on Courses

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

78,767

Students who have taken Live Online Training

15,460

Organizations who trust Webucator for their training needs

100%

Satisfaction guarantee and retake option

9.39

Students rated our trainers 9.39 out of 10 based on 5,157 reviews

The training was a perfect blend of being challenging and informative. I was excited to learn through application beyond just text book reading.

Carla Carrell, Comcast

Course was quite educational with a lot of detailed information about SSRS application.

Shefali Pravasi, Bonfils Blood Center
Denver CO

The instructor was very patient and explained the lessons clearly.

Hang Vu, Promontory Interfinancial Network
Arlington VA

The pacing, the quality of the exercises and the overall subject matter was perfect for learning!

Robert Hinshaw, Merchante-solutions
Spokane WA

Contact Us or call 1-877-932-8228