成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

angular2.0 筆記 - 01

AnthonyHan / 1759人閱讀

angular2.0 學(xué)習(xí)筆記

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

詳細(xì)教程 angular cli官網(wǎng) 有，這里不詳細(xì)說明,感興趣的可以自行到官網(wǎng)看，一下僅記錄本人到學(xué)習(xí)過程常用到的命令

1.創(chuàng)建項(xiàng)目 ng new

  ng new project-name 

  exp:
  ng new my-app

2.啟動(dòng)項(xiàng)目 ng serve

參數(shù)名 類型 默認(rèn)值 作用 exp
--port number 4200 自定義端口 ng serve --port 4201

3.創(chuàng)建module

  ng generate module module-name

  // 簡(jiǎn)寫：
  ng g m moduleName

  // 新建帶對(duì)應(yīng)路由的module
  ng generate module my-module-name --routing

  // 簡(jiǎn)寫 
  ng g m my-module --routing

  // 檢查創(chuàng)建時(shí)檢查module是否存在
  ng g m my-module --spec

4.創(chuàng)建 component

  ng generate component component-name (options)

  // 簡(jiǎn)寫
  ng g c component-name

  // options exp 
  // 在src/app 目錄下生成component-name 組件
  ng g c component-name --flat true 
以下是components options說明
參數(shù) 類型 默認(rèn)值 作用
--flat boolean false 在src/app目錄下生成 component 文件，而不是在當(dāng)前目錄下
--inline-template boolean false 使用 inline template 而不是獨(dú)立的 html template 文件
--inline-style boolean false 使用 inline style，而不是獨(dú)立的style 文件
--spec boolean false 是否生成component對(duì)應(yīng)的 spec 單元測(cè)試ts文件

5.創(chuàng)建指令 ng directive

  ng generate directive my-directive (options)

  // 簡(jiǎn)寫
  ng g d my-directive

  // options exp 
  // 在src/app 目錄下生成 my-directive 指令
  ng g d my-directive --flat true 
ng directive 指令 options 參數(shù) 說明
參數(shù) 類型 默認(rèn)值 作用
--flat boolean false 在src/app目錄下生成 derective 文件，而不是在當(dāng)前目錄下
--spec boolean false 是否生成directive對(duì)應(yīng)的 spec 單元測(cè)試ts文件

6.創(chuàng)建service

  ng generate service service-name (options)

  // 簡(jiǎn)寫
  ng g s service-name
ng service options 說明
參數(shù) 類型 默認(rèn)值 作用
--flat boolean false 在src/app目錄下生成 service 文件，而不是在當(dāng)前目錄下
--spec boolean false 是否生成service對(duì)應(yīng)的 spec 單元測(cè)試ts文件

7.構(gòu)建 ng build

  ng build

  // 設(shè)置 輸出文件位置 為 myDist 文件夾
  ng build --output-path myDist
2.angular(簡(jiǎn)稱ng) 筆記 一下 
此筆記不會(huì)從0到1講解，僅做為記錄本人學(xué)習(xí)angular2.x以上版本到學(xué)習(xí)筆記，如有問題可以提問，希望我遇到到問題可以幫助到你到學(xué)習(xí)，如有一切不理解到問題，請(qǐng)移步到angular官方文檔 或 angular中文文檔 查看更詳細(xì)的說明

由于本人原先是使用vuejs和reactjs為主，所以有很多時(shí)候都是以vue作為對(duì)比例子理解，如有說得不清楚的，歡迎提bug。

ng 架構(gòu) 主要由4大部分組成

ng 架構(gòu)
模塊 組件 服務(wù)與依賴注入 路由

2.模塊
ng的模塊，理解起來跟我以前理解的模塊還真不一樣。ng模塊需要通過NgModule去定義，而且ng的模塊在我的理解概念上是一個(gè)相對(duì)獨(dú)立的集合體，模塊聲明了當(dāng)前模塊使用到的相關(guān)組件、指令、管道、服務(wù)和一些編譯配置。對(duì)比與vue的組件理解，ng模塊顯得略為有點(diǎn)麻煩，但也更為清楚的表達(dá)了模塊和組件的關(guān)系，組件和模塊不是一個(gè)意思。vue的模塊，更多時(shí)候是vue工程已經(jīng)幫開發(fā)者處理好了，不用自己去定義模塊，只需要關(guān)注組件業(yè)務(wù)開發(fā)即可。當(dāng)然，vue的組件也是需要注冊(cè)到vue對(duì)象里面到，可以在全局注冊(cè)，也可以注冊(cè)到當(dāng)前使用到組件，在組件注冊(cè)這里，vue和ng都是一樣需要手動(dòng)注冊(cè)。

  import {NgModule} from "@angular/core";
  import {BrowserModule} from "@angular/platform-browser";
  @NgModule({
    imports: [BrowserModule], // 本模塊需要注入的其他模塊‘
    /*
    * export
    * 本模塊導(dǎo)出的組件、指令、管道，如果其他模塊引入了本模塊，在其他模塊可以直接使用本模塊輸出的組件、指令和管道
    */
    exports: [],
    // providers本模塊向全局服務(wù)中貢獻(xiàn)的服務(wù)創(chuàng)建器，本人暫時(shí)也不知道是啥，后期研究明白了再多帶帶寫一篇補(bǔ)上吧
    providers: [Logger], 
    // bootstrap 指定了本模塊啟動(dòng)時(shí)，應(yīng)該啟動(dòng)的組件
    bootstrap: [],
    // id 模塊ID,用于使用getModuleFactory區(qū)分模塊
    id: "myApp"
  })
  export class AppModule {}
以上注解有部分借鑒于石頭皮的ANGULAR2_NGMODULE模塊詳解

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

4.服務(wù)與依賴注入
這個(gè)其實(shí)與angularjs差別不大，服務(wù)還是可以用于組件之間的數(shù)據(jù)通訊，注入讓服務(wù)更靈活，需要時(shí)注入。

5.路由
定義導(dǎo)航的規(guī)則，并且把導(dǎo)航與組件或module關(guān)聯(lián)起來。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103324.html

相關(guān)文章

  • angular2.0 筆記 - 02

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

    tain335 評(píng)論0 收藏0

  • angular入門

    摘要：學(xué)習(xí)入門第一課步驟創(chuàng)建應(yīng)用程序的項(xiàng)目文件夾和定義包的依賴關(guān)系和特殊項(xiàng)目設(shè)置文件創(chuàng)建文件編譯 angular2 學(xué)習(xí)入門第一課 步驟 Install Node.js 創(chuàng)建應(yīng)用程序的項(xiàng)目文件夾和定義包的依賴關(guān)系和特殊項(xiàng)目設(shè)置 Create the app’s Angular root component Add main.ts, identifying the root componen...

    Yangder 評(píng)論0 收藏0

  • angular入門

    摘要：學(xué)習(xí)入門第一課步驟創(chuàng)建應(yīng)用程序的項(xiàng)目文件夾和定義包的依賴關(guān)系和特殊項(xiàng)目設(shè)置文件創(chuàng)建文件編譯 angular2 學(xué)習(xí)入門第一課 步驟 Install Node.js 創(chuàng)建應(yīng)用程序的項(xiàng)目文件夾和定義包的依賴關(guān)系和特殊項(xiàng)目設(shè)置 Create the app’s Angular root component Add main.ts, identifying the root componen...

    Gu_Yan 評(píng)論0 收藏0

  • 關(guān)于angular2.0的i18n國(guó)際化的解決方法，分享一下給大家，有錯(cuò)大家指出來互相學(xué)習(xí)哈。。。

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

    娣辯孩 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<