Angular2

ANGULAR 2.0
RELEASED ON 14TH SEPTEMBER, 2016 - GOOGLE

ANGULAR 2.0
• Development platform for building mobile and desktop web applications.
• Angular 2 is not an upgrade of 1. Its totally rewrite.
• Default language –Typescript

WHY ANGULAR 2.0?
• Component based.Modularization, reusability, maintainable, reliable.
• Mobile oriented. Learn once, write anywhere.
• Provides more choice for languages.ES5, ES6,Typescript or Dart.
• Powerful routes.Child/Nested routing.
• Dependency injection. Child injectors.
• Forms

BUILDING BLOCKS OF APPLICATION
1. Modules
2. Components
3. Templates
4. Metadata
5. Data Binding
6. Directives
7. Services
8. Dependency Injection

MODULE
• Angular app should have one root module.
• Conventionally named as appModule.
• Module class consists of NgModule decorator, function that takes a single metadata
object whose properties describe the module.
• Allows to register directives,components,service and many other things in a single place.

Ngmodule
• declaration
• exports
• imports
• providers
• bootstrap

NgModule
declarations
- List components,directives,pipes.
- Can declare in another module but just declare it once.
- Module classes,service classes,non-angular classes and objects are not required to
declare.
exports
- To make visible to another module.
- Export components,directives,pipes.
- If not export then visible only to other component declared in this module.

NgModule
imports
- List supporting modules for a component declared in this module.
providers
- List of dependency injection providers
bootstrap
- Only root module should set bootstrap property.

COMPONENTS
• Helps to render the view page.
• Controls the appearance and behavior of a view through its template.
• Component decorator, a function that takes a configuration object.
@Component({
selector:'hello-world',
template: `<div>Hello world</div>`
})
Template : <div><hello-world></hello-world></div>

Component
• selector
Name of the HTML tag.
• template
Placeholder for the HTML.
• templateUrl
Source for component template, separate HTML file.
Take relative path.
• Other metadata : directives, providers,styleUrls …

TEMPLATES
• A form HTML page.
• But have additional angular template syntax.
<p>The sum of 2 + 4 is {{2 + 4}}</p> Template expression
<h3> {{title}}</h3> Component property
<p>The sum of 2 + 4 is not {{2 + 4 + getValue()}}</p> Component Method

TEMPLATES
• One way data binding
• {{ }} => Interpolation.Display a component property,
• [ ] => Property binding. Bind the value to the property.
• ( ) => Event binding.
• [()] =>Two way data binding

METADATA
• Define how to process a class.
• Metadata answers the following questions.
• what is it?
• what does it need?

DATA BINDING
• Communication between a template and its component.Or between parent and child
components.

DATA BINDING
• BindingType (Divided based on the direction in which data flows)
1. Interpolation | property | attribute
One way from source to target.Data source =>View target.
{{expression}} => <h2>{{title}}</h2>
[target] = "expression" => <span [hidden] = “isSet” ></span>
2. Event
One way from target to source.View target => Data source.
(target) = "statement” => (click) = ‘callMe’
3. Two way
[(target)] = "expression” => [(ngModel)] = ‘callMe’

DIRECTIVES
• Transforms the DOM.
• Can create custom directive.
• Types :
1. Components
Directive with a template(mandatory).
2. Attribute Directive
Add appearance or behavior to an existing element.ngModel, ngSwitch
3. Structural Directive
Change the DOM layouts by adding/removing/replacing elements
Eg : ngFor, ngIf

SERVICES
• Services hold business logic for a component.
• Services are available to components through dependency injection.

DEPENDENCY INJECTION
• A way to supply a new instance of a class with the fully-formed dependencies it requires.
• Uses to provide the component with the services they need.
• Supports nested injectors in parallel with the component tree.
• No need to configure providers at each level.

Child injectors
ServiceA
ComponentA Component B
Root Component

@Component({
providers:[ProductService]
})
class ProductComponent {
product:Product;
constructor(private productService: ProductService) {
this.product = this.productService.getProduct();
}
}

OTHER FEATURES AND SERVICES
• Pipes
- Formatting and transformation the data in template.
- Built in pipes :currency,date, uppercase, Json,lowercase, decimal,percent.
- Custom pipe can be created.
Eg:
price | currency:'USD':true =====> 42.33 as $42.33
book.title | lowercase =====> AngularJs => angularjs

ROUTING
• It enables navigation from one view to the next as users perform application tasks.
• Three main components of Routing
• Route Object => Describes our application’s routes.
• RouterOutlet =>A placeholder component that gets expanded to each route’s content.
• RouterLink => Directive for binding a clickable HTML element to a route.

ROUTING
Routes = [
{path:'',redirectTo:'/home',pathMatch:'full'},
{path:'home',component:HomeComponent},
{path:contact/:id',component:ContactComponent}

ROUTING
<html><header></header><body>
<div id="menu”>
<a [routerLink]="['/home']" class="btn">Home</a>
<a [routerLink]="['/about']" class="btn">About</a>
</div>
<div id="container">
<router-outlet></router-outlet>
</div>
</body></html>

TYPESCRIPT
• Open source
• Developed by Microsoft
• Superset of JavaScript
• Has own compiler to convert javascript.
• Includes many aspects of object orientation.
• Inheritance,Interfaces,Generics, Lambdas

FUTURE PLANS
• Bug fixes and non-breaking features for APIs marked as stable
• More guides and live examples specific to your use cases
• More work on animations
• Angular Material 2
• MovingWebWorkers out of experimental
• More features and more languages for Angular Universal
• Even more speed and payload size improvements

NOTE
• Angular CLI provide a command line interface from initial project generation to
production deployment.
• https://cli.angular.io/)
• https://github.com/angular/angular-cli

REFERENCES
• https://github.com/angular
• https://www.typescriptlang.org/

Angular2

More Related Content

What's hot (19)

Similar to Angular2 (20)

Recently uploaded (20)

Angular2