Home About Courses Schedule Services Webinars Contact Search

Introduction to Angular 6

SEE SCHEDULE

Duration: 3 Days

Method: Instructor-Led, Hands On

Price: $1795.00

Course Code: AN1014



Description

During this course you will build applications with the user experience of a desktop application and the ease of deployment of a web application. Start from scratch by learning the basics of JavaScript package manager (npm), the language (TypeScript), and how to use all of the Angular tools.

Objectives

Upon successful completion of this course, the student will be able to:

  • Understand how single-page web application architectures are different than traditional web application architectures
  • Use new JavaScript (ES6) language features including Classes, Modules, and Arrow Functions
  • Use new TypeScript language features including Types, Decorators, Interfaces, and Generics
  • Learn Angular coding and architecture best practices including project layout and using container and presentation components
  • Understand and use Angular model-driven forms, observables, dependency injection, and routing
  • Communicate with a backend server using Angular’s HttpClient to load and save data
  • Configure the router and navigate between components

Prerequisites

All Angular training students must have substantial prior experience developing with JavaScript. If no JavaScript experience, a 1-2 day intensive JavaScript primer class should precede this class.

Topics

  1. Overview
    • Benefits of Building using Angular
    • Understanding Angular Versions
    • Single-page Web Application Architectures vs. Traditional Server-side Web Application Architectures
    • Angular Style Guide
    • Angular Architecture
    • What's New in Angular 6
    • Upgrading to Angular 6 from earlier versions of Angular
  2. TypeScript and ECMAScript 6 (ES6) Fundamentals
    • Classes
    • ES Modules
    • Arrow Functions
    • Template Literals
    • Scoping using let, var, and const Keywords
    • Spread Syntax and Rest Parameters
    • Destructuring
    • Static Type Annotations
    • Decorators
  3. Angular Basics
    • Components
    • Templates: Inline, Multi-line, and External with Component-relative Paths
    • Angular Modules (NgModule)
    • Angular Modules vs. ES Modules
  4. Data Binding
    • Interpolation
    • Property binding
    • Event binding
    • Two-way data binding
  5. Directives
    • Structural: ngFor, ngIf, ngSwitch
    • Attribute: ngClass, ngStyle
  6. Components
    • Component Lifecycle Hooks
    • Component Communication using @Input, @Output
    • Component Styles
  7. Services & Dependency Injection
    • Using a service to access data
    • Using a service to encapsulate business logic
    • Understanding the scope of services
  8. Dependency Injection
    • Understanding Dependency Injection
    • Angular’s Dependency Injection System
    • Registering
    • Injecting
    • Hierarchical Injection
  9. Model-driven Forms (Reactive Forms)
    • Importing the ReactiveFormsModule
    • FormControl, FormGroup, and AbstractControl
    • Binding DOM Elements to FormGroups and FormControls
    • Validation Rules, Messages, and Styles
    • Refactoring ReactiveForms for Reuse
    • Custom Validators
  10. Communicating with the Server using the HttpClient Service
    • Deciding between Promises or Observables (RxJS)
    • Making an HTTP GET Request
    • Sending data to the server using Http POST and PUT Requests
    • Issuing an Http DELETE Request
    • Intercepting Requests and Responses
    • WebSockets
  11. Router
    • Importing the RouterModule and Routes
    • Configuring Routes
    • Displaying Components using a RouterOutlet
    • Navigating declaratively with RouterLink
    • Navigating with code using the Router
    • Accessing parameters using ActivatedRoute
    • Organizing your code into Modules