Dive into Angular, part 4: Angular 2.0
Download as PPTX, PDF•3 likes•377 views
This document provides a comprehensive overview of Angular 2.0, detailing new features such as component-based architecture, simplified directives, and dependency injection. It outlines a six-step process for building an Angular 2 application and compares key differences between Angular 1.x and 2.0. Additionally, it covers essential concepts like components, modules, templates, data binding, and services, along with references for further learning.
Dive into Angular, part 4: Angular 2.0
- 1. DIVE INTO ANGULAR, PART 4: ANGULAR 2.0 _by Oleksii Prohonnyi
- 2. AGENDA What’s new Build Angular 2 app in 6 steps ES6 vs TypeScript Architecture Module Component Template Data binding Service 1.x vs 2.0 comparison References
- 3. WHAT’S NEW
- 4. WHAT’S NEW Component-based Simplified directives Dependency injection TypeScript (ES6 + Types + Annotations) Generics Lambdas with TypeScript Forms and Validations See more: dzone.com
- 5. BUILD ANGULAR 2 APP IN 6 STEPS
- 6. BUILD ANGULAR 2 APP 0. Install Node.js and npm. 1. Create and configure the project. 2. Create your application. 3. Create a component and add it to your application. 4. Start up your application. 5. Define the web page that hosts the application. 6. Build and run the application. Download example: github.com See more: angular.io
- 9. ES6 VS TYPESCRIPT See more: EcmaScript 6/2015 TypeScript
- 10. ARCHITECTURE
- 11. ARCHITECTURE The framework consists of several cooperating libraries, some of them core and some optional. The eight main building blocks of an Angular 2 application: – Modules – Components – Templates – Metadata – Data binding – Directives – Services – Dependency injection See more: angular.io
- 12. ARCHITECTURE
- 13. MODULE
- 14. MODULE Every Angular app has at least one module, the root module, conventionally named AppModule. An Angular module, whether a root or feature, is a class with an @NgModule decorator. NgModule is a decorator function that takes a single metadata object whose properties describe the module (declarations, exports, imports, providers, bootstrap).
- 15. MODULE
- 16. COMPONENT
- 17. COMPONENT A component controls a patch of screen real estate that we could call a view. We define a component's application logic — what it does to support the view — inside a class. The class interacts with the view through an API of properties and methods.
- 18. COMPONENT
- 19. COMPONENT In TypeScript, we attach metadata by using a decorator:
- 20. TEMPLATE
- 21. TEMPLATE We define a component's view with its companion template. A template is a form of HTML that tells Angular how to render the component.
- 22. DATA BINDING
- 23. DATA BINDING Angular supports data binding, a mechanism for coordinating parts of a template with parts of a component. There are four forms of data binding syntax. Each form has a direction — to the DOM, from the DOM, or in both directions:
- 24. DATA BINDING Two-way data binding is an important fourth form that combines property and event binding in a single notation, using the ngModel directive.
- 25. SERVICE
- 26. SERVICE Service is a broad category encompassing any value, function, or feature that our application needs. Almost anything can be a service. A service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.
- 27. 1.X VS 2.0 COMPARISON
- 28. 1.X VS 2.0: Data binding
- 29. 1.X VS 2.0: Filters
- 30. 1.X VS 2.0: Local variables
- 31. 1.X VS 2.0: Ng-App
- 32. 1.X VS 2.0: Ng-Class
- 33. 1.X VS 2.0: Ng-Click
- 34. 1.X VS 2.0: Ng-Controller
- 35. 1.X VS 2.0: Ng-Href
- 36. 1.X VS 2.0: Ng-If
- 37. 1.X VS 2.0: Ng-Model
- 38. 1.X VS 2.0: Ng-Repeat
- 39. 1.X VS 2.0: Ng-Show
- 40. 1.X VS 2.0: Ng-Src
- 41. 1.X VS 2.0: Ng-Style
- 42. 1.X VS 2.0: Ng-Switch
- 43. 1.X VS 2.0: Controllers
- 44. 1.X VS 2.0: Dependency injection
- 45. SEE MORE
- 46. SEE MORE Directive Dependency injection Wrapping Filters Input & output Forms Style guide
- 47. REFERENCES
- 48. REFERENCES https://angular.io/ http://www.angular2.com/ https://angular.io/docs/ts/latest/tutorial/ http://eisenbergeffect.bluespire.com/all-about-angular-2-0/ https://www.lynda.com/AngularJS-tutorials/Learn-AngularJS-2- Basics/428058-2.html https://egghead.io/courses/angular-2-fundamentals http://learnangular2.com/
- 50. HOME TASK
- 51. HOME TASK Main idea: migrate existing application on a new version of Angular.js framework. Technical details: – Component structure – Component router – TypeScript/EcmaScript 6 – Readme with installation instructions