AngularJS

Live Online (VILT) & Classroom Corporate Training Course

AngularJS allows developers to easily build dynamic, responsive single-page web applications that dynamically rewrite portions of the current page rather than having to generate a new page in response to every request.
AngularJS logo

How can we help you?

  • CloudLabs
    CloudLabs
  • Projects
    Projects
  • Assignments
    Assignments
  • 24x7 Support
    24x7 Support
  • Lifetime Access
    Lifetime Access
Box

Overview

Angular training teaches participants how to build applications using ES6, TypeScript, and modern front-end tools, including npm and Webpack.

Box

Objectives

At the end of AngularJS training course, participants 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
  • Leverage IVY, the new Angular compiler, for faster and smaller builds
Box

Prerequisites

All participants must have object-oriented programming experience. Some experience with JavaScript is helpful; the new language features of JavaScript and TypeScript are covered/reviewed in class.

Box

Course Outline

  • TypeScript Installation, Configuration & Compilation
  • Type Annotations
  • Classes
  • Scoping using let, var, and const Keywords
  • Arrow Functions
  • ES Modules
  • Decorators
  • Template Literals
  • Spread Syntax and Rest Parameters
  • Destructuring

  • 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
  • Angular Compared to Other JavaScript Libraries and Frameworks (React, VueJS, etc…)
  • Your First Angular Application

  • Understanding Components
  • Component Properties & Methods
  • Templates: Inline, Multi-line, and External with Component-relative Paths

  • Angular Modules vs. ES Modules
  • Organizing your code into Feature Modules

  • Angular CLI Features
  • Creating a New Project (with new CLI Prompts)
  • Generating Code
  • Customizing the Angular CLI

  • Interpolation
  • Property binding
  • Event binding
  • Two-way data binding

  • Structural: ngFor, ngIf, ngSwitch
  • Attribute: ngClass, ngStyle

  • Built-in Pipes: Using, Passing Parameters, Chaining

  • Component Communication using @Input, @Output
  • Component Architecture
  • Component Styles
  • Component Lifecycle Hooks
  • Evaluating UI Component Frameworks & Libraries

  • Using a service to access data
  • Using a service to encapsulate business logic
  • Understanding the scope of services

  • Understanding Dependency Injection
  • Angular’s Dependency Injection System
  • Registering
  • Injecting

  • Importing the ReactiveFormsModule
  • FormControl, FormGroup, and AbstractControl
  • Binding DOM Elements to FormGroups and FormControls
  • Validation Rules, Messages, and Styles
  • Refactoring Reactive Forms for Reuse
  • Custom Validators

  • 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

  • Importing the RouterModule
  • Configuring Routes
  • Displaying Components using a RouterOutlet
  • Navigating declaratively with RouterLink
  • Navigating with code using the Router
  • Accessing parameters using ActivatedRoute

  • Building an application using the Angular CLI
  • Differential loading: creating a modern build (ES2015) and a legacy build (ES5)
  • Deploying to a web server

  • Understanding Ivy
  • Ivy Goals
  • Ivy Benefits
  • Ivy Bundle Sizes

  • 2.x and above
  • Update Guide
  • Deprecation Guide
  • Patching Dependencies: npm audit fix
  • Looking for AngularJS to Angular upgrades? See Advanced and Comprehensive Angular courses
Box

Testimonials