angular2.0 筆記 - 01

AnthonyHan 發布于2019-08-23 16:48 / 1750人閱讀

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

GPU云服務器云服務器 php01 Beta01 java01++ database01

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103324.html

angular2.0 筆記 - 02

摘要：此屬性包含了本項目中所有的子項目的配置信息。稍后單獨拿這個屬性詳細講解其注意點。 angular2.0 筆記 1.angular-cli 之 angular.json 配置表參數說明簡單創建一個demo項目 ng new project-demo { $schema: ./node_modules/@angular/cli/lib/config/schema.json, ve...

tain335 2019-08-23 16:49 評論0 收藏0
angular入門

摘要：學習入門第一課步驟創建應用程序的項目文件夾和定義包的依賴關系和特殊項目設置文件創建文件編譯 angular2 學習入門第一課步驟 Install Node.js 創建應用程序的項目文件夾和定義包的依賴關系和特殊項目設置 Create the app’s Angular root component Add main.ts, identifying the root componen...

Yangder 2019-08-20 10:11 評論0 收藏0
angular入門

摘要：學習入門第一課步驟創建應用程序的項目文件夾和定義包的依賴關系和特殊項目設置文件創建文件編譯 angular2 學習入門第一課步驟 Install Node.js 創建應用程序的項目文件夾和定義包的依賴關系和特殊項目設置 Create the app’s Angular root component Add main.ts, identifying the root componen...

Gu_Yan 2019-08-01 15:33 評論0 收藏0
關于angular2.0的i18n國際化的解決方法，分享一下給大家，有錯大家指出來互相學習哈。。。

摘要：關于的，網上的資料也不多，剛好項目需要用到，就自己去查閱各種資料，自己整理了出來，分享下出來給大家吧。關于angular2的i18n，網上的資料也不多，剛好項目需要用到，就自己去查閱各種資料，自己整理了出來，分享下出來給大家吧。廢話不多說！直接上代碼：首先我們肯定要新建一個文件，叫aaa（網上angular-cli教程很多），cmd打開命令進入到隨便一個目錄底下： ng new a...

娣辯孩 2019-08-20 18:13 評論0 收藏0