Angular 2.0 was released on September 14th, 2016 by Google. It is a total rewrite from Angular 1.x and uses TypeScript as its default language. Some key features include components, templates, modules, services, dependency injection and routing. Components control views through templates. Modules allow grouping and metadata. Templates use data binding syntax. Services provide reusable business logic. Dependency injection provides services to components. Routing enables navigation between views.

1. ANGULAR 2.0
RELEASED ON 14TH SEPTEMBER, 2016 - GOOGLE

2. 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

3. 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

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

5. 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.

6. Ngmodule
• declaration
• exports
• imports
• providers
• bootstrap

7. 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.

8. 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.

9. 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>

10. 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 …

11. 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

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

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

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

15. 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’

16. 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

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

18. 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.

19. DEPENDENCY INJECTION
Child injectors
ServiceA
ComponentA Component B
Root Component

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

21. 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

22. 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.

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

24. 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>

25. 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

26. 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

27. 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

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

29. THANK YOU