AngularJS2 Architecture

1- Modules: - AngulasJS2 App is collection of modules. Each module define/contains code to perform single task.It contain export class stating that this class is public and can be access by other modules in applications.

2- Components:- It is controller class with a view template that deals with view of application and logic on the page.

3- Template:- This define the view part of our AngularJS2 application

4- MetaData :- It is data inside data. If we refer to our component we use metadata to tell angularjs2 to create a component using decorator i.e. @Component is decorator.

@Component({
selector : 'mySelector',
template : '

Siddhartha dhumale

'
directives : [MyComponentDetails]
})
export class MySiddhuClass{...}

@Component is a decorator which uses Metadata to create the component and its view.
selector :- create instance of component,
template:- tells Angular what to display on the screen using tag and
directive:- represent array of components and directive.

5- Data Binding:- It binds data and view and viceversa

Interpolation: It displays the component value within the div tags.

Property Binding: It passes the property from the parent to property of the child. From Component to Template.

Event Binding: handle click event on the screen.

Two-way Binding: binding two way between template and component.

6- Service
Services are JavaScript functions use to do a specific task only. In AngularJS2 services are injected using Dependency Injection mechanism. Service example are loggin service, data service etc.

7- Directive
The directive is a class that represents the metadata. It is of three type:-

Component Directive: It creates custom controller by using view and controller.

Decorator Directive: This directive use decorator to decorates elements by giving them additional behavior.

Template Directive: It converts HTML into a reusable template.