Comprehensive Angular 2 Programming Training

Customized Onsite Training

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

In this Comprehensive Angular 2 Programming training class, students will learn to use Angular 2, which Google released officially in September 2016.

Goals
  1. Learn who uses Angular 2 and why.
  2. Learn about Angular 2's architecture and brewer support.
  3. Learn to get started and write your first script.
  4. Learn to work with TypeScript and components including advanced compontents.
  5. Learn to understand and work with data binding.
  6. Learn how to work with Pipes and what has changed since Angular 2.
  7. Learn the necessary pieces for project setup.
  8. Learn to learn about custom pipes.
  9. Learn to learn how to work with custom directives.
  10. Learn to learn unit testing including services, components, routes, and pipes.
  11. Learn to learn how to migrate from Angular 1 to Angular 2.
  12. Learn to learn Angular CLI.
  13. Learn to learn how to do testing.
Outline
  1. Introduction
    1. Why Angular 2?
    2. Scope and Goal of Angular 2
    3. Who Uses Angular?
    4. Architecture (Big Picture/Concepts)
      1. Model-View Patterns Reviewed
      2. Single-page Application vs Traditional Web Application Architectures
    5. Browser Support
    6. Overview of Setup/Installation
    7. Our first Angular 2 Application
  2. npm QuickStart
    1. Installing Dependencies
      1. global installs
      2. local installs
      3. package.json
      4. sharing dependencies
      5. updating/uninstalling dependencies
    2. Using npm as a Build Tool
    3. What about Grunt and Gulp?
    4. Your First Script
    5. Shortcut Scripts
    6. Running Local Node Modules
    7. Combining Scripts
  3. TypeScript and ES6/ES2015 Introduction
    1. Understanding TypeScript and ES6/ES2015
    2. How TypeScript Works
    3. Why TypeScript?
    4. Who’s Behind TypeScript?
    5. Installing TypeScript
    6. Configuring TypeScript
    7. Compiling with TypeScript
    8. JavaScript is valid TypeScript
    9. ES2015
      1. Classes
      2. Arrow Functions
      3. Template Literals
      4. Modules
    10. TypeScript
      1. Type annotations
      2. Interfaces
      3. Decorators
      4. Automatic Property Assignment
  4. Components
    1. What is a component?
    2. Developing a simple component
    3. Angular Modules
    4. Bootstrapping
    5. Nesting components
    6. Templates
      1. Multi-line
      2. External
      3. Component-relative paths
    7. Models
      1. Models are just classes
      2. Importing
  5. Data Binding
    1. What is Data Binding?
      1. one way (model to view)
      2. two way (view to model)
    2. Data Binding in Angular
      1. Syntax
      2. Component to DOM (one way)
      3. DOM to Component (two way)
    3. Types
      1. Interpolation
      2. Property Binding
      3. Event Binding
      4. Two Way Data Binding
    4. Longhand
    5. Shorthand
    6. [(ngModel)] Banana in a Box
      1. Html Attribute vs. DOM Properties
      2. Setting Html Attributes
  6. Directives
    1. What is a Directive?
    2. Kinds of Directives
      1. Component
      2. Structural
      3. Attribute
    3. Structural Directives
      1. Understand how ngIf works
    4. Using the <template> tag
    5. Removing vs Hiding Directives
      1. Using ngFor
      2. ngSwitch
    6. Attribute Directives
      1. ngClass
      2. ngStyle
  7. Service and Dependency Injection
    1. What is a Service?
    2. Service Example
    3. Dependency Injection Explained
    4. Dependency Injection Example
    5. Dependency Injection in Angular
    6. Registering a Service
    7. Injecting a Service
    8. Application Wide Dependency Injection
    9. @Injectable Classes
    10. Multiple Service Instances
    11. @Optional and @Host Decorators
    12. Providers
      1. Syntax
      2. Alternative/Aliased
      3. Class, Value, and Factory
  8. Advanced Components
    1. Lifecycle Hooks
    2. Composing Your User Interface
    3. Component Communication
      1. @Input
      2. @Output and EventEmitters
    4. Component Styles
      1. Metadata: styles and styleUrls
      2. View Encapsulation
      3. Style Scoping with Special Selectors
  9. Forms
    1. Benefits of Angular 2 Forms
    2. New Forms API
    3. Form Strategies
      1. Template-driven
      2. Model-driven
      3. Pros and Cons
    4. Form Directives: Template-driven
      1. ngForm
      2. ngModel
      3. ngModelGroup
      4. ngSubmit
    5. Getting Data from Form Controls
      1. Local Template Reference Variables
    6. Binding to HTML Form Elements
      1. Select
      2. Checkbox
  10. Form Validation
    1. Validation Directives
    2. Tracking Change State of Form Controls
    3. CSS Classes
    4. Validation Messages
    5. Validation Styles
  11. Data Architectures
    1. Model-View-Controller (MVC): Traditional Web Applications
    2. Model-View-Whatever (MVW/MV*): Angular 1
    3. New Architectures
      1. Observables and Reactive Programming
      2. Flux
    4. Flexible Data Architecture in Angular 2
  12. HTTP
    1. Setup
      1. Providing the HTTP Services
      2. Enable RxJS Operators
    2. Http in Services using Promises
      1. Fetching Data
      2. Handling the Response
      3. Handling Errors
    3. Http in Components using Promises
      1. Fetching Data
      2. Handling the Response
      3. Handling Errors
    4. Observables and Reactive Programming
      1. The Reactive Extensions for JavaScript (RxJS)
      2. Big Ideas About Streams
    5. Http in Services using Observables
    6. Http in Components using Observables
    7. Async Pipe
    8. In-Memory Web API
    9. Http Put
    10. Http Delete
    11. Cross-origin HTTP Requests
  13. Routing
    1. Component Router
    2. Router Terminology
    3. Router Setup
    4. Location Strategies
      1. PathLocationStategy
      2. HashLocationStrategy
    5. Router Directives
      1. routerLink
      2. routerLinkActive
      3. routerOutlet
    6. Navigating
      1. Creating a Link
      2. Navigating with Code (Router)
      3. Route parameters
      4. Query parameters
      5. Retrieving Parameters
    7. ActivatedRoute
    8. Synchronous
    9. Asynchronous
    10. Web Server Configuration
  14. Pipes
    1. What are Pipes?
    2. Using Pipes
      1. In Templates
      2. In Code
    3. Built-in Pipes
      1. Date, Number, Decimal, Currency, UpperCase and LowerCase
    4. Pipe Syntax
      1. Passing parameters to a pipe
    5. Chaining pipes
    6. Changes from Angular 1 (deprecated pipes)
  15. Project Setup
    1. npm Dependencies
    2. TypeScript configuration
    3. SystemJS/Webpack configuration
    4. App Component
    5. Create an App Module
    6. Entry Point (main.ts) and Bootstrapping
    7. index.html
      1. scripts to include
    8. Build and run the app
    9. Other
      1. SASS
      2. Bootstrap, SemanticUI, Material Design
    10. Using a seed or boilerplate
  16. Custom Pipes
    1. Custom Pipe Example
    2. Using a Custom Pipe
      1. In Templates
      2. In Code
    3. Pure and Impure Pipes
  17. Custom Directives
    1. Access the DOM Element using the ElementRef
    2. Respond to User Events using HostListener
    3. Pass Values via Data Binding
  18. Unit Testing
    1. Jasmine Setup
    2. Mocks, Stubs, and Spies
    3. Services
    4. Mocking HTTP Calls
    5. Components
    6. Routes
    7. Pipes
  19. Model-driven Forms
    1. Setup/Bootstrap
    2. Model
    3. Form Component
    4. Metadata
    5. Template
  20. Angular 1 to 2 Migration Strategies
    1. Preparation
      1. Following The Angular Style Guide
      2. Using a Module Loader
      3. Migrating to TypeScript
      4. Using Component Directives
    2. Upgrading with The Upgrade Adapter
      1. How The Upgrade Adapter Works
      2. Bootstrapping Hybrid Angular 1+2 Applications
      3. Using Angular 2 Components from Angular 1 Code
      4. Using Angular 1 Component Directives from Angular 2 Code
      5. Projecting Angular 1 Content into Angular 2 Components
      6. Transcluding Angular 2 Content into Angular 1 Component Directives
      7. Making Angular 1 Dependencies Injectable to Angular 2
      8. Making Angular 2 Dependencies Injectable to Angular 1
  21. Angular CLI
    1. Installation
    2. Usage
    3. Generating a New Project
    4. Generating Components, Directives, Pipes and Services
    5. Generating a Route
    6. Creating a Build
    7. Build Targets and Environment Files
    8. Bundling
  22. End-to-end Testing with Protractor
    1. Setup
    2. Demo
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.

Preparing for Class

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

74,839

Students who have taken Live Online Training

15,233

Organizations who trust Webucator for their training needs

100%

Satisfaction guarantee and retake option

9.41

Students rated our trainers 9.41 out of 10 based on 5,189 reviews

Contact Us or call 1-877-932-8228