2. 專案建置與配置.md

Angular專案配置

• 初步建置專案及使用 Angular CLI ( sudo 在 Mac 或 Linux 才需輸入 ):

  1. 安裝最新版的 NodeJS
  2. 更新 npm : [sudo] npm install -g npm。
  3. 更新 Angular CLI : [sudo] npm uninstall -g angular-cli @angular/cli，可以補上@latest npm cache verify [sudo] npm install -g @angular/cli
  4. 建置新專案 : ng new my-first-app，有幾個選項可以選擇，Angular routing 選擇 yes，styleSheet 選擇 CSS，過一下子會建置出一個空專案。

  使用 ng serve 來起啟動專案，加上 --port ANOTHERPORT 可以指定 portNumber。

  Angular CLI : https://cli.angular.io/

• 建置好專案後先看 package.json，只要是 Node.js 的專案通常都會有這個檔案，它利用 json 格式來定義相依的相關套件，使用 npm install 就會依照文件中的說明來進行安裝，而開發 Angular 會用到的相關依賴定義在 devDependencies 中。

• angular.json 中說明了專案的全域配置，在課程的範例中為了可以全域使用 Bootstrap，會在這邊做些更動，首先用 npm install --save bootstrap@3 載入 Bootstrap，接著在 angular.json 找到 "styles" 新增新的 .css file :

  "architect": {
          "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
              "outputPath": "dist/firstApp",
              "index": "src/index.html",
              "main": "src/main.ts",
              "polyfills": "src/polyfills.ts",
              "tsConfig": "tsconfig.app.json",
              "aot": true,
              "assets": [
              "src/favicon.ico",
              "src/assets"
              ],
              "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
              ],
              "scripts": []
          },