dive into angular, part 4: angular 2.0
TRANSCRIPT
DIVE INTO ANGULAR,PART 4: ANGULAR 2.0
_by Oleksii Prohonnyi
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
WHAT’S NEW
WHAT’S NEW Component-based Simplified directives Dependency injection TypeScript (ES6 + Types + Annotations) Generics Lambdas with TypeScript Forms and Validations
See more: dzone.com
BUILD ANGULAR 2 APPIN 6 STEPS
BUILD ANGULAR 2 APP0. 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
ES6 VS TYPESCRIPT
ES6 VS TYPESCRIPT
ES6 VS TYPESCRIPTSee more: EcmaScript 6/2015 TypeScript
ARCHITECTURE
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
ARCHITECTURE
MODULE
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).
MODULE
COMPONENT
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.
COMPONENT
COMPONENT In TypeScript, we attach metadata by using a decorator:
TEMPLATE
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.
DATA BINDING
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:
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.
SERVICE
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.
1.X VS 2.0 COMPARISON
1.X VS 2.0: Data binding
1.X VS 2.0: Filters
1.X VS 2.0: Local variables
1.X VS 2.0: Ng-App
1.X VS 2.0: Ng-Class
1.X VS 2.0: Ng-Click
1.X VS 2.0: Ng-Controller
1.X VS 2.0: Ng-Href
1.X VS 2.0: Ng-If
1.X VS 2.0: Ng-Model
1.X VS 2.0: Ng-Repeat
1.X VS 2.0: Ng-Show
1.X VS 2.0: Ng-Src
1.X VS 2.0: Ng-Style
1.X VS 2.0: Ng-Switch
1.X VS 2.0: Controllers
1.X VS 2.0: Dependency injection
SEE MORE
SEE MORE Directive Dependency injection Wrapping Filters Input & output Forms Style guide
REFERENCES
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/
HOME TASK
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
Oleksii Prohonnyi
facebook.com/oprohonnyi
linkedin.com/in/oprohonnyi