angular6開發不完全筆記(一)
新建項目
請在終端/控制臺窗口中運行 ng -v
命令。 確定您已安裝@angular/cli
if沒有執行 npm install -g @angular/cli
全局安裝 Angular CLI。
ng new project-name
就具體項目開發前調研技術棧追加相關參數
樣式style 如
--style=scss
value值可以是(css | scss | sass | less | stylus )等項目中使用路由routing 如
--routing
生成routing module前綴 prefix 如
--prefix
或-p
默認為app,參數自定義 比如--prefix=wn
後話
angular.json 文件中
"prefix": "app"
, 會更改為"prefix": "wn"
tslint驗證規則 項目中所有的組件前綴都改為wn
開頭的 index.html文件<app-root></app-root>
變為<wn-root><wn-root>
所有ng g c component-name
生成的組件 prefix默認時使用<app-componet-name></app-componet-name>
自定義前綴後<wn-componet-name></wn-componet-name>
綜合上述 ng new project-name --style=scss --routing --prefix=wn
更多參數參考 ng new
啟動項目
ng serve
或者 npm run start
- 開發環境項目如開始對接接口需要配置本地代理
- 一般在根目錄下添加proxy.config.json文件
{ "/api": { "target": "http://xxx.xxx.com", "secure": false, // "logLevel":"debug", "changeOrigin": true, "pathRewrite":{ "^/api":"" } } }
- 文件package.json中scripts 下 start的value值
ng serve --proxy-config proxy.config.json
或者在angular.json 中 serve下 options添加屬性"proxyConfig":"proxy.config.json"
ng serve 其他參數
- 接口默認4200
--port 4201
- 啟動時自動打開瀏覽器
--open
簡寫-o
- 用host指定運行主機
--host 0.0.0.0
或--public-host 192.168.1.111
指定瀏覽器客戶端將使用的URL - 正在生成的應用程序的基URL
--base-href /admin/
或者--base-href http://www.example.com/
相當於index.html添加html標簽 屬性href規定頁面中所有相對鏈接的基準 URL。 如 <base href="http://www.example.com/">
註:參數值後面一定要多個/
結尾,否則無效
綜合上述1(未對接) ng serve --port 4201 --open
綜合上述2 ng serve --proxy-config proxy.config.json --host 0.0.0.0 --port 4201 --open
更多參數參考 ng serve
項目開發
- 生成組件
ng g c component-name
生成在src下全局組件ng g c module-name/component-name
組件生成在某模塊下src下,並聲明註冊該模塊ng g c path/component-name
組件生成在項目path路徑下,默認註冊父模塊,由父模塊決定是否是全局組件還是某模塊組件;
禁止生成spec.ts文件
- 生成模塊
ng g m module-name
同上
其他參數
--routing
生成路由模塊。
--module
允許指定聲明模塊綜上:
ng g m module-name --routing --module module-name
生成服務
ng g s service-name
同上生成管道(原1.x中過濾器)
ng g p pipe-name
生成指令
ng g d directive-name
指令分 屬性型指令和結構型指令生成class
ng g cl class-name
class-mame一般首字母大寫,駝峰生成接口interface
ng g i interface-name
接口為ts特性 類型檢查 聲明參數類型
更多參數參考 ng generate
編譯項目
ng build
或 npm run build
參數
--base-href /myUrl/
相當於在index.html中添加,默認 --prod
通過UglifyJS 刪除更多未使用的代碼,使項目編譯後更小體積--output-hashing all
編譯後輸出文件名以哈希模式,便於緩存--stats-json
生成一個“stats.json”文件,可以使用諸如:webpack bundle analyzer‘或https://webpack.github.io/analyse.等工具進行前端分析。--aot
啟用aot預編譯--build-optimizer
使用“aot”選項時啟用@angular-devkit/build-optimizer 優化。
更多參數參考 ng build
angular6開發不完全筆記(一)