一键畴、本地開發(fā)環(huán)境搭建
1.node環(huán)境
根據(jù)官方文檔說明，angular需要Node.js 版本 10.9.0 或更高版本突雪。
- 可以打開控制臺運(yùn)行
node -v查看當(dāng)前node版本 - 如果電腦上沒有安裝node環(huán)境起惕，可以到node官網(wǎng)下載安裝
2.npm 包管理器
Angular、Angular CLI 和 Angular 應(yīng)用都依賴于 npm 包中提供的特性和功能咏删。
要想下載并安裝 npm 包惹想，你必須擁有一個(gè) npm 包管理器。
本搭建指南使用 npm 客戶端命令行界面饵婆，Node.js已經(jīng)默認(rèn)安裝了它。要檢查你是否安裝了 npm 客戶端戏售，請?jiān)诮K端/控制臺窗口中運(yùn)行npm -v侨核。
二、安裝Angular CLI
Angular CLI可以用來來創(chuàng)建項(xiàng)目灌灾、生成應(yīng)用和庫代碼搓译，以及執(zhí)行各種持續(xù)開發(fā)任務(wù)，比如測試锋喜、打包和部署些己。
可以使用以下命令全局安裝Angular CLI
npm install -g @angular/cli
三、使用Angular CLI 生成初始項(xiàng)目
Angular CLI 為我們提供了兩種方式嘿般，用于創(chuàng)建新的應(yīng)用程序：
ng init- 在當(dāng)前目錄創(chuàng)建新的應(yīng)用程序ng new- 創(chuàng)建新的目錄段标，然后在新建的目錄中運(yùn)行ng init命令
因此 ng new 與ng init 的功能是相似的，只是 ng new 會為我們創(chuàng)建新的目錄炉奴。
假設(shè)你還未創(chuàng)建新的目錄逼庞，那么我們需要使用 ng new 命令來創(chuàng)建新的項(xiàng)目：
ng new my-app
當(dāng)運(yùn)行上面的命令后，將發(fā)生以下事情：
- 新的
my-app目錄被創(chuàng)建 - 應(yīng)用程序相關(guān)的源文件和目錄將會被創(chuàng)建
- 應(yīng)用程序的所有依賴 (package.json中配置的依賴項(xiàng)) 將會被自動(dòng)安裝
- 自動(dòng)配置項(xiàng)目中的 TypeScript 開發(fā)環(huán)境
- 自動(dòng)配置 Karma 單元測試環(huán)境
- 自動(dòng)配置 Protractor (end-to-end) 測試環(huán)境
- 創(chuàng)建
environment相關(guān)的文件并初始化為默認(rèn)的設(shè)置
此時(shí) my-app 目錄中 Angular 應(yīng)用程序的目錄結(jié)構(gòu)如下：
.
├── README.md
├── e2e
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ └── tsconfig.e2e.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│ ├── app
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── assets
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── typings.d.ts
├── tsconfig.json
└── tslint.json
可用選項(xiàng)
-
--dry-run: boolean, 默認(rèn)為false, 若設(shè)置dry-run則不會創(chuàng)建任何文件 -
--verbose: boolean, 默認(rèn)為false -
--link-cli: boolean, 默認(rèn)為false, 自動(dòng)鏈接到@angular/cli包 -
--skip-install: boolean, 默認(rèn)為false, 表示跳過npm install -
--skip-git: boolean, 默認(rèn)為false, 表示該目錄不初始化為 git 倉庫 -
--skip-tests: boolean, 默認(rèn)為false, 表示不創(chuàng)建 tests 相關(guān)文件 -
--skip-commit: boolean, 默認(rèn)為false, 表示不進(jìn)行初始提交 -
--directory: string, 用于設(shè)置創(chuàng)建的目錄名瞻赶，默認(rèn)與應(yīng)用程序的同名 -
--source-dir: string, 默認(rèn)為'src', 用于設(shè)置源文件目錄的名稱 -
--style: string, 默認(rèn)為'css', 用于設(shè)置選用的樣式語法 ('css','less'or'scss') -
--prefix: string, 默認(rèn)為'app', 用于設(shè)置創(chuàng)建新組件時(shí)赛糟，組件選擇器使用的前綴 -
--mobile: boolean, 默認(rèn)為false,表示是否生成 Progressive Web App 應(yīng)用程序 -
--routing: boolean, 默認(rèn)為false, 表示新增帶有路由信息的模塊，并添加到根模塊中 -
--inline-style: boolean, 默認(rèn)為false, 表示當(dāng)創(chuàng)建新的應(yīng)用程序時(shí)砸逊，使用內(nèi)聯(lián)樣式 -
--inline-template: boolean, 默認(rèn)為false, 表示當(dāng)創(chuàng)建新的應(yīng)用程序時(shí)璧南，使用內(nèi)聯(lián)模板
除此之外，你可以在本機(jī)上運(yùn)行 ng generate --help 查看更多的可用選項(xiàng)师逸。接下來讓我們來看一下如何運(yùn)行應(yīng)用程序司倚。
四、運(yùn)行應(yīng)用程序
首先進(jìn)入使用 Angular CLI 創(chuàng)建的應(yīng)用程序目錄，例如：
$ cd my-app
然后運(yùn)行：
$ ng serve
當(dāng)運(yùn)行上面的命令后对湃，將發(fā)生以下事情：
- Angular CLI 從
.angular-cli.json文件中加載配置信息 - Angular CLI 運(yùn)行 Webpack 打包相關(guān) JavaScript 和 CSS 文件
- Angular CLI 啟動(dòng) webpack dev server 本地開發(fā)服務(wù)器崖叫，默認(rèn)的地址是
localhost:4200
若要停止應(yīng)用程序，你可以使用 ctrl+c 快捷鍵拍柒。
文章Angular CLI部分參考： Angular CLI 終極指南
