Introduction to Angular 2

Code: ANG-JS-156

3 days

List Tuition : $1,595.00 USD

Course Overview

    Download PDF 

Introduction to Angular 2 training teaches developers how to use the newest version of Angular to facilitate development of rich application experiences that are responsive and functional across a full range of platforms, from desktop to phone.

Most courses are delivered as private, customized, on-site training at our clients' locations worldwide for groups of 3 or more attendees and are custom tailored to their specific needs. These courses can also be delivered as live, private online classes for groups that are geographically dispersed or wish to save on the instructor's or students' travel expenses. To receive a customized proposal and price quote for private training at your site or online, please contact us.

View our Angular page for details on All Angular Trainings

Developers looking to learn how to use Angular to facilitate development of rich application experiences that are responsive and functional across a full range of platforms, from desktop to phone.

All students will:

  • Understand the Angular architecture
  • Use npm as a Build Tool
  • Work with TypeScript and ES6/ES2015
  • Develop Angular Components
  • Use directives and work with data binding
  • Work with Services and Dependency Injection
  • Create and validate forms
  • Use HTTP with Observables and Promises
  • Create a single-page application using Routing
  • Format data using Pipes
  • Setup a project
  • Introduction
    • Why Angular 2?
    • Scope and Goal of Angular 2
    • Who Uses Angular?
    • Architecture (Big Picture/Concepts)
      • Model-View Patterns Reviewed
      • Single-page Application vs Traditional Web Application Architectures
    • Browser Support
    • Overview of Setup/Installation
    • Our first Angular 2 Application
  • npm QuickStart
    • Installing Dependencies
      • global installs
      • local installs
      • json
      • sharing dependencies
      • updating/uninstalling dependencies
    • Using npm as a Build Tool
      • What about Grunt and Gulp?
      • Your First Script
      • Shortcut Scripts
      • Running Local Node Modules
      • Combining Scripts
  • TypeScript and ES6/ES2015 Introduction
    • Understanding TypeScript and ES6/ES2015
    • How TypeScript Works
    • Why TypeScript?
    • Who’s Behind TypeScript?
    • Installing TypeScript
    • Configuring TypeScript
    • Compiling with TypeScript
    • JavaScript is valid TypeScript
    • ES2015
      • Classes
      • Arrow Functions
      • Template Literals
      • Modules
    • TypeScript
      • Type annotations
      • Interfaces
      • Decorators
      • Automatic Property Assignment
  • Components
    • What is a component?
    • Developing a simple component
    • Angular Modules
    • Bootstrapping
    • Nesting components
    • Templates
      • Multi-line
      • External
      • Component-relative paths
    • Models
      • Models are just classes
      • Importing
  • Data Binding
    • What is Data Binding?
      • one way (model to view)
      • two way (view to model)
    • Data Binding in Angular
      • Syntax
      • Component to DOM (one way)
      • DOM to Component (two way)
    • Types
      • Interpolation
      • Property Binding
      • Event Binding
      • Two Way Data Binding
      • Html Attribute vs. DOM Properties
      • Setting Html Attributes
  • Directives
    • What is a Directive?
    • Kinds of Directives
      • Component
      • Structural
      • Attribute
    • Structural Directives
      • Understand how ngIf works
      • Using ngFor
      • ngSwitch
    • Attribute Directives
      • ngClass
      • ngStyle
  • Service and Dependency Injection
    • What is a Service?
    • Service Example
    • Dependency Injection Explained
    • Dependency Injection Example
    • Dependency Injection in Angular
    • Registering a Service
    • Injecting a Service
    • Application Wide Dependency Injection
    • @Injectable Classes
    • Multiple Service Instances
    • @Optional and @Host Decorators
    • Providers
      • Syntax
      • Alternative/Aliased
      • Class, Value, and Factory
  • Advanced Components
    • Lifecycle Hooks
    • Composing Your User Interface
    • Component Communication
      • @Input
      • @Output and EventEmitters
  • Component Styles
    • Metadata: styles and styleUrls
    • View Encapsulation
    • Style Scoping with Special Selectors
  • Forms
    • Benefits of Angular 2 Forms
    • New Forms API
    • Form Strategies
      • Template-driven
      • Model-driven
      • Pros and Cons
    • Form Directives: Template-driven
      • ngForm
      • ngModel
      • ngModelGroup
      • ngSubmit
    • Getting Data from Form Controls
      • Local Template Reference Variables
    • Binding to HTML Form Elements
      • Select
      • Checkbox
  • Form Validation
    • Validation Directives
    • Tracking Change State of Form Controls
    • CSS Classes
    • Validation Messages
    • Validation Styles
  • Data Architectures
    • Model-View-Controller (MVC): Traditional Web Applications
    • Model-View-Whatever (MVW/MV*): Angular 1
    • New Architectures
      • Observables and Reactive Programming
      • Flux
    • Flexible Data Architecture in Angular 2
  • HTTP
    • Setup
      • Providing the HTTP Services
      • Enable RxJS Operators
    • Http in Services using Promises
      • Fetching Data
      • Handling the Response
      • Handling Errors
    • Http in Components using Promises
      • Fetching Data
      • Handling the Response
      • Handling Errors
    • Observables and Reactive Programming
      • The Reactive Extensions for JavaScript (RxJS)
      • Big Ideas About Streams
    • Http in Services using Observables
    • Http in Components using Observables
    • Async Pipe
    • In-Memory Web API
    • Http Put
    • Http Delete
    • Cross-origin HTTP Requests
  • Routing
    • Component Router
    • Router Terminology
    • Router Setup
    • Location Strategies
      • PathLocationStategy
      • HashLocationStrategy
    • Router Directives
      • routerLink
      • routerLinkActive
      • routerOutlet
    • Navigating
      • Creating a Link
      • Navigating with Code (Router)
      • Route parameters
      • Query parameters
      • Retrieving Parameters
        • ActivatedRoute
        • Synchronous
        • Asynchronous
    • Web Server Configuration
  • Pipes
    • What are Pipes?
    • Using Pipes
      • In Templates
      • In Code
    • Built-in Pipes
      • Date, Number, Decimal, Currency, UpperCase and LowerCase
    • Pipe Syntax
      • Passing parameters to a pipe
    • Chaining pipes
    • Changes from Angular 1 (deprecated pipes)
  • Project Setup
    • npm Dependencies
    • TypeScript configuration
    • SystemJS/Webpack configuration
    • App Component
    • Create an App Module
    • Entry Point (main.ts) and Bootstrapping
    • html
      • scripts to include
    • Build and run the app
    • Other
      • SASS
      • Bootstrap, SemanticUI, Material Design
    • Using a seed or boilerplate
  • Conclusion
  • All attendees must have substantial prior experience developing with JavaScript. If attendees will not have prior JavaScript experience, we would be delighted to precede this class with a one- or two-day intensive JavaScript primer.

    Request a Discounted Quote




    Bring Training to You

    Request schedule for this course

    Request a Quote for this Class

    We provide government and government contractor discounts, please request a quote

    Schedule



    total option: 0

    Hotel and Travel can be included on your quote.
    For immediate response, you can call 1-855-515-2170 or we will provide a quote within 4 business hours. Travel must be booked 14 days before training for rate to apply.

    Learn How to Become a Managed Learning Member

    Request a Quote

    Thank you for requesting a quote, we will be in touch shortly with a quote. If you need immediate assistance, please call 855-515-2170.

    Request Other Date

    Request date or location you need

    Don’t see the date or location you need? Contact us and let us know, we are adding dates and locations daily.