理解 angular2 基礎概念和結構 ----angular2系列（二)

前言：

  angular2官方將框架按如下結構劃分：

1. Module
2. Component
3. Template
4. Metadata
5. Data Binding
6. Directive
7. Service
8. Dependency Injection

  本文簡單介紹一下，這些知識點，以淺入的方式理解angular2的基礎概念和結構。

 

1、Module （模塊）

 

• Angular 是模塊化的.
• Modules 導出 classes, function, values ， 以便在其餘模塊導入使用.
• angular應用由模塊組成，每一個模塊都作此模塊相關的事情

 

 組件、方法、類、服務等，他們均可以成爲模塊。

 

 

module基本使用

　　自定義一個模塊文件和main入口文件：

　　　　app.component.ts

　　　　main.ts

　　

export class AppComponent { }  //新建 app.component.ts 並導出當前自定義模塊：

　　

import { AppComponent } from './app.component';  //在入口文件main.ts 引用自定義模塊app.component：

　　

import { Component } from 'angular/core';  //引入angular自帶模塊Component：

 

引用自定義模塊，須要加上路徑，ng會根據路徑找到模塊，而框架自己的模塊不須要路徑，它會自動匹配到相應模塊。

學習過node的，相信都應該理解。

 

2、Component （組件）

　　在angular2中，Component 是咱們構建頁面元素和邏輯的主要方式，而在angular1中要實現這些須要directives, controllers和scope。

在angular2， 他們都被合成到了Component裏。

例子：

import {Component} from 'angular2/core'

@Component({
  selector: 'my-component',
  template: '<div>Hello my name is {{name}}. <button (click)="sayMyName()">Say my name</button></div>'
})
export class MyComponent {
  constructor() {
    this.name = 'Max'
  }
  sayMyName() {
    console.log('My name is', this.name)
  }
}

　　selector 指定了自定義標籤，template配置好了dom元素、綁定了數據和事件， this實際代替了angular1中的scope

　　最後，在html裏咱們能夠用<my-component></my-component>標籤建立當前Component。

 

3、Template （模板）

　　angular2 的 html template大部分仍是通常的html，只是會混合一些框架可識別的屬性或者指令，好比：()、{}、 {{}}、 [()] 等。實際就和通常的模板引擎差很少

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

 

4、Metadata （元數據）

　　什麼是元數據？元數據是關於數據的組織、數據域及其關係的信息。

在angular2中，以下例：

selector、templateUrl、directives、providers 他們都是元數據

import {Component} from 'angular2/core';
@Component({
  selector:    'hero-list',
  templateUrl: 'app/hero-list.component.html',
  directives:  [HeroDetailComponent],
  providers:   [HeroService]
})
export class HeroesComponent { ... }

 

　　template, metadata, component 相互做用組成視圖，而metadata就是關聯組件和模板的數據。

 

5、Data Binding （數據綁定）

　　用過angular的一個特點就是雙向綁定，這個在ng1裏就已經赫赫有名了。

　　以下圖，

圖中告知了數據的流動方向，

　　{{value}}和[property]='value'，變量綁定在Component中，只要在Component中控制變量值改變，dom中就會更新，它是單向的。

　　(event)是事件綁定，是單向的，在dom中觸發，從而告知Component。

　　[(ng-model)]或者[(ngModel)]實現雙向綁定， angular1中，咱們要實現雙向綁定是用ng-model="xx"，angular2中從用法上來講確實只是多加了兩個括號。

　　angular2中有個通用規則，ng-model ngModel，中線分割和駝峯命名相等。

 

6、Directive（指令）

 　　angular模板是動態的，渲染模板的時候dom根據directive的規則轉換並渲染。

<div *ngFor="let hero of heroes"></div>  //*ngFor循環遍歷heroes

 

<input [(ngModel)]="hero.name">  //[(no-model])雙向綁定

　　以上這些都是angular2自帶的指令。

　　咱們也能夠本身定義指令。

　　單從概念上來講，angular1和2的指令幾乎是同樣的。他們改變的不過是寫法和使用方式。

 

7、Service(服務）

 　　幾乎一切咱們開發的代碼均可以算是服務。好比：一個特定的class、一個工具類或者一個組件。

服務就是一個概念，angular自己沒有爲它實現什麼基類。angular只是讓咱們遵循一個規則，按照規則，咱們寫出咱們想要的實質代碼，

組成一個個小的服務，最後經過框架把它們組成咱們的應用。這些服務都經過 「依賴注入」（Dependency Injection) 的方式爲咱們的應用提供服務。

 

8、Dependency Injection（依賴注入)

　　「依賴注入」鏈接和應用在整個框架，當你想在一個「組件」裏使用一個「服務」時，你須要經過「依賴注入」的方式，把服務載入到當前組件，

並在組件申明使用它。有兩種方法

　　第一種：

bootstrap(AppComponent, [TheService]);

　　這樣直接把這個service注入到整個app裏面。而後這個app-component包括它全部的子模塊都能使用 TheService這個service。

在Angular2裏面全部的service是單例的，一旦在當前模塊生成了單例service，它的子模塊都將共同使用它。他們都將操做同一個service。

　　若是須要每一個子模塊都使用惟一的service，就要使用第二種方式：

@Component({
  selector: 'hero-editor',
  providers: [RestoreService]
})

　　在component的providers裏面直接注入service。

　　「依賴注入」 就是把咱們須要的服務提供給咱們應用的其餘服務，讓它們之間可以相互使用。

 

小結：

　　咱們這裏大體介紹了下angular2的結構和這八個基礎知識，從入門來講，咱們僅僅是瞭解一些淺顯的知識。

搞清楚基本結構和它們之間的關係，有利於後期的深刻學習和使用。

經過本文， 再實踐一下angular2官網的 5 MIN QUICKSTART 會不會要好理解一些了呢？

最後附一張總結圖：

 

 

　　

　　以上圖片來自angular2官網，內容通過本人理解過濾，此文僅僅是學習筆記分享, 理解不深， 有望後續更新。