a roadmap to angular 2
TRANSCRIPT
1 01/02/2017Angular 2.4.0 Angular Quickstart
A roadmap to Angular 2
2 01/02/2017Angular 2.4.0
improved changed detection
Upgrade from Angular 1.x
▪ Distilled best practices of Angular 1.x
▪ Change detection
▪ Reactive mechanisms
▪ Teamwork !
3 01/02/2017Angular 2.4.0
improved changed detection
Source: https://angular.io/
Angular 2 architecture
4 01/02/2017Angular 2.4.0
Progressive web apps
Native
Desktop
Cross platform
5 01/02/2017Angular 2.4.0
Templates
Productivity
Angular CLI
IDEs
6 01/02/2017Angular 2.4.0
Code Generation
Speed and Performance
Universal
Code Splitting
TypeScript
Typed Javascript (ES6)
▪ From Microsoft▪ Superset of JavaScript▪ Highly-productive development tools▪ Interfaces▪ Type Inference▪ ES6 features
https://github.com/Microsoft/TypeScript
8 01/02/2017Angular 2.4.0 TypeScript and ES6 OOP
ES6 - Features
★ Classes★ Iterators★ Promises★ Module Loaders★ Arrow functions★ Service worker
9 01/02/2017Angular 2.4.0 The main building blocks
MODULE COMPONENT METADATA TEMPLATE
DATA BINDING SERVICE DEPENDENCY INJECTION
10 01/02/2017Angular 2.4.0
Angular 2
▪ Uses ES 6 module syntax
▪ Modules as the core
▪ Modules export and import
▪ Fine-grained modules
▪ Self-documenting
Module
11 01/02/2017Angular 2.4.0
Angular 2
Components
▪ ES6 classes Components
▪ Lifecycle hooks
▪ Providers (Services) are injected
▪ Methods and Properties
12 01/02/2017Angular 2.4.0
Angular 2
Metadata
▪ Allows Angular to process a class
▪ Attach using decorators
▪ Decorators are functions
▪ @Component() decorator
13 01/02/2017Angular 2.4.0
Angular 2
Template
▪ Template is HTML
▪ Render a component
▪ Leverages native DOM events and properties
▪ Shadow DOM with view encapsulation
14 01/02/2017Angular 2.4.0 Data Binding
▪ Enables data flow
▪ Interpolation
▪ Two-way binding
▪ Property binding
▪ Event binding
Angular 2
15 01/02/2017Angular 2.4.0 Service
▪ Service is a class
▪ Do one specific thing
▪ Burdenless business logic
▪ Decorate with @Injectable
Angular 2
16 01/02/2017Angular 2.4.0 Dependency injection
▪ Supplies instance of class
▪ Application design pattern
▪ Injector mechanism
Angular 2
17 01/02/2017Angular 2.4.0
Remember CIDER for crafting components:
Create class
Import dependencies
Decorate class
Enhance with composition
Repeat for sub-components
Happy Coding