Downloaded 35 times
Uploaded byOleksii Prohonnyi
Dive into Angular, part 4: Angular 2.0
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.
More Related Content
Similar to Dive into Angular, part 4: Angular 2.0
Dive into Angular, part 4: Angular 2.0
- 1. DIVE INTO ANGULAR, PART4: 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.
- 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 2APP IN 6 STEPS
- 6. BUILD ANGULAR 2APP 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
- 7.
- 8.
- 9. ES6 VS TYPESCRIPT Seemore: EcmaScript 6/2015 TypeScript
- 10.
- 11. ARCHITECTURE The frameworkconsists 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.
- 13.
- 14. MODULE Every Angularapp 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.
- 16.
- 17. COMPONENT A componentcontrols 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.
- 19. COMPONENT In TypeScript,we attach metadata by using a decorator:
- 20.
- 21. TEMPLATE We definea component's view with its companion template. A template is a form of HTML that tells Angular how to render the component.
- 22.
- 23. DATA BINDING Angularsupports 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-waydata binding is an important fourth form that combines property and event binding in a single notation, using the ngModel directive.
- 25.
- 26. SERVICE Service isa 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.0COMPARISON
- 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.
- 46. SEE MORE Directive Dependency injection Wrapping Filters Input & output Forms Style guide
- 47.
- 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.
- 51. HOME TASK Mainidea: migrate existing application on a new version of Angular.js framework. Technical details: – Component structure – Component router – TypeScript/EcmaScript 6 – Readme with installation instructions
- 52.