HackMD
Angular - Hello Angular 初入門
身為前端三大框架之一的 Angular， 想必大家都不陌生，不管是在自學的過程，或是求職的過程，一定都會看到他的蹤影。
不過在現在的前端開發社群中，普遍認為 Angular 的學習曲線偏高（不止一次聽到這句話了），且資源也相較 React 或是 Vue 少，所以我在學習前端開發的初期，也是先以 React 作為我的敲門磚。
至於為什麼會開始學習 Angular？（大大們都是為了求生存…）
什麼是 Angular?
首先，要注意 AngularJS 與 Angular 是不同的東西！ 兩者都是由google開發的。
AngularJS 是以 Javascript作為基本程式語言來撰寫，Angular 是以TypeScript作為基本程式語言來撰寫，Angular2 以後的版本，都統稱 Angular。
我們目前正在學習的是 Angular。
簡介與特色
"Angular is an application-design framework and development platform for creating efficient and sophisticated single-page apps." - Angular 官方介紹
- 由 google 所開發的框架
- 官方文件完整，有許多資源可在官方文件中找到
- 相較於 React，Angular 是屬於雙向綁定的框架 two-way binding，使用在表單上更有效率
- 具有程式碼產生器（Angular Cli），可以加速開發的效率
- 使用 TypeScript 作為主語言，使用強型別的方式來開發（原生JS為動態型別）
- 使用 MVC 設計模式來進行 SPA 的開發
- 是一個完整的框架系統，所以常常專案都會一大包（小專案有點顯得殺雞用牛刀）
- 適合用於大型專案的開發
一起進入 Angular 的世界
在開始使用 Angular 進行開發前，需要先將兩個工具準備好:
有了以上兩個工具，我們才有辦法使用強大的 Angular Cli 來進行開發。
Angular cil
下載完 Node.js 後，打開終端機（terminal），輸入 npm install -g @angular/cli
現在是什麼版本？
輸入 ng version 來確認當前的版本，會出現以下的畫面
創建專案
要建立一個 Angular 的專案，輸入 ng new [專案名稱]
會出現以下兩個提示問題：
- Would you like to add Angular routing? (是否要加入路由）？
這主要是用來控制頁面的切換，根據 URL 的變化來達到 SPA 的功能。 - Which stylesheet format would you like to use?
這個問題有三個選項，分別是CSS,SASS,SCSS，這邊根據你平常使用的來選擇即可
回答完以上問題，就會自動幫你創建一個專案資料夾了！（像是 create-react-app 一樣的概念）
進入專案
使用 VS code 打開專案，首先進入到 src 的資料夾中，點開 app 資料夾，就可以看見 Angular 主要架構了！
從圖上可以清楚地看見，Angular 就是一個基於 TypeScript 所撰寫的框架系統。
執行 Angular 專案
使用 ng serve 來執行專案
當你輸入 "http://localhost:4200/" 看見下方畫面，就代表你成功執行了
認識 Angular 架構
要了解 Angular，就必須要從 Component 組件 開始。
Angular Component
有用過 React 的大家，一定也對 Component 這個詞非常熟悉，組件可以說是建構專案的基本單元（basic building block），主要用於控制 UI，是一個可以重複使用的單元。
主要目的就是要將你的 UI 拆分成許多小的碎塊。
可以先想像成是 HTML, CSS, LOGIC 的集合
Angular Module
Module 是 component 的集合，group code together，把彼此互相關聯的 component 集合再一起，而模組也可以再跟模組結合。
Angular directives
directives 主要是用來控制 html，例如 ngIf, ngModel
學習資源
以上就是 Angular 的初步介紹，緩慢學習中…
