Home > Courses > Angular 4.0 Development

Angular 4.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 4.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 AngularJS 4.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
  • Classes
  • Modules
  • Generics
  • Type Compatibility
  • Common Errors
  • The Future

Angular Overview

  • The Challenge with Web Apps (SPA)
  • Directives & Components
  • Pipes
  • Forms
  • Model, View & Controller
  • Modules
  • Routes
  • Factories

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

Directives

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

Components

  • Component Overview
  • Component Metadata (@component)
  • Lifecycle Hooks
  • Component encapsulation
  • @HostBinding
  • @Input and @Output
  • @HostListener & @HostProperty
  • @Query
  • @ContentChildren
  • @ViewChild
  • Component change detection startegy

Routing and Navigation

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

Forms in AngularJS

  • Forms Overview
  • ng-model & ng-control directives
  • Track change-state and CSS special classes
  • Validation and Error messages
  • Form component & Control Component
  • Select options with *ng-for directive
  • Ng-submit

AngularJS Pipes

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

Server Communication (Http service)

  • Installation
  • Enable RxJS Operators
  • HTTP_PROVIDERS
  • Http API’s
  • Http Default Options
  • Catch Operator
  • JSON Web Token (JWT)
  • Communication with JSONP
  • Http Internal

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

Upgrading From 1.X

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