Core Angular 4
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 it’s 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.
Duration: 3 Days
Prerequisites:
- Thorough understanding of JavaScript
- 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 JavaScript developers with at least 6-12 months hand-on experience developing single page applications using any other JavaScript framework.
Outline
Day 1
How Angular Works
- Setup WebStorm or Cloud9
- Introduction to EcmaScript 6
- Building our first Angular single-page web (SPA) application with the Angular CLI
- Components, Templates, Metadata (TypeScript Decorators)
- 4 forms of data binding (interpolation, property binding, event binding, two-way)
- Directives (component, structural and attribute)
Differences between AngularJS & Angular (for students familiar with AngularJS)
- Concepts & Changes
- Concepts for converting your AngularJS app
- Hybrid Interoperability
Angular ng-modules 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
Day 2
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
Day 3
HTTP Client
- XMLHttpRequest vs JSONP
- Fetch data (http.get)
- angular/http API
Observables (RxJS) vs Promises
- 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
