什麼是 Angular

Anuglar 是一個 Javasciprt 框架 可以讓你建立一個 可互動的 單頁應用(SPA)。

那什麼是 SPA 呢?

什麼是 SPA

SPA 網站，實際上就是只有一個 Web 頁面的網站．
當載入單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序．
可以看到 Anuglar 的官網在切換頁面的時候沒有刷新整個頁面，而是更新部分 DOM．
這就是 Angular 透過 Javascript 直接更新 畫面的方法

Angular vs Agnualr 2 vs Angular 8

在這邊我們要先了解 Angular的版本差異，基本上 Angularjs以及 現在大家說的 Angular 是不一樣的東西。

Angularjs有了太多缺點，所以在被 React刺激後，Google 就改寫了整個框架，從原本的純 library 改成一套完整的前端框架。

所以 Angularjs 後的版本(Angular 2)統稱 Angular，Angular 2 第一版是在 2016 釋出的，除個跳過了 Angular 3 之外，大約每六個月就會更新一次，官網上也有詳細的 Release 時間，基本上到目前這篇文章為止以前到了 Angular 8 的版本．

我們的第一個專案

在這之前我們先來安裝 Angular CLI 來開一個新的專案
在這邊請先確定你電腦上的 Node 的版本 需要至少v10.0.1的版本

node -v                                 
v12.5.0

再安裝Angular CLI

npm install -g @angular/cli@latest

建立一個專案

ng new my-first-app

這時候會問你要不要Routing跟 選擇 css format
分別輸入No 跟 只使用 css

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

過了一回兒，跟 Angular相關的 library 載入好以後，我們就可以把專案Run 起來了．

讓它動起來吧

之後進入資料夾，透過 ng serve 把我們第一個專案 run 起來

cd my-app 
ng serve 

編輯我們第一個專案

這裡推薦使用 Visual Studo Code 來編輯我們的專案

開起 src/app/app.component.ts，改為

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Tim';
}

開起 src/app/app.component.html ，改為

<h3>Hi, This is first sample</h3>
<input type="text" [(ngModel)]="name">
<p>{{name}}</p>

這時候點進去會報錯，因為 [(ngModel)] 這個功能需要引用 FormsModule

開起 src/app/app.module.ts ， 在imports 的部分

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

畫面的結果

什麼是 Typescript

剛剛上面範例中的.ts檔就是 Typescript ，
Typescript 簡單的說，就是在 原本的 JavaScript上面加上type，T可以說是JavaScript的進階版，也是為了讓JavaScript可以寫大型應用程式的商業邏輯所設計，使JavaScript不再只是控制DOM而已，而是真的可以寫複雜商業邏輯。

Typescript 有著除了Javascript外，其他更深入的物件導向特性，例如 Type,Class以及 Interface 等

套上bootstrap

我們在angular.json 裡 加入bootstrap.css，之後就可以用bootstrap 等模版系統

先透過終端機在資料夾底下輸入

npm install bootstrap --save-dev

在開啟 angular.json
並且修改styles的部分

...
 "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
...

畫面的結果

參考

1. Angular.io
2. Angular Release Date
3. Angular 8 (formerly Angular 2) - The Complete Guide