angular2.x 學習筆記 -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。
- 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關聯起來。