Banner rating d5dfd02e10e7bea369b370d45102dadcf6d70e41b6bfce1ee178127969f7852a
Dynamics Edge
4.67 out of 50 stars, based on 80 reviews*

Save money and get your team trained. With a group of 5 or more people, you have special options. Click the button below to request a special quote for your team now!

Request Group Quote

Register

Price: $2250   Duration: 3 days
- EST

Course 70011

Price: $2250, Length: 3 days

Angular Intermediate Course

To customize this class, call 800-453-5961 or click here to contact us

Note: For additional questions and clarification, you may reach Bill Ramirez at bill@dynamicsedge.com or on his following contact details: Office- (510) 804-3600 & Cell- (415) 200-6969

COURSE OVERVIEW:

During these 3 days, all lab exercises are designed to make attendees build an entire web application step by step so that they can practice and understand how these Angular concepts come into play in an actual real-life project.

PREREQUISITES:

  • Full understanding and practical use of Angular.

AGENDA TOPICS:

Node.JS and NPM

  • What is Node JS?
  • Example of server code with Node
  • What is NPM?
  • Npm install, npm update and other useful commands
  • Semantic versioning and package.json

TypeScript

  • Interfaces, classes and object inheritance
  • Usefulness of types
  • Getters, setters and static properties
  • Constructor syntax
  • Generics and advanced types
  • Modules: Export and import
  • ES6-ES7 features: Arrow functions, backticks, template expressions, object rest and spread

Building blocks of an Angular application

  • Modules and ngModule
  • Components, pipes, directives and services
  • ts
  • Importance of using angular CLI to keep project structure updated
  • Angular builds: AOT vs JIT - What to use for production
  • Build modes and environments

LAB: Angular Builds

Components

  • Template and expressions
  • Passing data to a component with @Input()
  • Practicing with Angular CLI

LAB: Creating components

Data bindings

  • One-way data bindings
  • Expressions
  • Two-way data bindings with ngModel
  • Template syntax
  • Template reference variables

LAB: Bindings

Directives

  • What are directives for?
  • Different kinds of directives
  • ngFor
  • LAB: ngFor
  • ngIf

LAB: Hiding things

  • ngSwitch
  • ngClass and ngStyle
  • How to create a custom directive?

LAB: Custom directive

Pipes

  • What are pipes for?
  • Examples of common Angular pipes

LAB: Currency pipe

  • Pure and Impure pipes
  • How to create our own pipes?

LAB: Custom Pipe

Services and dependency injection

  • Difference between components and services
  • Dependency injection in Angular
  • Injector Tree
  • How to create a service?

LAB: Services

Reactive Programming with RxJs Observables

  • Introduction to RxJS and Reactive Programming
  • What is an observable?

LAB: Observables

  • RxJs operators
  • Examples of RxJs operators: max, merge, filter

HTTP client

  • How to use the HTTP client?
  • Http Interceptor

LAB: Using the HTTP client

  • Async pipe

LAB: Using the async pipe

Component communication and lifecycle

  • How do components share data?

LAB: Component communication

LAB: Using @Output()

  • Introduction to the component lifecycle
  • Lifecycle hooks
  • Change detection strategies

Component router

  • What is the component router?
  • Example of the component router in action
  • Child routes and route parameters

LAB: Component router

  • Guards for authentication and user rights
  • LAB: Authentication
  • Lazy-loading

Forms

  • How to handle forms with Angular?
  • Template-driven forms and reactive forms
  • Form validation and submission

LAB: Template-driven forms - Form validation

  • Custom form validator

Advanced projects and tools

  • Progressive web apps
  • Angular Console
  • Compodoc
  • Custom Elements
  • Angular Material and CDK
  • CLI Schematics
  • Angular Universal or how to pre-compile on the server
  • Angular Augury: Debugging Angular apps in Google Chrome

Testing Angular Applications

  • How to test Angular applications?
  • Karma and Jasmine

LAB: Writing Unit tests

  • Angular Test Bed
  • Mocking and stubbing with Jasmine and Angular

LAB: Writing Component Tests

Resources and best practices

  • How to use angular.io (cheatsheet, etc.)
  • Style guide and best practices
  • Official Angular blog

We look forward to your great success!!!

*NOTE: if an average rating and rating count are shown on this page, they are based on all reviews associated with Dynamics Edge that are shown on the review page, and are not restricted to reviews only for the particular course offered on this page.


70011Angular Intermediate Course