Angular基礎系列:環境搭建及第一個應用

1 安裝node

• 下載Nodejs
  傳送門:https://nodejs.org/zh-cn/
• 修改文件夾權限
  sudo chmod -R777 /home/xdq/.npm
• 配置路徑
  vim ~/.bashrc

export Node12_HOME=/usr/bin/node-v12.18.0-linux-x64
export PATH=$Node12_HOME/bin:$PATH

• 生效配置信息

source ~/.

2 安裝angular-cli

sudo npm install -g @angular/cli 

3 新建Angular項目

• 新建工作區

ng new demo2

• 選擇樣式

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS 
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ] 
  Stylus [ http://stylus-lang.com                                         ] 

• 選擇CSS

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

• 安裝依賴包

CREATE demo2/README.md (1022 bytes)
CREATE demo2/.editorconfig (274 bytes)
CREATE demo2/.gitignore (631 bytes)
CREATE demo2/angular.json (3558 bytes)
CREATE demo2/package.json (1247 bytes)
CREATE demo2/tsconfig.json (489 bytes)
CREATE demo2/tslint.json (3125 bytes)
CREATE demo2/browserslist (429 bytes)
CREATE demo2/karma.conf.js (1017 bytes)
CREATE demo2/tsconfig.app.json (210 bytes)
CREATE demo2/tsconfig.spec.json (270 bytes)
CREATE demo2/src/favicon.ico (948 bytes)
CREATE demo2/src/index.html (291 bytes)
CREATE demo2/src/main.ts (372 bytes)
CREATE demo2/src/polyfills.ts (2835 bytes)
CREATE demo2/src/styles.css (80 bytes)
CREATE demo2/src/test.ts (753 bytes)
CREATE demo2/src/assets/.gitkeep (0 bytes)
CREATE demo2/src/environments/environment.prod.ts (51 bytes)
CREATE demo2/src/environments/environment.ts (662 bytes)
CREATE demo2/src/app/app-routing.module.ts (246 bytes)
CREATE demo2/src/app/app.module.ts (393 bytes)
CREATE demo2/src/app/app.component.css (0 bytes)
CREATE demo2/src/app/app.component.html (25757 bytes)
CREATE demo2/src/app/app.component.spec.ts (1056 bytes)
CREATE demo2/src/app/app.component.ts (209 bytes)
CREATE demo2/e2e/protractor.conf.js (808 bytes)
CREATE demo2/e2e/tsconfig.json (214 bytes)
CREATE demo2/e2e/src/app.e2e-spec.ts (638 bytes)
CREATE demo2/e2e/src/app.po.ts (301 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

• 啓動服務

cd demo2
ng serve --open

• 編譯

Compiling @angular/core : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 60.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3 MB [initial] [rendered]
Date: 2020-06-12T00:33:17.342Z - Hash: 3ca00025d4d380345ead - Time: 5725ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

• 訪問

http://localhost:4200/

• 頁面

Angular首頁

---

【參考文獻】
[1]https://angular.cn/start
[2]https://angular.cn/guide/setup-local
[3https://nodejs.org/zh-cn/https://nodejs.org/zh-cn/]https://nodejs.org/zh-cn/