使用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的文章.