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

Angular2 項(xiàng)目構(gòu)建及運(yùn)行過程

1、安裝npm，git等

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

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

4、編譯并運(yùn)行? ng? serve --port 4201

5、單元測試 ng test

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

知識點(diǎn)：

1、Angular CLI 基于Amber和Webpack，是Angular2的標(biāo)準(zhǔn)構(gòu)建工具

? ? Amber的構(gòu)建能力：目錄結(jié)構(gòu)、模塊關(guān)系等的創(chuàng)建

? ? Webpack的調(diào)試、測試、打包能力

2、Angular2項(xiàng)目文件作用

????--packgae.json? ?包含所有應(yīng)用的類庫

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

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

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

????--src? 實(shí)際項(xiàng)目目錄

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

入口文件是：main.ts

它調(diào)用了app/app.module中的AppModule

由此啟動第一個組件AppComponment

4、Ng build 優(yōu)化

1、預(yù)編譯技術(shù)? ?--aot

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

2、生產(chǎn)模式

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

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

ng build 打包指令

（1）功能合并

（2）減少處理

（3）體積減少

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

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

好處：將angular框架壓縮，將項(xiàng)目體積減少

處理指令：

ng build --aot

生產(chǎn)模式打包

ng build -prod

ng test 單元測試

測試文件(xxx.spec.ts)

在頁面顯示測試結(jié)果分析

ng generate

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

ng generate component test

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

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

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

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

ng generate service test -m app.module

注冊到app.module里面

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

并且更新了模塊文件，將服務(wù)添加到模塊中（實(shí)際上是

在里面聲明服務(wù)）。

ng serve

設(shè)置不同的端口號

ng serve --port 4201

Ng new簡介

參數(shù)分類

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

（2）修改項(xiàng)目默認(rèn)值（--perfix）

ng new 列表

通過ng help查詢

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

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

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

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

普通創(chuàng)建項(xiàng)目

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

ng new my-app?

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

(3)啟動運(yùn)行ng服務(wù)

ng serve

快速創(chuàng)建項(xiàng)目

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

ng new my-app --skip-install

（2）進(jìn)入文件夾cd my-app

（3）運(yùn)用淘寶鏡像安裝依賴庫

cnpm install?

（4）啟動運(yùn)行ng服務(wù)

ng serve

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

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

修改項(xiàng)目默認(rèn)值 --prefix

angular cli 初始化項(xiàng)目

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