使用Angular CLI生成 Angular 5項目
如果您正在使用angular, 但是沒有好好利用angular cli的話, 那麽可以看看本文.
Angular CLI 官網: https://github.com/angular/angular-cli
安裝angular cli:
npm install -g @angular/cli
不過首先要確保您安裝了比較新版本的nodejs.
今天主要通過以下幾個方面介紹Angular CLI:
- 生成項目
- 參數介紹
- 配置和自定義CLI
- 檢查和修復代碼
生成新項目:
ng new my-app
這個命令會生成一個新的項目叫做my-app並把該項目的文件放在my-app這個文件夾下.
項目生成完的時候別忘了cd進入到my-app目錄.
另一個選項是使用--dry-run參數:
ng new my-app --dry-run
使用這個參數呢, 不會真的生成項目, 而是會打印出來如果創建該項目的話哪些文件將會生成.
另外一個常用的參數是--skip-install:
ng new my-app --skip-install
這個命令作用是, 生成完項目文件之後不執行npm install這個動作.
不過以後還是需要手動執行npm install的.
使用--help參數可以查看幫助:
ng new --help
下面我要生成一個項目, 先不執行npm install:
這個速度非常快, 然後使用我最喜歡的IDE VSCode將其打開:
code .
看看整個的項目結構, 以及package.json:
scripts下面是一些預定義的項目命令:
start 是運行項目的意思, 執行npm start即可, 或者直接執行ng serve也可以.
npm build / ng build 是執行構建.......
不一一介紹了.
然後看下dependencies:
我們使用的是angular 5.2.0, 前面的^符號表示, 我們使用的版本號是大於等於5.2.0的但是肯定會小於6.
最下面是devDependencies, 裏面都是開發時用的工具庫, 可以看到angular cli就在裏面.
接下來看看angular-cli.json這個文件:
angular-cli.json:
它是angular cli針對該項目的配置文件.
裏面的prefix比較有趣, 它是所有生成的components和directives的默認前綴.
可以查看一下app.component.ts:
它的前綴就是app.
如果想更改默認前綴的話, 就可以修改angular-cli.json文件裏面的prefix屬性值了, 如果改成sales, 那麽以後生成的components和directives的前綴就是sales. 但是對已經生成的components/directives就不起作用了.
那麽如何保證生成的項目的components/directives前綴是您想要的呢?
就是使用ng new的另一個參數 --prefix:
ng new sales-app --prefix sales
這時裏面生成的component的selector就是:
angular-cli.json文件裏面的prefix:
在生成的項目裏可以看到, 同時還生成了spec文件. 如果我不想讓我的項目生成spec文件呢?
ng new也有這個參數--skip-tests:
ng new my-app2 --skip-tests
可以看到, 並沒有生成任何spec文件.
ng new的參數一共有這些:
有幾個介紹過的, 其他的例如:
--skip-git: 生成項目的時候就不會把它初始化為git repository, 默認是初始化為git repository的.
--directory: 可以設定生成的目錄, 默認是使用的項目名稱.
--style: 可以設定樣式的類型, 默認是css, 例如可以改成scss.
也可以通過--inline-style把樣式的寫法設為行內樣式, 這個默認是false的.
下面我來生成一個使用scss樣式的項目:
可以看到生成的是styles.scss, app.component.scss文件, angular cli不僅會生成scss文件, 而且也會編譯它們.
查看angular-cli.json, 可以在文件的下方看到采用的是scss樣式文件:
這樣, 以後生成的component的默認樣式文件就是scss了.
最後我想介紹一下這個參數, --routing:
如果想手動為項目配置路由的話, 還是需要一些步驟的, 所以可以使用這個參數直接生成帶路由配置的項目.
看一下項目路由文件:
再查看一下app.module:
可以看到import了AppRoutingModule.
綜上, ng new 的這些參數可以在生成項目的時候作為命令的參數聯合使用, 其中有一些參數也可以在項目生成以後通過修改angular-cli.json文件來做修改.
比較推薦的做法是:
在生成項目的時候使用: --routing, --prefix, --style, --dry-run參數. 首先通過--dry-run參數, 確保會生成哪些文件是否正確, 確認後把--dry-run參數去掉, 生成文件.
下面我生成一個項目, 並且執行npm install:
命令執行完, 可以看到如下的項目結構;
裏面有node_modules目錄了, 也就是所有的包都安裝好了, 接下來我可以運行該項目了:
ng serve -o
其中的-o(--open)參數表示運行項目的時候打開默認瀏覽器.
查看瀏覽器http://localhost:4200:
ng serve的優點是, 當代碼文件有變化的時候會自動重新構建並且刷新瀏覽器, 您可以試一下.
另外一種配置CLI的方法 ng set.
前面我介紹了使用ng new參數和修改angular-cli.json文件的方式來配置cli, 下面我介紹下通過ng set <屬性> <值> 來配置cli.
就拿當前這個項目來說, 它的默認樣式文件類型是scss:
如果我在該項目目錄執行:
ng set defaults.styleExt css
那麽該項目的設置就會改變:
如果使用參數 -g(--global), 那就會進行一個全局的配置, 這個配置會保存在一個文件裏(如果還沒有任何去安居配置的情況下這個文件並不存在), 這個文件應該在users/xxx目錄下, mac的話應該在home目錄下.
它不會影響到已經存在的項目. 但是如果新生成的項目不指定ng new的參數情況下, 默認就會采用全局的配置:
Lint:
使用命令ng lint.
首先可以查看一下幫助:
ng lint --help
--fix: 嘗試修復lint出現的錯誤.
--format: lint的輸出格式.
首先我針對上面的my-app6執行ng lint:
沒有問題.
然後我故意弄出來幾處錯誤/不規範的寫法:
然後再執行ng lint:
可以看到這些錯誤都被詳細的列了出來.
把格式化的參數加進去:
可以看到現在lint結果的顯示更直觀了一些.
下面執行ng lint --fix:
執行後lint的錯誤減少到了一個, 看下代碼:
接下來還會寫幾篇angular cli的文章.
使用Angular CLI生成 Angular 5項目