Angular --基本構造

官網已經很清楚了，在這裏記錄下，是爲了學習更方便。

本文內容來源angular官網
轉載請註明出處我的博客http://www.lostbug.cn

簡介

Angular 是一個用HTML和JavaScript或者一個可以編譯成JavaScript的語言（TypeScript .el）,來構建客戶端應用的框架。

Angular主要構造塊

• Modules
• Components
• Templates
• Metadata
• Data binding
• Directives
• Services
• Dependency injection

Modules

Angular apps are modular and Angular has its own modularity system called Angular module or NgModules.

Every Angular app has at least one Angular module class, the root module,conventionally named AppModule.

One Angular app may have no or many feature modules,
每個模塊都是一個內聚的代碼塊，專注於某個應用領域、工作流或緊密相關的功能。
An Angular module,whether a root or feature,is a class with an @NgModule decorator.

NgModule is a decorator function that takes single metadata object whose properties describe the module.
The most important properties are:

• declarations- the view classes that belong to this module.Angular has three kinds of view classes: components,directives, and pipes.
• exports-the subset of declarations that should be visible and usable in the component templates of other modules.
• imports-other module whose exported classes are needed by component templates declared in thismodule.
• providers-creators of servicesthat this module contributs to the global collection of service;they become accessible in all parts of the app.
• bootstrap -the main application view,called the root component,that hosts all other app views.Only the root module should set this bootstrapproperty.

Example:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Launch an application by bootstrapping its root module.During development you’re likely to bootstrap the AppModule in a main.ts file like this one:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Components

A component controls a patch of screen called a view.
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 an methods.

export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private service: HeroService) { }

  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }

  selectHero(hero: Hero) { this.selectedHero = hero; }
}

Angular creates,updates,and destroys components as the user moves through the application.Your app can take action at each moment in this lifecycle through optional lifecycle hooks,like ngOnInit() declared above.

Templates

You define a component’s view with its companion template.A template is a form of HTML that tells Angular how to render the component.
Example:

<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

Although this template uses typical HTML elements like <h2> and <p>,it also has some differences.Code like *ngFor,{{hero.name}},(click),[hero],and <hero-detail> uses Angular’s template syntax.
In the last line of the template,the <hero-detail> tag is a custom element that represents a new component,HeroDetailComponent.

Metadata

Metadata tells Angular how to process a class.
In fact, Component is just a class. it’s not a component until you tell Angular about it.

To tell Angular that Component is a component,attach metadata to the class.

In TypeScript,you attach metadata by using a decorator.Example:

@Component({
  selector:    'hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

Here is the @Component decorator,which identifies the class immediately below as a component class.

The @Component decorator takes a required configuration object with the information Angular needs to create and present the component and its view.

Here are a few of the most useful *@Component * configuration options:

• selector: CSS selector.
• templateUrl: module-relative address of this component’s HTML template.
• providers:array of dependency injection providers for services that the component requires.This is one way to tell Angular that the component’s constructor requires a HeroService so it can get the list of the heroes to display.

The metadata in the @component tells Angular where to get the major building blocks you specify for the component.

The template,metadata,and component together describe a view.