Angular 學習心得
===
###### tags: `JavaScript` `js` `後台`

要安裝一下 node.js
命令列輸入 node --version 就可以知道有沒有安裝了

安裝 CLI

npm install -g @angular/cli


安裝完畢 就可以使用 ng 指令了

接著來建立專案 命令模式下輸入

ng new my-app

建立專案完成 執行專案 命令模式下輸入

cd my-app
ng serve --open

執行後 瀏覽器瀏覽 http://localhost:4200/
就可以看到 angular 歡迎畫面了
Ctrl+C 可以關閉 server

接著使用 vscode 修改一下程式碼
./src/app/app.component.ts
把 title 從 'my-app' 改成 'My First Angular App'

./src/app/app.component.css 新增程式碼

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

執行完就能看到瀏覽器上網頁內容的差異了

angular 底層用了大量的 type script 想了皆深入一點 要再學習一下 type script

## 參考資料
[【跟山地人学Angular系列教程】课00.15分钟上手Angular](https://www.youtube.com/watch?v=csE6ue9w7YM)
[快速上手 - Angular.tw](https://angular.tw/guide/quickstart)
[How To Debug Angular CLI Applications in Visual Studio Code](https://www.digitalocean.com/community/tutorials/how-to-debug-angular-cli-applications-in-visual-studio-code)
launch.json 新增下面內容（同 java script 差 8080 改成 4200）

{
    // 使用 IntelliSense 以得知可用的屬性。
    // 暫留以檢視現有屬性的描述。
    // 如需詳細資訊，請瀏覽: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

記得先執行

ng serve --open

開啟 server 之後 才能開始 debug

## 自學筆記
[java script 學習心得（vscode）](https://hackmd.io/@chiisen/rJ-Tqmfo8)
[Vue 學習心得](https://hackmd.io/@chiisen/Bk4_zwphU)
[React 學習心得](https://hackmd.io/@chiisen/Sywk4upnI)
[node.js 學習心得（vscode）](https://hackmd.io/@chiisen/HkvYq_QsI)