AngularJS快速上手，從安裝到運(yùn)行

作者：xcbeyond
瘋狂源自夢(mèng)想，技術(shù)成就輝煌！微信公眾號(hào)：《程序猿技術(shù)大咖》號(hào)主，專注后端開發(fā)多年，擁有豐富的研發(fā)經(jīng)驗(yàn)，樂于技術(shù)輸出、分享，現(xiàn)階段從事微服務(wù)架構(gòu)項(xiàng)目的研發(fā)工作，涉及架構(gòu)設(shè)計(jì)、技術(shù)選型、業(yè)務(wù)研發(fā)等工作。對(duì)于Java、微服務(wù)、數(shù)據(jù)庫(kù)、Docker有深入了解，并有大量的調(diào)優(yōu)經(jīng)驗(yàn)。 







 


0、先決條件 

    在開始之前，請(qǐng)確保你的開發(fā)環(huán)境已經(jīng)包含了 Node.js和 npm 包管理器。

Node.js

Angular 需要 Node.js 的 8.x 或 10.x 版本。

要想檢查你的版本，請(qǐng)?jiān)诳刂婆_(tái)窗口中運(yùn)行 node -v 命令。

C:\Users\Administrator>node -v
v8.12.0

要想安裝 Node.js，請(qǐng)?jiān)L問 nodejs.org。

npm 包管理器

 Angular、Angular CLI 和 Angular 應(yīng)用都依賴于由一些庫(kù)所提供的特性和功能，它們主要是 npm 包。要下載和安裝 npm 包，你必須擁有一個(gè) npm 包管理器。

本 文中使用的是npm命令行方式，它已經(jīng)在安裝 Node.js 時(shí)默認(rèn)安裝上了。

要想檢查你是否已經(jīng)安裝了 npm 客戶端，請(qǐng)?jiān)诮K端/控制臺(tái)窗口中運(yùn)行 npm -v 命令。

C:\Users\Administrator>npm -v
6.4.1

1、安裝 Angular CLI

   本文用 Angular CLI 的方式來創(chuàng)建項(xiàng)目、創(chuàng)建應(yīng)用和庫(kù)代碼，并執(zhí)行多種開發(fā)任務(wù)，比如測(cè)試、打包和發(fā)布。

通過npm來安裝CLI，請(qǐng)打開控制臺(tái)窗口，并輸入下列命令：

C:\Users\Administrator>npm install -g @angular/cli

2、創(chuàng)建項(xiàng)目

選擇一個(gè)位置（工作空間）來創(chuàng)建Angular應(yīng)用來開發(fā)， 每個(gè)項(xiàng)目都是一組由應(yīng)用、庫(kù)或端到端（e2e）測(cè)試構(gòu)成的文件。

運(yùn)行 Angular CLI 命令 ng new創(chuàng)建項(xiàng)目AngularJS-Learning，如下所示：

I:\Angular>ng new AngularJS-Learning
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE AngularJS-Learning/angular.json (3876 bytes)
CREATE AngularJS-Learning/package.json (1326 bytes)
CREATE AngularJS-Learning/README.md (1034 bytes)
CREATE AngularJS-Learning/tsconfig.json (408 bytes)
CREATE AngularJS-Learning/tslint.json (2837 bytes)
CREATE AngularJS-Learning/.editorconfig (245 bytes)
CREATE AngularJS-Learning/.gitignore (503 bytes)
CREATE AngularJS-Learning/src/favicon.ico (5430 bytes)
CREATE AngularJS-Learning/src/index.html (304 bytes)
CREATE AngularJS-Learning/src/main.ts (372 bytes)
CREATE AngularJS-Learning/src/polyfills.ts (3234 bytes)
CREATE AngularJS-Learning/src/test.ts (642 bytes)
CREATE AngularJS-Learning/src/styles.css (80 bytes)
CREATE AngularJS-Learning/src/browserslist (388 bytes)
CREATE AngularJS-Learning/src/karma.conf.js (964 bytes)
CREATE AngularJS-Learning/src/tsconfig.app.json (166 bytes)
CREATE AngularJS-Learning/src/tsconfig.spec.json (256 bytes)
CREATE AngularJS-Learning/src/tslint.json (314 bytes)
CREATE AngularJS-Learning/src/assets/.gitkeep (0 bytes)
CREATE AngularJS-Learning/src/environments/environment.prod.ts (51 bytes)
CREATE AngularJS-Learning/src/environments/environment.ts (662 bytes)
CREATE AngularJS-Learning/src/app/app-routing.module.ts (245 bytes)
CREATE AngularJS-Learning/src/app/app.module.ts (393 bytes)
CREATE AngularJS-Learning/src/app/app.component.html (1173 bytes)
CREATE AngularJS-Learning/src/app/app.component.spec.ts (1131 bytes)
CREATE AngularJS-Learning/src/app/app.component.ts (222 bytes)
CREATE AngularJS-Learning/src/app/app.component.css (0 bytes)
CREATE AngularJS-Learning/e2e/protractor.conf.js (752 bytes)
CREATE AngularJS-Learning/e2e/tsconfig.e2e.json (213 bytes)
CREATE AngularJS-Learning/e2e/src/app.e2e-spec.ts (314 bytes)
CREATE AngularJS-Learning/e2e/src/app.po.ts (208 bytes)
npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, fl
atted is its successor.
[           .......] - extract:mime: sill tarball trying lcid@^1.0.0 by hash: s
......

ng new 會(huì)提示你要把哪些特性包含在初始的應(yīng)用項(xiàng)目中，請(qǐng)按 Enter 或 Return 鍵接受默認(rèn)值即可。創(chuàng)建項(xiàng)目過程中會(huì)下載安裝依賴的包，所有創(chuàng)建項(xiàng)目過程受網(wǎng)絡(luò)狀況，需要花費(fèi)一會(huì)兒的時(shí)間，那就慢慢等待吧，不妨利用這個(gè)等待時(shí)間看看其他東西，也挺好的。

3、運(yùn)行

Angular 包含一個(gè)開發(fā)服務(wù)器，以便你能在本地輕松地構(gòu)建應(yīng)用和啟動(dòng)開發(fā)服務(wù)器。

進(jìn)入工作空間目錄（my-app）。

使用 CLI 命令 ng serve 啟動(dòng)開發(fā)服務(wù)器，并帶上 --open 選項(xiàng)。

I:\Angular\AngularJS-Learning>ng serve --open

ng serve 命令會(huì)自動(dòng)開發(fā)服務(wù)器，并監(jiān)視你的文件變化，當(dāng)你修改這些文件時(shí)，它就會(huì)重新構(gòu)建應(yīng)用。

–open（或只用 -o）選項(xiàng)會(huì)自動(dòng)打開瀏覽器，并訪問 http://localhost:4200/