# 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 官方介紹
1. 由 google 所開發的框架
2. 官方文件完整，有許多資源可在官方文件中找到
3. 相較於 React，Angular 是屬於雙向綁定的框架 two-way binding，使用在表單上更有效率
4. 具有程式碼產生器（Angular Cli），可以加速開發的效率
5. 使用 TypeScript 作為主語言，使用強型別的方式來開發（原生JS為動態型別）
6. 使用 MVC 設計模式來進行 SPA 的開發
7. 是一個完整的框架系統，所以常常專案都會一大包（小專案有點顯得殺雞用牛刀）
8. 適合用於大型專案的開發

## 一起進入 Angular 的世界
在開始使用 Angular 進行開發前，需要先將兩個工具準備好:
1. [VS Code](https://code.visualstudio.com/)
2. [Node.js](https://nodejs.org/zh-tw/download)

有了以上兩個工具，我們才有辦法使用強大的 `Angular Cli` 來進行開發。

### Angular cil
下載完 Node.js 後，打開終端機（terminal），輸入 `npm install -g @angular/cli`

#### 現在是什麼版本？
輸入 `ng version` 來確認當前的版本，會出現以下的畫面


#### 創建專案
要建立一個 Angular 的專案，輸入 `ng new [專案名稱]`
會出現以下兩個提示問題：

1. Would you like to add Angular routing? (是否要加入路由）？
這主要是用來控制頁面的切換，根據 URL 的變化來達到 SPA 的功能。
2. 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 官方網站](https://angular.io/docs)
- [Angular 2 之 30 天邁向神乎其技之路](https://ithelp.ithome.com.tw/articles/10185829)
- [Angular 速成班 簡介&Hello World!!](https://fullstackladder.dev/blog/2016/09/28/angular-tutorial-1-hello-world/)
- [Angular #1 基本介紹](https://miahsuwork.medium.com/angular-1-%E5%9F%BA%E6%9C%AC%E4%BB%8B%E7%B4%B9-85374c40c04c)

以上就是 Angular 的初步介紹，緩慢學習中...

###### tags: `Angular`