Angular --基本构造（二）

本文内容来源angular官网
转载请注明出处[我的博客]http://www.lostbug.cn
查看上篇点击这儿

Data binding

Without a framework,you would be responsible for pushing data into the HTML controls and turning user responses into actions and value updates.

Angular supports data binding,a mechanism for coordinating parts of a template with parts of a component.Add binding markup to the template HTML to tell Angular how to connect with both side.

As the diagram shows,there are four forms of data binding syntax.Each form has a direction–to the DOM,from the DOM,or in both directions.

Example:

<li>{{hero.name}}</li><hero-detail [hero]="selectedHero"></hero-detail><li (click)="selectHero(hero)"></li><input [(ngModel)]="hero.name">

• The {{hero.name}}interpolation displays the component’s *hero,name*property value into the <li>element.
• The [hero]**property binding**passes the value of selectedHero from the parent element to the hero property of the child HeroDetailComponent.
• The (click) event binding calls the component’s selectHero method when the user clicked a hero’s name.
• The [(ngModel)]two-way data binding is an important fourth form that combines property and event binding in a single notation,using ngModel directive.
  Angular processes all data bindings once per JavaScript cycle,from the root of the application component tree through all child components.
  Data binding playing an important role in commutation between a template and its component.
  
  Data binding is also important for commutation between parent and child components.
  

Directives

Angular templates are dynamic.When Angular renders them,it transforms the DOM according to the instructions given by directives.
A directive is a class with @Directive director.A component is a directive-with-a-template ;a @component decorator is actually a @directive decorator extended with template-oriented features.
Two other kinds of directives exist:structural and attribute directives.
They tend to appear within an element tag as attributes do,sometimes by name but more often as the target of an assignment or a binding.
Structural directives alter layout by adding ,removing,and replacing elements in DOM.Example:

<li *ngFor="let hero of heroes"></li><hero-detail *ngIf="selectedHero"></hero-detail>

Attribute directives alter the appearance or behavior of an existing element.In templates they looks like regular HTML attributes,hence and the name.Example:

<input [(ngModel)]="hero.name">

Services

Service is a broad category encompassing any value,function,or feature that your application needs.
Almost everything can be a service.A service is typically a class with a narrow,well-defined purpose.It should do something specific and do it well.
There is no specifically Angular about services. Angular has no definition of a service.There is no service base class,and no place to register a service.
Yet services are fundamental to any Angular application.Components are big consumers of services.
Example:

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

export class HeroService {  private heroes: Hero[] = [];  constructor(    private backend: BackendService,    private logger: Logger) { }  getHeroes() {    this.backend.getAll(Hero).then( (heroes: Hero[]) => {      this.logger.log(`Fetched ${heroes.length} heroes.`);      this.heroes.push(...heroes); // fill cache    });    return this.heroes;  }}

Components should be lean.They don’t fetch data from server,validate user input,or log directly to the console.They delegate such tasks to services.
A component’s job is to enable user experience and nothing more. It mediates between the view and the application logic.A good component presents properties and methods for data binding.It delegates everything nontrivial to services.

Dependency injection

**Dependency injection **is a way to supply a new instance of a class with the fully-formed dependencies it requires.Most dependencies are services.Angular uses dependency injection to provide new components with the services they need.
Angular can tell which services a component need by looking at the type of its constructor parameters.Example:

constructor(private service: HeroService) { }

When Angular creates a component,its first ask a injector for the services the component needs.
An injector maintains a container of service instances that it has previously created.
The process of HeroService injection looks a bit like this:

需要记住的关于依赖注入的要点是：

• Dependency injection is wired into the Angular framework and used everywhere.
• The injector is the main mechanism.
  
  • An injector maintains a container of service instances that it created.
  • An injector can create a new service instance from a provider.
• A provider is a recipe for creating a service.
• Register providers with injectors.