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

ng? new??

ng generate

ng serve??

ng test?

ng build

angular CLI? ??

Amber CLI

webpack

angular cli 學(xué)習(xí)筆記：

開發(fā)，組件，打包，測試

開發(fā)結(jié)構(gòu)和運(yùn)行結(jié)構(gòu)

angular? cli 進(jìn)行項(xiàng)目的構(gòu)建

tips ： angular 2

? ? ? ??

Angular 2簡介

????開發(fā)：效率

????運(yùn)行：效果

功能簡介

????快速創(chuàng)建Angular 2項(xiàng)目及組件（new generate）

????使用Angular CLI能夠進(jìn)行開發(fā)同步（serve）

????使用Angular CLI簡單進(jìn)行測試和打包（test build）

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

ng new my-app --skip-install //阻止npm安裝

cd my-app

ng serve

cnpm install -g @angular/cli

angular2 中的組件 new generate？怎么使用

使用淘寶鏡像安裝Angular CLI

補(bǔ)充：其實(shí)不需要，只需要設(shè)置鏡像源npm就可以了npm config set registry https://registry.npm.taobao.org，然后還是用npm安裝。

項(xiàng)目構(gòu)建步驟

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

由此啟動第一個(gè)組件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ā)的引用錯(cuò)誤；并壓縮文件，從而達(dá)到優(yōu)化目的。

ls -alh dist/ 查看 dist 目錄里面的文件類型

du -h? dist/? 查看 dist 目錄的里面的文件的大小

ng build --prod? 最終打包上線? 【去掉一些dubug】

1. 代碼打包：ng bulid

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

3. 去除各種測試優(yōu)化的打包命令：ng bulid -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 --port 4201

前者花費(fèi)時(shí)間太久，改良后

普通創(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

項(xiàng)目的構(gòu)建

1111111

改變端口號：ng serve --port 4201

Ng new 簡介

參數(shù)分類：

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

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

展示ng的所有命令：ng help

進(jìn)入目錄某一文件夾下查看其內(nèi)容：vim 文件路徑。win下沒有這個(gè)命令，安裝個(gè)git即可解決此問題。

操作步驟1：

????ng new my-app(項(xiàng)目名稱)

????cd my-app

????ng serve

操作步驟2：

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

????cd my-app

????cnpm install

????ng serve

此課程的編輯器是Atom。

安裝步驟：cnpm install -g @angular/cli.

若是想安裝某個(gè)版本的話：npm install -g @angular/cli@1.4.10

查看是否安裝成功：ng version，若安裝成功的話，會顯示angular的版本、node的版本、操作系統(tǒng)的版本。

安裝國內(nèi)淘寶鏡像：npm install -g cnpm --registry=https://registry.npm.taobao.org

ls -alh dist/ 查看 dist 目錄里面的文件類型

du -h? dist/? 查看 dist 目錄的里面的文件的大小

ng build --prod? 最終打包上線? 【去掉一些dubug】