Duration: 4 Days

Core Angular with TypeScript

Angular is a Google-supported, open-source JavaScript "MV*" or "single-page app" framework. It’s second version is a redesign of the original framework released a few years ago. Trading on its extreme popularity, developers are eager to use the new version of one of the top frameworks for JavaScript app development. Angular is an opinionated framework – it brings strong ideas about how apps should be built. In return for working with Angular conventions, the framework provides an exceptional amount of “magic” to make app development and testing easier. This course provides a thorough introduction to the patterns and features of Angular.

Prerequisites

• Thorough understanding of JavaScript
• Some knowledge of TypeScript, AngularJS, and Single Page Applications is highly helpful

Objectives

In this course, you will learn:

• How to use Angular to reduce the amount of code you have to write to build great HTML5 user interfaces
• How to use Angular data binding to increase the reliability and maintainability of your user interfaces
• How to retrieve data from a back-end server, manipulate it, and display it, while letting Angular do most of the heavy lifting
• How to modularize your Angular code with custom components & services
• How to test your Angular code
• How to create and organize an Angular project

Audience

Core Angular is geared to seasoned developers with at least 6-12 months hand-on experience with web development.

Outline

• Setting up your Development Environment
  • Setup Cloud9 or WebStorm
  • Using npm & package.json file
  • Organizing your source code


• TypeScript and EcmaScript 6
  • Introduction to EcmaScript 6
  • Block Bindings, Strings, Functions =>, Objects, Destructuring, Symbols
  • Iterators, Classes, Arrays, Collections, etc.
  • TypeScript Decorators
  • Using Type & Interfaces


• Promises & Reactive Programming (RxJS)
  • ES6 Promises
  • Observables
  • Sequence Operators
  • Concurrent Programming


• Angular-CLI
  • First Angular 2 Application
  • WebPack Integration


• How Angular Works
  • Building our first single-page web application
  • Components, Templates, Metadata (TypeScript Decorators)
  • 4 forms of data binding (interpolation, property binding, event binding, two-way)
  • Zone.js
  • Directives (component, structural and attribute
  
  
• Differences between AngularJS & Angular (for students familiar with AngularJS)
  • Concepts & Changes
  • Concepts for converting your AngularJS app to Angular
  • Hybrid Interoperability


• Angular NgModules vs ES6 Modules
  • Components, Services, Values & Functions as modules
  • Dependency Injection
    • Injectors & Providers
  • Introduction to Best Practices & Style Guides


• Angular Components & Template Syntax
  • Binding controls in an HTML template with interpolation
  • Template Expressions & Operators
  • Built-in components: ngFor, ngIf, ngSwitch ngClass, ngStyle, ngForm, NgNonBindable
  • local template variables
  • * and <template>
  • input and output properties

• Forms in Angular
  • Controls and Control Groups
  • Using FormBuilder
  • Validation - Preventing form submission
  • Watching for Changes (ngModel)


• Angular Pipes
  • Keeps display logic in the template and out of the business logic
  • DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, PercentPipe
  • Stateful Pipes: AsyncPipe
  • Pipe parameters


• Architecting Services & View Components
  • Models
  • Services
  • Components


• Component Lifecycle
  • OnInit, OnDestroy, DoCheck, OnChanges, AfterContentInit, AfterContentChecked AfterViewInit, AfterViewChecked
  • Optional lifecycle interfaces

• HTTP Client
  • XMLHttpRequest vs JSONP
  • Fetch data (http.get)
  • Angular Http API


• Component Router & Navigation
  • Loading the router library & setting the base href
  • Router configuration & setting a default route
  • Link Parameters Array
  • Navigating via RouterLink or Program Control
  • Router & Query Parameters
  • Router Lifecycle Hooks
  • Nested Routes
  • HTML5 vs hash URL style
  • Deep Linking with Matrix URL notation
  • Guards & Lazy Loading


• Testing
  • End-to-end & Unit Testing
  • Tools & frameworks
  • Setting up Testing
  • Testing Services, Components, Forms & HTTP requests