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關聯起來。