Dive into Angular, part 4: Angular 2.0

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