Angular CLI 安裝和使用
一、 背景介紹:
兩個概念:
- 關於
Angular
版本,Angular
官方已經統一命名Angular 1.x
統稱為Angular JS
;Angular 2.x
及以上統稱Angular
; -
CLI
是Command Line Interface的簡寫,是一種命令列介面,實現自動化開發流程,比如:ionic cli
、vue cli
等;它可以建立專案、新增檔案以及執行一大堆開發任務,比如測試、打包和釋出。
二、安裝Angular CLI
1. 首先確認安裝了node.js
和npm
// 顯示當前node和npm版本
$ node -v
$ npm -v
// node 版本高於6.9.3 npm版本高於3.0.0
2. 全域性安裝typescript
(可選)
$ npm install -g typescript
// 新建專案的時候會自動安裝typescript(非全域性)所以這裡也可以不用安裝。
3. 安裝Angular CLI
$ npm install -g @angular/cli
經過不算漫長的等待,你的Angular CLI
就裝好了。確認一下:
$ ng v
// 出現下面畫面說明安裝成功,如果不成功你可能需要uninstall一下,再重新來過
$ ng v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.1.1
node: 7.10.0
os: darwin x64
期間可能會失敗(先看錯誤資訊),可能由於node-sass
這個包被牆了,所以解決辦法有兩個:要麼用梯子,要麼用淘寶映象。
// 淘寶映象解藥
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass
當然你也可以所有的東西都從淘寶源來安裝,整個過程會快不少:
// 安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
三、新建Angular專案
1. 新建Angular
專案:
$ ng new my-app
這裡要等很久啊,大概要下載141M東西。
如果你已經建好了專案資料夾就可以使用ng init my-app
來新建專案,ng init
和ng new
的區別是ng new
會幫我們建立一個和專案名稱相同的資料夾。
趁著它在下載,來看一下執行ng new
之後Angular cli
已經幫我們幹了什麼:
$ ng new helloKeriy
installing ng
create .editorconfig
create README.md
create src/app/app.component.css // 使用HTML模板、CSS樣式和單元測試定義AppComponent元件。 它是根元件,隨著應用的成長它會成為一棵元件樹的根節點。
create src/app/app.component.html
create src/app/app.component.spec.ts
create src/app/app.component.ts // 定義AppModule,這個根模組會告訴Angular如何組裝該應用
create src/app/app.module.ts
create src/assets/.gitkeep // 這個資料夾下你可以放圖片等任何東西,在構建應用時,它們全都會拷貝到釋出包中。
create src/environments/environment.prod.ts
create src/environments/environment.ts
create src/favicon.ico // 每個網站都希望自己在書籤欄中能好看一點。 請把它換成你自己的圖示。
create src/index.html // 宿主頁面
create src/main.ts
create src/polyfills.ts
create src/styles.css // 公共樣式
create src/test.ts // 這是單元測試的主要入口點
create src/tsconfig.app.json
create src/tsconfig.spec.json
create src/typings.d.ts
create .angular-cli.json // Anguar 編譯依賴
create e2e/app.e2e-spec.ts // e2e 端對端測試目錄
create e2e/app.po.ts
create e2e/tsconfig.e2e.json
create .gitignore
create karma.conf.js
create package.json // Angular 的依賴包
create protractor.conf.js
create tsconfig.json // TypeScript 編譯器的引數
create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'helloKeriy' successfully created.
這裡也可以使用淘寶源了安裝:
$ ng new helloKeriy --skip-install // 先跳過npm安裝
$ cd helloKeriy
$ cnpm install // 使用淘寶源安裝
那麼,這時候Angular cli
幫你幹了以下這麼多事情:
- 建立
helloKeriy
目錄 - 應用程式相關的原始檔和目錄將會被建立
- 應用程式的所有依賴 (
package.json
中配置的依賴項) 將會被自動安裝 - 自動配置專案中的
TypeScript
開發環境 - 自動配置
Karma
單元測試環境 - 自動配置
Protractor
(end-to-end) 測試環境 - 建立
environment
相關的檔案並初始化為預設的設定
2. 成果展示
安裝完成之後就可以啟動專案了:
cd helloKeriy
ng serve -open
ng serve
命令會啟動開發伺服器,監聽檔案變化,並在修改這些檔案時重新構建此應用。
使用--open
(或-o
)引數可以自動開啟瀏覽器並訪問http://localhost:4200/
。
接下來你將看到:
上面展示的是我們的根元件,我們科室適當修改其中的一些資訊,顯示自己喜歡的內容。
ng serve
命令提供了很多引數,可以適當參考。以下引數僅供參考:
-
--dry-run: boolean
, 預設為false
, 若設定dry-run
則不會建立任何檔案 -
--verbose: boolean
, 預設為false
-
--link-cli: boolean
, 預設為 false, 自動連結到@angular/cli
包 -
--skip-install: boolean
, 預設為false
, 表示跳過npm install
-
--skip-git: boolean
, 預設為false
, 表示該目錄不初始化為 git 倉庫 -
--skip-tests: boolean
, 預設為false
, 表示不建立tests
相關檔案 -
--skip-commit: boolean
, 預設為false
, 表示不進行初始提交 -
--directory: string
, 用於設定建立的目錄名,預設與應用程式的同名 -
--source-dir: string
, 預設為'src'
, 用於設定原始檔目錄的名稱 -
--style: string
, 預設為'css'
, 用於設定選用的樣式語法 ('css'
,'less'
or'scss'
) -
--prefix: string
, 預設為'app'
, 用於設定建立新元件時,元件選擇器使用的字首 -
--mobile: boolean
, 預設為false
,表示是否生成 Progressive Web App 應用程式 -
--routing: boolean
, 預設為false
, 表示新增帶有路由資訊的模組,並新增到根模組中 -
--inline-style: boolean
, 預設為false
, 表示當建立新的應用程式時,使用內聯樣式 -
--inline-template: boolean
, 預設為false
, 表示當建立新的應用程式時,使用內聯模板
四、Angular CLI簡單使用
1. 新建元件
$ ng generate component great-angular
installing component
create src/app/great-angular/great-angular.component.css
create src/app/great-angular/great-angular.component.html
create src/app/great-angular/great-angular.component.spec.ts
create src/app/great-angular/great-angular.component.ts
update src/app/app.module.ts
如你所見,Angular cli
幫我們幹了如下事情:
src/app/great-angular
目錄被建立great-angular
目錄下會生成以下四個檔案:CSS
樣式檔案,用於設定元件的樣式HTML
模板檔案,用於設定元件的模板TypeScript
檔案,裡面包含一個 GreatAngular
元件類和元件的元資訊Spec
檔案,包含元件相關的測試用例GreatAngular
元件會被自動地新增到最近模組 @NgModule
裝飾器的 declarations
屬性中。
2. 其他命令
Angualr CLI
提供了許多常用命令供我們選擇:
ng generate class my-new-class // 新建 class
ng generate component my-new-component // 新建元件
ng generate directive my-new-directive // 新建指令
ng generate enum my-new-enum // 新建列舉
ng generate module my-new-module // 新建模組
ng generate pipe my-new-pipe // 新建管道
ng generate service my-new-service // 新建服務
當然選擇。。簡寫:
ng g cl my-new-class // 新建 class
ng g c my-new-component // 新建元件
ng g d my-new-directive // 新建指令
ng g e my-new-enum // 新建列舉
ng g m my-new-module // 新建模組
ng g p my-new-pipe // 新建管道
ng g s my-new-service // 新建服務
3. 單元測試Angular
預設幫我們整合了``karma`測試框架,我們只需要:
$ ng test
4. 端到端測試
$ ng e2e
關於Angular
測試部分詳細可以參考官方文件。
5. 構建應用程式
$ ng built
其中過程應該是這樣的:Angular CLI
從 .angular-cli.json
檔案中載入配置資訊Angular CLI
執行 Webpack
打包專案相關的 JavaScript
、 CSS
等檔案
打包後的資源,將被輸出到配置檔案中 outDir
所指定的目錄,預設是輸出到 dist
目錄。
這只是一個初級的文件,強烈建議請參考Angular CLI 終極指南
7. 參考文獻
相關文章
- Angular CLI的安裝及使用Angular
- 使用Angular CLI生成路由Angular路由
- 使用Angular CLI生成 Angular 5專案Angular
- 使用Angular CLI進行Build (構建) 和 ServeAngularUI
- SpringBoot CLI安裝與使用Spring Boot
- 使用Angular-cli搭建Angular2開發環境Angular開發環境
- 使用Angular CLI從藍本生成程式碼Angular
- vue-cli安裝Vue
- vue-cli腳手架新版和舊版的安裝與使用Vue
- Angular CLI 終極指南Angular
- vue-cli @4安裝Vue
- Mac 安裝 AWS-CLIMac
- 靜默安裝Azure CLI
- 使用Angular CLI進行單元測試和E2E測試Angular
- vue-cli 安裝,解除安裝,安裝指定版本,和建立專案問題相關整理Vue
- 使用Angular cli升級AngularJS專案——(一)引導Angular混合應用AngularJS
- Angular Material 攻略 03 angular Material Design 安裝AngularMaterial Design
- Angular入門,開發環境搭建,使用Angular CLI建立你的第一個Angular專案Angular開發環境
- angular cli中的--flat引數Angular
- Elasticsearch 安裝和使用Elasticsearch
- hydra 安裝和使用
- ActiveMq安裝和使用MQ
- httprunner 安裝和使用HTTP
- docker安裝和使用Docker
- nginx 安裝和使用Nginx
- goaccess安裝和使用Go
- PyMongo安裝和使用Go
- Webmin 安裝和使用Web
- angular環境配置及安裝Angular
- Linux CentOS安裝Azure Cli工具LinuxCentOS
- node.js和vue cli腳手架下載安裝配置方法Node.jsVue
- Go的安裝和使用Go
- yarn的安裝和使用Yarn
- CMake的安裝和使用
- SSDB安裝和使用初探
- azkaban的安裝和使用
- 安裝和使用 Composer
- Mac 安裝和使用redisMacRedis