Private Introduction to Angular Programming Training

See Course Outline

Training for your Team

3
Days
  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors
Overview

In this 3-day Introduction to Angular Programming Using Angular 4 training class, students will get started using Angular 4, which Google released officially in March 2017.

Goals
  1. Understand the Angular architecture.
  2. Use node.js’ package ecosystem npm.
  3. Work with TypeScript and ES6/ES2015.
  4. Develop Angular components.
  5. Use directives and work with data binding.
  6. Work with services and dependency Injection.
  7. Create and validate forms.
  8. Use HTTP with pbservables.
  9. Create a single-page application using Routing.
  10. Format data using Pipes.
  11. Set up a project from scratch.
  12. Organize and load your code when needed using Angular modules.
Outline
  1. Introduction
    1. Why Angular?
    2. Angular Versions: Understanding the differences between AngularJS (Angular 1), Angular 2.x, Angular 4, and Angular
    3. Scope and Goal of Angular
    4. Who Uses Angular?
    5. Angular 4 changes
      1. View Engine generates smaller code
      2. Enhanced *ngIf syntax
      3. Animation code now in own packages
      4. TypeScript 2.1
      5. Improved compiler speed
      6. Compliant with StrictNullChecks
      7. Universal
      8. Flat ESModules
    6. Architecture (Big Picture/Concepts)
    7. Model-View Patterns Reviewed
      1. Single-page Application vs Traditional Web Application Architectures
      2. Browser Support
    8. Overview of Setup/Installation
    9. Our first Angular Application
  2. 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
  3. 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
  4. 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: [(ngModel)] Banana in a Box
    6. Html Attribute vs. DOM Properties
    7. Setting Html Attributes
  5. Directives
    1. What is a Directive?
    2. Kinds of Directives
      1. Component
      2. Structural
      3. Attribute
    3. Structural Directives
      1. Understand how ngIf works and the improved Angular 4 syntax options
      2. Using the <template> tag
      3. Removing vs Hiding Directives
      4. Using ngFor
      5. ngSwitch
    4. Attribute Directives
      1. ngClass
      2. ngStyle
  6. 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
  7. Intermediate Components
    1. Lifecycle Hooks
    2. Composing Your User Interface
    3. Component Communication
    4. @Input
    5. @Output and EventEmitters
    6. Component Styles
    7. Metadata: styles and styleUrls
    8. View Encapsulation
  8. Forms
    1. Benefits of AngularForms
    2. Form Strategies
      1. Template-driven
      2. Model-driven
      3. Pros and Cons
    3. Form Directives: Template-driven
      1. ngForm
      2. ngModel
      3. ngModelGroup
      4. ngSubmit
    4. Getting Data from Form Controls
      1. Local Template Reference Variables
  9. Form Validation
    1. Validation Directives
    2. Tracking Change State of Form Controls
    3. CSS Classes
    4. Validation Messages
    5. Validation Styles
  10. Data Architectures
    1. Traditional
      1. Model-View-Controller (MVC): Traditional Web Applications
      2. Model-View-Whatever (MVW/MV*): AngularJS
    2. New Architectures
      1. Observables and Reactive Programming
      2. Flux
    3. Flexible Data Architecture in Angular
  11. HTTP
    1. Setup
    2. Importing
    3. Enable RxJS Operators
    4. Http in Services using Promises
    5. Fetching Data
    6. Handling the Response
    7. Handling Errors
    8. Http in Components using Promises
    9. Fetching Data
    10. Handling the Response
    11. Handling Errors
    12. Observables and Reactive Programming
    13. The Reactive Extensions for JavaScript (RxJS)
    14. Big Ideas About Streams
    15. Http in Services using Observables
    16. Http in Components using Observables
    17. Async Pipe
    18. Http Put
    19. Http Delete
    20. Cross-origin HTTP Requests
  12. Routing
    1. Component Router Overview
    2. Router Terminology
    3. Router Setup
    4. Router Directives
      1. routerLink
      2. routerLinkActive
      3. routerOutlet
    5. Your First Routes
    6. Organize Routes using Modules
    7. Navigating
      1. Creating a Link
      2. Navigating with Code (Router)
      3. Route parameters
      4. Query parameters
      5. Retrieving Parameters (ActivedRoute)
  13. 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 AngularJS (deprecated pipes)
  14. Project Setup
    1. Defining npm Dependencies
    2. TypeScript configuration
    3. SystemJS configuration
    4. Build and run the app
  15. 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
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
Follow-on Courses

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

91,059

Students who have taken Live Online Training

16,075

Organizations who trust Webucator for their training needs

100%

Satisfaction guarantee and retake option

9.44

Students rated our trainers 9.44 out of 10 based on 5097 reviews

I had a great experience, and this a great way to move quickly through a large amount of data and how-to instruction.

Lenny Morales, St. Francis
Houston TX

I learn better in a real classroom environment. However, my Webucator learning experience was even better than a real classroom environment.

Tingan Weng, Solano Community College
Fairfield CA

The instructor was willing to help with specific problems we were having. The class was just what we needed to take our code to the next level.

Brad Lanning, Seagate Technology
Longmont CO

My first experience with Webucator was outstanding! I learned a LOT in just one class! I will be back for more!

kimberly donnelly, habitat for humanity of oakland county
pontiac MI

Contact Us or call 1-877-932-8228