Neoito — A roadmap to Angular
2 likes213 views
This document provides an overview of Angular 2.4.0, including information on its improved change detection, architecture as progressive web apps that can run on any platform, use of TypeScript for typed JavaScript, main building blocks of modules, components, metadata, templates, data binding and dependency injection, and tips for crafting components using the CIDER method. The document also discusses upgrading from Angular 1.x and distilling its best practices, as well as Angular's use of ES6 features and module syntax.
Neoito — A roadmap to Angular
- 1. 1 01/02/2017 Angular 2.4.0 Angular Quickstart A roadmap to Angular 2
- 2. 2 01/02/2017 Angular 2.4.0 improved changed detection Upgrade from Angular 1.x ▪ Distilled best practices of Angular 1.x ▪ Change detection ▪ Reactive mechanisms ▪ Teamwork !
- 3. 3 01/02/2017 Angular 2.4.0 improved changed detection Source: https://angular.io/ Angular 2 architecture
- 4. 4 01/02/2017 Angular 2.4.0 Progressive web apps Native Desktop Cross platform
- 6. 6 01/02/2017 Angular 2.4.0 Code Generation Speed and Performance Universal Code Splitting
- 7. TypeScript Typed Javascript (ES6) ▪ From Microsoft ▪ Superset of JavaScript ▪ Highly-productive development tools ▪ Interfaces ▪ Type Inference ▪ ES6 features https://github.com/Microsoft/TypeScript
- 8. 8 01/02/2017 Angular 2.4.0 TypeScript and ES6 OOP ES6 - Features ★ Classes ★ Iterators ★ Promises ★ Module Loaders ★ Arrow functions ★ Service worker
- 9. 9 01/02/2017 Angular 2.4.0 The main building blocks MODULE COMPONENT METADATA TEMPLATE DATA BINDING SERVICE DEPENDENCY INJECTION
- 10. 10 01/02/2017 Angular 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. 11 01/02/2017 Angular 2.4.0 Angular 2 Components ▪ ES6 classes Components ▪ Lifecycle hooks ▪ Providers (Services) are injected ▪ Methods and Properties
- 12. 12 01/02/2017 Angular 2.4.0 Angular 2 Metadata ▪ Allows Angular to process a class ▪ Attach using decorators ▪ Decorators are functions ▪ @Component() decorator
- 13. 13 01/02/2017 Angular 2.4.0 Angular 2 Template ▪ Template is HTML ▪ Render a component ▪ Leverages native DOM events and properties ▪ Shadow DOM with view encapsulation
- 14. 14 01/02/2017 Angular 2.4.0 Data Binding ▪ Enables data flow ▪ Interpolation ▪ Two-way binding ▪ Property binding ▪ Event binding Angular 2
- 15. 15 01/02/2017 Angular 2.4.0 Service ▪ Service is a class ▪ Do one specific thing ▪ Burdenless business logic ▪ Decorate with @Injectable Angular 2
- 16. 16 01/02/2017 Angular 2.4.0 Dependency injection ▪ Supplies instance of class ▪ Application design pattern ▪ Injector mechanism Angular 2
- 17. 17 01/02/2017 Angular 2.4.0 Remember CIDER for crafting components: Create class Import dependencies Decorate class Enhance with composition Repeat for sub-components Happy Coding