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.