Angular 2 is the latest framework for building web applications using typescript. Recently, angular team is skipped the version 3.x because, router package is shipped with 3.x previously, so instead of putting into 3.x, choose to move to 4.x.

Tuesday, 18 October 2016

Angular 2.0 Architecture

Angular is a framework for building client applications in HTML and either JavaScript or a language like TypeScript that compiles to JavaScript.

There are four main key players in Angular 2.0
  • Components
  • Directives
  • Routers
  • Services

Component:
In Angular 1.0, we used controllers, directives and scope to build a logic , but in Angular 2.0, all these are combined and introduced components.
It encapsulates the data, template and behaviour of a view. It exposes the public api to the other components.
component controls a patch of screen called a view.
For example, the following views are controlled by components:


  • The app root with the navigation links.
  • The list of heroes.
  • The hero editor.
You 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.


Sample to create component:


@Component({
selector: "my-web"
})
@View({
templateUrl: "my-web.html"
})
class myWeb(){
constructor(){
}
}


in html template :


<my-web>

<div>
Angular 2.0 tutorials
</div>
</my-web>



I will explain you
with another simple example.


import { Component } from '@angular/core';


@Component({ selector:'my-web',

template:'<div> <h1> Username is {{username}}<input class='button' (click)="getUsername()"></input></div>
})
export class MyCustomComponent {
constructor(){
 this.username = "Srinivas Nidadavolu"

getUsername(){
alert(this.username);



In html, use the component


<my-web>

 <div></div> 
...
....
</my-web> 
we can create widgets using components. 

Directives:
  • Directives are used to add some behaviour to existing dom elements. It does not have view. These are used to design reusable components.
import { Directive } from 'angular2/angular2';
@Directive({

    selector: "[userDirective]",
hostListeners: {
        'click': 'showMyDetails()'

    }

})

class Message {
constructor() {}

showMyDetails  () { alert('Name is Alex'); }

}

<a  userDirective>click on me</a>
Routers  :
  • In Angular 2, Routers manages state transitions.
  • We use url to navigate to different pages.
  • In General, we use url /login to route to login page
  • /home to route to home page ... etc
In Angular 2.0, we use 3 main components to configure routing.
Routes : It describes our application routes.
RouterOutlet : It is a placeholer component.
RouterLink : It is used to link routes.
import {Login} from './Login';
......
@RouteConfig([ { path: '/login', component: Login, name: 'Login' },
  { path: '/**', redirectTo: ['Login'] }
]) 
Services: 
  • Services are reusable components.It can be shared by multiple components in the application

0 coment�rios:

Post a Comment

Labels

Online Training

Your Name :
Your Email: (required)
Your Message: (required)

Powered by Blogger.

Recent Posts

Find Us On Facebook

Popular Posts