創建組件,指令,過濾器和服務
# 創建組件
ng generate component my-new-component
# 創建組件別名
ng g component my-new-component # using the alias
# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ../newer-cmp
# your component will be generated in src/app/newer-cmp
# if in the directory src/app you can also run
ng g component feature/new-cmp
# and your component will be generated in src/app/feature/new-cmp
可輔助創建資源的功能串列:
| Scaffold | Usage |
|---|---|
| Component | ng g component my-new-component |
| Directive | ng g directive my-new-directive |
| Pipe | ng g pipe my-new-pipe |
| Service | ng g service my-new-service |
| Class | ng g class my-new-class |
| Guard | ng g guard my-new-guard |
| Interface | ng g interface my-new-interface |
| Enum | ng g enum my-new-enum |
| Module | ng g module my-module |
angular-cli will add reference to components, directives and pipes automatically in the app.module.ts. If you need to add this references to another custom module, follow this steps:
ng g module new-moduleto create a new module- call
ng g component new-module/new-component
This should add the new component, directive or pipe reference to the new-module you've created.
在腳手架專案中使用 SASS 前處理器
SASS 是一款非常好用的 CSS 預編譯器,Bootstrap 官方從4.0開始已經切換到了 SASS,
如果想要在腳手架專案中使用 SASS 前處理器,我們需要自己手動修改一些組態檔,請按照以下步驟依次修改:
- angular-cli.json 里面的 styles.css 后綴改成
.scss

當你后面再使用 ng g c *** 自動創建組件的時候,默認就會生成 .scss 后綴的樣式檔案了,
- angular-cli.json 里面的 styleExt 改成 .scss

- src 下面 styles.css 改成 styles.scss

- app.component.scss

- app.component.ts 里面對應修改

改完之后,重新 ng serve,打開瀏覽器查看效果,
SASS 的 API 請參考官方網站 ,
SASS 只是一個預編譯器,它支持所有 CSS 原生語法,利用 SASS 可以提升你的 CSS 編碼效率,增強 CSS 代碼的可維護性,但是千萬不要幻想從此就可以不用學習 CSS 基礎知識了,
更新 Angular CLI
其它
切換包管理器
# 默認為 npm
ng set --global packageManager=npm
# 將包管理器設定為 yarn
ng set --global packageManager=yarn
# 將包管理器設定為 cnpm
ng set --global packageManager=cnpm
詳細參考檔案
https://github.com/angular/angular-cli/wiki
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/153831.html
標籤:JavaScript
上一篇:ng-http
