AngularJS2 architecture

Angular 2 application application consists of the following eight components:

• 1, the module (Modules)
• 2, component (Components)
• 3, the template (Templates)
• 4, metadata (Metadata)
• 5, data binding (Data Binding)
• 6. Directive (Directives)
• 7. Services (Services)
• 8, dependency injection (Dependency Injection)

The figure below shows how each part of the work of each other:

FIG template (Templates) by Angular extended HTML syntax, where the components (Components) class is used to manage these templates, application logic part through the Service (Services) to complete, and then packaged services and components in the module, and finally through the guide root module to start the application.

Next we will have more than eight separate part analysis:

Module

Module has a code, it can be used to perform a simple task.

Angular application is modular, it has its own modular system: NgModules.

Angular should each have at least one module (root module) can generally be named: AppModule.

Angular module is a class with a @NgModule decorator, which receives a module used to describe the attributes of metadata objects.

Several important attributes are as follows:

• declarations (declaration) - belong to the view class module.There are three types of views Angular categories: assembly instructions and pipes.

• exports - Statement (declaration) subset, can be used for other modules in the component templates.

• imports - this is required by the template module assembly module additional export class.

• providers - the creator of the service.This module add them to the global service table, so that they in any part of the application can be accessed.

• bootstrap - application main view, known as the root component, it is all a host of other applications view.Only the root module needs to set the bootstrap property.

One of the most simple root modules:

Next, we guide through the root module to start the application development process normally main.ts file to boot AppModule, the following code:

Components (Components)

Control component is a class template view portion for processing applications and the logical page.

Component is the foundation and core constitute Angular application that can be used throughout the application.

Components know how to render themselves and configuration dependency injection.

Components interact with the view by some of the API properties and methods thereof.

Create Angular assembly methods are three steps:

• Introducing Component decorator from @ angular / core in
• Establish a normal class, and modify it with @Component
• In @Component, set the selector Custom label and template template

Templates (Templates)

Angular default template language is HTML.

We can define a view component using a template to tell Angular how to display components. The following is a simple instance:

<div>
网站地址 : {{site}}
</div>

In Angular, the default is to use double braces as interpolation syntax, braces middle value is usually the name of a variable component properties.

Metadata (Metadata)

Angular metadata tells how to handle a class.

Consider the following scenario we have a component called Component, it is a class until we tell Angular which is a component so far.

You can attach metadata to the class up to tell Angular Component is a component.

TypeScript in, we decorator (decorator) to attach metadata.

Examples

@Component({
   selector : 'mylist',
   template : '<h2>本教程</h2>'
   directives : [ComponentDetails]
})
export class ListComponent{...}

@Component Decorator can accept a configuration object, and the mark would be followed by class component class.

Angular will be based on this information to create and display components and their views.

@Component Configuration Item Description:

• selector - a css selector, which tells Angular looking for a <mylist> HTML tag in the parent, and then create the component and insert this label.

• templateUrl - Components HTML template address.

• directives - An array containing the components need to rely on this template or instruction.

• providers - An array containing the components depend on the service provider needs to dependency injection.

Data binding (Data binding)

Data binding provides a simple and consistent way for applications to display data and data exchange, which is a mechanism for managing the application of value inside.

Through this mechanism, and can assign values ​​from inside HTML, so that reading and writing, data persistence operations data easier and faster.

As shown, the data binding syntax There are four forms. Each form has one direction - from the DOM, DOM to go, two-way, like arrows in the figure are illustrated.

• Interpolation: display component values in the HTML tag.

  <h3>
  {{title}}
  <img src="{{ImageUrl}}">
  </h3>
  

• Binding properties: the property element is set to the value of the component properties.

  <img [src]="userImageUrl">
  

• Event Binding: trigger assembly method name is clicked.

  <button (click)="onSave()">保存</button>
  

• Two-way tie: Use Angular Lane NgModel instruction can be more convenient for two-way binding.

  <input [value]="currentUser.firstName"
         (input)="currentUser.firstName=$event.target.value" >
  

Directive (Directives)

Angular template is dynamic. When Angular render them, it will be modified according to the instructions of the DOM.

Instruction is a "metadata instruction" classes with. TypeScript in, through @Directive decorators incorporate additional metadata to the class.

It contains the following three types of instruction in the Angular:

• Properties command: command element in the form of property to be used.
• Structure instruction: used to change the structure of the DOM tree
• Components: instruction as an important sub-class, the components can be seen as essentially a command with templates.

<li *ngFor="let site of sites"></li>
<site-detail *ngIf="selectedSite"></site-detail>

* NgFor tell Angular sites to generate a list of each item in a <li> tag.

* NgIf that the item exists only in the choice of the time, will be included SiteDetail components.

Services (Services)

The service is Angular2 encapsulate a particular function, and can be injected through the way for others to use stand-alone modules.

Services are divided into many ways, including: value, function, and characteristics required for the application.

For example, multiple components appear in duplicate code, the code is repeated to extract the service implementation code reuse.

Here are some common services:

• Log Service
• Data Service
• Message Bus
• Tax Calculator
• Application Configuration

The following example is a logging service, used to log into the browser console:

export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}

Dependency Injection

Inversion of Control (Inversion of Control, abbreviated as IoC), is an object-oriented programming in one design principles can be used to reduce the degree of coupling between the computer code. The most common method is called dependency injection (Dependency Injection, abbreviated DI), there is a way called "dependent lookup" (Dependency Lookup).

By controlling the reverse, when the object is created by external entities within a regulatory system for all objects, it will depend on a reference object passed to it. We can also say that dependency is injected into the object.

In the traditional development mode, the caller is responsible for managing all dependent objects, circular dependency has been a nightmare, and dependency injection mode, the management rights to the injector (Injector), which is responsible for dependent objects at run-time software replace, rather than at compile time. This inversion of control, operation of the injection characteristics is the essence of dependency injection.

Angular by view parameter type constructor, to know which components need service. For example, the constructor SiteListComponent component requires a SiteService:

constructor(private service: HeroService) { }

When Angular creating components, will be the first to find a service component required for injector (Injector).

Is injected into a vessel maintenance service instance, holds the previously created instance.

If the vessel has not been requested service instance, the injector will create a service instance, and added to the container, then put the service back to the Angular.

When all services are finished parsing and return, Angular These services will call the constructor parameters to the component. This is dependency injection.