第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

Angular2 項目構建及運行過程

1、安裝npm，git等

2、創(chuàng)建angular2項目? ? ng? new? ?my-app

3、在項目中添加Component 或者 Service? ng g component/service

4、編譯并運行? ng? serve --port 4201

5、單元測試 ng test

6、打包發(fā)布：ng build? --prod? --aot

知識點：

1、Angular CLI 基于Amber和Webpack，是Angular2的標準構建工具

? ? Amber的構建能力：目錄結構、模塊關系等的創(chuàng)建

? ? Webpack的調試、測試、打包能力

2、Angular2項目文件作用

????--packgae.json? ?包含所有應用的類庫

????--angular.json? ? 配置編譯過程中使用的路徑，依賴關系，圖標樣式、環(huán)境信息等

????--e2e? 測試目錄

????--node-module 依賴庫的位置

????--src? 實際項目目錄

3、Angular2項目的入口數(shù)據(jù)走向

入口文件是：main.ts

它調用了app/app.module中的AppModule

由此啟動第一個組件AppComponment

4、Ng build 優(yōu)化

1、預編譯技術? ?--aot

????壓縮了Angular框架代碼，將需要解釋--執(zhí)行的代碼，變?yōu)榭梢灾苯訄?zhí)行的代碼，實現(xiàn)按需加載，達到優(yōu)化的目的

2、生產(chǎn)模式

????ng build 默認是在開發(fā)模式下打包代碼，有大量的Debug開關，開發(fā)調試，打印輸出等不必要的代碼；

????生成模式去掉冗余代碼，合并公用文件，減少了請求的次數(shù)和體積，提高效率；使用哈希碼標記文件，減少由CDN更新引發(fā)的引用錯誤；并壓縮文件，從而達到優(yōu)化目的。

ng build 打包指令

（1）功能合并

（2）減少處理

（3）體積減少

編譯產(chǎn)生的文件放在dist文件下

ng2特殊優(yōu)化方式：預編譯aot

好處：將angular框架壓縮，將項目體積減少

處理指令：

ng build --aot

生產(chǎn)模式打包

ng build -prod

ng test 單元測試

測試文件(xxx.spec.ts)

在頁面顯示測試結果分析

ng generate

（1）創(chuàng)建組件

ng generate component test

實際上創(chuàng)建了組件的模版文件（html）、樣式文件（css）、

測試文件（spec.ts）、ts文件，并且更新了模塊文件，將組件

添加到模塊中（實際上是在里面聲明組件）。

（2）創(chuàng)建服務

ng generate service test -m app.module

注冊到app.module里面

實際上創(chuàng)建了服務的測試文件（spec.ts）、ts文件，

并且更新了模塊文件，將服務添加到模塊中（實際上是

在里面聲明服務）。

ng serve

設置不同的端口號

ng serve --port 4201

Ng new簡介

參數(shù)分類

（1）開發(fā)輔助（--dry-run）

（2）修改項目默認值（--perfix）

ng new 列表

通過ng help查詢

--dry-run:并沒有實際創(chuàng)建項目

--verbose:輸出更多l(xiāng)og

--skip--install：不安裝依賴庫（跳過安裝）

--routing：創(chuàng)建相應的路由映射

普通創(chuàng)建項目

(1)創(chuàng)建my-app項目

ng new my-app?

(2)進入文件夾cd my-app

(3)啟動運行ng服務

ng serve

快速創(chuàng)建項目

（1）--skip-install阻止npm安裝依賴庫

ng new my-app --skip-install

（2）進入文件夾cd my-app

（3）運用淘寶鏡像安裝依賴庫

cnpm install?

（4）啟動運行ng服務

ng serve

其中ng server經(jīng)過兩個過程，一個是編譯代碼，另一個是啟動服務

e2e是測試目錄

epec.ts是測試ts

安裝Angular CLI

（1）安裝淘寶鏡像,使得源不同

npm install -g cnpm?--registry=https://registry.npm.taobao.org

（2）安裝Angular CLI

cnpm install -g @angular/cli

（3）檢測安裝是否成功

ng version

ng new (name) --skip install

cd (name)

cnpm install

ng serve

1. 代碼打包：ng bulid

2. 壓縮優(yōu)化瀏覽器代碼打包命令：ng build --aot

3. 去除各種測試優(yōu)化的打包命令：ng bulid -prod

ng new 指令

參數(shù)分類

開發(fā)輔助 --dry-run

修改項目默認值 --prefix

angular cli 初始化項目

1. ng new my-app

2. cd my-app

3. ng serve

改良步驟

1. ? ng new my-app --skip-install

2. cd my-app

3. cnpm install

4. ng serve
   

1. 代碼打包：ng bulid

2. 壓縮優(yōu)化瀏覽器代碼打包命令：ng build --aot

3. 去除各種測試優(yōu)化的打包命令：ng bulid -prod

打包后的大小：1 > 2 >>3