angular2.0 筆記 - 01

angular2.0 學習筆記

### 1.angular-cli 經常使用命令記錄

詳細教程 angular cli官網 有，這裏不詳細說明,感興趣的能夠自行到官網看，一下僅記錄本人到學習過程經常使用到的命令

1.建立項目 ng new

ng new project-name 

  exp:
  ng new my-app

2.啓動項目 ng serve

參數名	類型	默認值	做用	exp
--port	number	4200	自定義端口	ng serve --port 4201

3.建立module

ng generate module module-name

  // 簡寫：
  ng g m moduleName

  // 新建帶對應路由的module
  ng generate module my-module-name --routing

  // 簡寫 
  ng g m my-module --routing

  // 檢查建立時檢查module是否存在
  ng g m my-module --spec

4.建立 component

ng generate component component-name (options)

  // 簡寫
  ng g c component-name

  // options exp 
  // 在src/app 目錄下生成component-name 組件
  ng g c component-name --flat true

如下是components options說明

參數	類型	默認值	做用
--flat	boolean	false	在src/app目錄下生成 component 文件，而不是在當前目錄下
--inline-template	boolean	false	使用 inline template 而不是獨立的 html template 文件
--inline-style	boolean	false	使用 inline style，而不是獨立的style 文件
--spec	boolean	false	是否生成component對應的 spec 單元測試ts文件

5.建立指令 ng directive

ng generate directive my-directive (options)

  // 簡寫
  ng g d my-directive

  // options exp 
  // 在src/app 目錄下生成 my-directive 指令
  ng g d my-directive --flat true

ng directive 指令 options 參數 說明

參數	類型	默認值	做用
--flat	boolean	false	在src/app目錄下生成 derective 文件，而不是在當前目錄下
--spec	boolean	false	是否生成directive對應的 spec 單元測試ts文件

6.建立service

ng generate service service-name (options)

  // 簡寫
  ng g s service-name

ng service options 說明

參數	類型	默認值	做用
--flat	boolean	false	在src/app目錄下生成 service 文件，而不是在當前目錄下
--spec	boolean	false	是否生成service對應的 spec 單元測試ts文件

7.構建 ng build

ng build

  // 設置 輸出文件位置 爲 myDist 文件夾
  ng build --output-path myDist

2.angular(簡稱ng) 筆記 一下

此筆記不會從0到1講解，僅作爲記錄本人學習angular2.x以上版本到學習筆記，若有問題能夠提問，但願我遇到到問題能夠幫助到你到學習，若有一切不理解到問題，請移步到 angular官方文檔 或 angular中文文檔 查看更詳細的說明

因爲本人原先是使用vuejs和reactjs爲主，因此有不少時候都是以vue做爲對比例子理解，若有說得不清楚的，歡迎提bug。

1. ng 架構 主要由4大部分組成

ng 架構
模塊	組件	服務與依賴注入	路由

2.模塊
ng的模塊，理解起來跟我之前理解的模塊還真不同。ng模塊須要經過NgModule去定義，並且ng的模塊在個人理解概念上是一個相對獨立的集合體，模塊聲明瞭當前模塊使用到的相關組件、指令、管道、服務和一些編譯配置。對比與vue的組件理解，ng模塊顯得略爲有點麻煩，但也更爲清楚的表達了模塊和組件的關係，組件和模塊不是一個意思。vue的模塊，更多時候是vue工程已經幫開發者處理好了，不用本身去定義模塊，只須要關注組件業務開發便可。固然，vue的組件也是須要註冊到vue對象裏面到，能夠在全局註冊，也能夠註冊到當前使用到組件，在組件註冊這裏，vue和ng都是同樣須要手動註冊。

import {NgModule} from '@angular/core';
  import {BrowserModule} from '@angular/platform-browser';
  @NgModule({
    imports: [BrowserModule], // 本模塊須要注入的其餘模塊‘
    /*
    * export
    * 本模塊導出的組件、指令、管道，若是其餘模塊引入了本模塊，在其餘模塊能夠直接使用本模塊輸出的組件、指令和管道
    */
    exports: [],
    // providers本模塊向全局服務中貢獻的服務建立器，本人暫時也不知道是啥，後期研究明白了再單獨寫一篇補上吧
    providers: [Logger], 
    // bootstrap 指定了本模塊啓動時，應該啓動的組件
    bootstrap: [],
    // id 模塊ID,用於使用getModuleFactory區分模塊
    id: 'myApp'
  })
  export class AppModule {}

以上註解有部分借鑑於 石頭皮的ANGULAR2_NGMODULE模塊詳解

3.組件
ng的組件，就是但存的組件，跟vue的組件是相似的東西。只不過ng的組件須要@Component裝飾器定義一些組件配置，包括 selector, template/templateUrl, providers, styles/styleUrls等。而後組件保安有模版、指令、數據綁定、管道(filter)、事件/屬性綁定、

4.服務與依賴注入
這個其實與angularjs差異不大，服務仍是能夠用於組件之間的數據通信，注入讓服務更靈活，須要時注入。

5.路由 定義導航的規則，而且把導航與組件或module關聯起來。