1. 程式人生 > >angular6開發不完全筆記(一)

angular6開發不完全筆記(一)

ref 檢查 ack webp interface -- dir wiki lint

新建項目

請在終端/控制臺窗口中運行 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

  • 開發環境項目如開始對接接口需要配置本地代理
  1. 一般在根目錄下添加proxy.config.json文件
{
  "/api": {
    "target": "http://xxx.xxx.com",
    "secure": false,
    // "logLevel":"debug",
    "changeOrigin": true,
    "pathRewrite":{
      "^/api":""
    }
  }
}
  1. 文件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

項目開發

  1. 生成組件
  • ng g c component-name 生成在src下全局組件
  • ng g c module-name/component-name 組件生成在某模塊下src下,並聲明註冊該模塊
  • ng g c path/component-name 組件生成在項目path路徑下,默認註冊父模塊,由父模塊決定是否是全局組件還是某模塊組件;

禁止生成spec.ts文件

  1. 生成模塊 ng g m module-name 同上
    其他參數
  • --routing 生成路由模塊。
  • --module 允許指定聲明模塊

    綜上: ng g m module-name --routing --module module-name

  1. 生成服務 ng g s service-name 同上

  2. 生成管道(原1.x中過濾器) ng g p pipe-name

  3. 生成指令 ng g d directive-name
    指令分 屬性型指令和結構型指令

  4. 生成class ng g cl class-name class-mame一般首字母大寫,駝峰

  5. 生成接口interface ng g i interface-name 接口為ts特性 類型檢查 聲明參數類型

更多參數參考 ng generate

編譯項目

ng buildnpm 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開發不完全筆記(一)