Home > Courses > Angular 5.0 Development

Angular 5.0 Development

Eyal Vardi

Register Today and save your spot!

Today JavaScript is the language of the web. On the client, on the server, on the mobile, everywhere. But let's face it: JavaScript still has challenges.

Angular 5.0 brings an entirely new approach to web application development. We need to understand TypeScript, RxJS, and a new template syntax just to get started!

This course provides a developer-level introduction along with more advanced and useful features of JavaScript and Angular 5.0.

JavaScript fundamentals

  • Scope & Function Context
  • Closures
  • this keyword
  • Object-Oriented in JavaScript
  • Async and Parallel in JavaScript
  • JavaScript Design Pattern

JavaScript 6.0 (ECMAScript 2015)

  • Syntax
  • Functions
  • Classes
  • Collections
  • Iterators & Generators
  • Modules
  • Template String
  • Proxy

TypeScript

  • Why TypeScript?
  • Basic Type
  • Interfaces
  • Generics
  • Type Compatibility
  • Common Errors
  • The Future

Angular Overview

  • The Challenge with Web Apps (SPA)
  • Directives & Components
  • Pipes
  • Forms
  • Modules
  • Routes

Template Syntax

  • Interpolation
  • Template expressions
  • Binding syntax
  • Input and Output Properties
  • Template Expression Operators
  • Property Binding
  • Attribute, Class and Style Bindings
  • Event Binding
  • Two-way data binding with NgModel
  • Built-in Directives
  • * and template
    • Local template variables

Components

  • Component Overview
  • Component Metadata (@component)
  • Lifecycle Hooks
  • Component encapsulation
  • @Input and @Output
  • @ContentChildren & @ContentChild
  • @ViewChildren & @ViewChild
  • Component change detection startegy

Directives

  • Directive Overview
  • Directive Metadata (@Directive)
  • Structural Directive
  • TemplateRef & ViewContainerRef Classes
  • Renderer Class
  • Attribute Directive
  • @HostBinding
  • @HostListener

Forms in Angular

  • Forms Overview
  • User Input
  • Template-driven Forms
  • Reactive Forms
  • FormBuilder Service & Dynamic Forms

Angular Pipes

  • Using Pipes
  • Built-in pipes
  • Parameterizing a Pipe
  • Chaining pipes
  • Custom Pipes
  • Stateful Pipes
  • Async Pipe

Routing and Navigation

  • Navigation flow
  • Routes Tree
  • RouterLink Directive
  • RouterOutlet Component
  • Router class
  • Router lifecycle hooks & guards
  • Lazy loading
  • Preloading
  • Dynamic routes

Server Communication (HttpClient service)

  • Installation
  • Enable RxJS Operators
  • Using HttpClient To Request Data
  • Using HttpClient To Send Data
  • HttpClient API’s
  • Http Default Options
  • Error handling
  • Configuring other parts of the request
  • Interceptors
  • JSON Web Token (JWT)
  • Security: XSRF Protection
  • Communication with JSONP
  • Events (HttpEvent class)

Dependency Injection (DI)

  • Why Dependency Injection?
  • Angular Dependency Injection
  • Configuring the Injector
  • Services
  • @Injectable() & @inject
  • Injector Providers
  • The Injector Tree
  • Component Injectors

Change Detection & Lifecycle Hooks

  • ngZone
  • Change Detection Algorithm
  • Lifecycle Hooks
  • Tips and Tricks to improve the performance

NgModules

  • Template Context
  • Providers
  • Core modules
  • Share modules
  • Feature modules
  • TypeScript Barrels pattern

Upgrading From 1.X

  • Preparation for migrating.
  • Component method vs. Directive method.
  • Upgrading with The Upgrade Adapter.