Home About Courses Schedule Services Webinars Contact Search

Comprehensive Angular

SEE SCHEDULE

Duration: 5.0 days

Method: Instructor-Led, Hands On

Price: $2950.00

Course Code: AN1016


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. Use those foundational skills to implement an Angular application using components, templates, services, routing, and tests. Along the way, best practices as well as the architecture and design of Angular applications will be taught.

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
  • Unit test all parts of an application including Components, Services, and Pipes
  • Understand RxJS and Observables and where they can be used
  • Implement Authentication and Authorization in an Angular Application
  • Optimize Angular Performance by changing Change Detection Strategies
  • Setup new projects from scratch using the Angular CLI
  • Scaffold modules, components, services, models, routes, and unit tests in accordance with best practices using the Angular CLI
  • Build and deploy an application to production using the Angular CLI
  • Write End-to-End Tests (optional; taught only if this applies to your group)
  • Upgrade an existing application from AngularJS to Angular 6 (optional if applicable)

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

  • I. 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
  • II. 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
  • III. Angular Basics
    • Components
    • Templates: Inline, Multi-line, and External with Component-relative Paths
    • Angular Modules (NgModule)
    • Angular Modules vs. ES Modules
  • IV. Data Binding
    • Interpolation
    • Property binding
    • Event binding
    • Two-way data binding
  • V. Directives
    • Structural: ngFor, ngIf, ngSwitch
    • Attribute: ngClass, ngStyle
  • VI. Components
    • Component Lifecycle Hooks
    • Component Communication using @Input, @Output
    • Component Styles
  • VII. Services & Dependency Injection
    • Using a service to access data
    • Using a service to encapsulate business logic
    • Understanding the scope of services
  • VIII. Dependency Injection
    • Understanding Dependency Injection
    • Angular’s Dependency Injection System
    • Registering
    • Injecting
    • Hierarchical Injection
  • IX. 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
  • X. 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
  • XI. 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
  • XII. Unit Testing
    • Tools: Jasmine, Karma
    • Jasmine Syntax: describe, it, beforeEach, afterEach, matchers
    • Setup and your First Test
    • Testing Terminology: Mock, Stub, Spy, Fakes
    • Angular Testing Terminology: TestBed, ComponentFixture, debugElement, async, fakeAsync, tick, inject
    • Simple Component Test
    • Detecting Component Changes
    • Testing a Component with properties (inputs) and events (outputs)
    • Testing a Component that uses the Router
    • Testing a Component that depends on a Service using a Spy
    • Testing a Component that depends on a Service using a Fake
    • Testing a Service and Mocking its Http requests
    • Testing a Pipe
  • XIII. RxJS and Observables
    • What is an Observable?
    • Creating Observables
    • What is an Observer?
    • Observer Example
    • Operators: map, switchMap, debounceTime, distinctUntilChanged
    • Practical Application of using RxJS
    • Subject
    • Subject Example
    • EventEmitter or Observable
  • XIV. Security
    • Best Practices
    • Preventing Cross-site Scripting (XSS)
    • Trusting values with the DOMSanitizer
    • HTTP Attacks (CSRF and CSSI)
    • Authentication using JSON Web Tokens (JWT)
    • Authorization: Router Guards
  • XV. Change Detection Strategies
    • Default
    • OnPush
  • XVI. Advanced Routing
    • Lazy-loading Angular Modules
    • Location Strategies
    • Nested or Child Routes
  • XVII. Advanced Dependency Injection
    • Providers
    • Using the @Optional and @Host Decorators
  • XVIII. Pipes
    • Built-in Pipes: Using, Passing Parameters, Chaining
    • Creating a custom Pipe using PipeTransform
    • Understanding Pure and Impure Pipes
  • XIX. Angular CLI
    • Creating a New Project
    • Generating Modules, Components, Models, and Services
    • Customizing the CLI to include CSS Preprocessors (SASS) and other UI libraries: Bootstrap, Material, or Clarity
  • XX. Deploying an Angular Application to Production
    • Manually
    • Using the Angular CLI
  • XXI. If desired, the course can be customized to include two of these topics. If more than two are desired, other topics are scaled back or removed.
    • npm QuickStart
    • Managing Shared Application State using ngrx and Redux
    • Upgrade Strategies from AngularJS
    • End-to-End Testing
    • Creating Custom Attribute Directives
    • Webpack Guide
    • Template-driven Forms
Copyright ©2021 Themis, Inc. All rights reserved Privacy Policy