Angular 2 與 TypeScript 筆記(一)

其實之前就有認真考慮想學React和Angular,本來是打算先學React,不過因為在研究的專案使用的是Angular,所以就先來研究Angular了,而且Angular也開始將文件中文化,我相信在學習上應該會比只有英文文件來得順利一些,不過老實說我覺得Angular有點複雜就是了XD

Angular 2 中文官網:https://angular.cn/

準備工作

首先從官方網站的五分鐘入門開始:

  1. 安裝Node.js
  2. 到這個Github頁面,下載入門包(或依官網逐步建立檔案)
  3. 安裝所需要的Module:npm install
  4. 安裝TypeScript:npm install -g typescript
  5. 安裝Typings:npm install -g typings

到這邊就算是準備完畢了!

Angular基本介紹

Angular App的組成有四大元件:Component、Service 、Router 、Directive

補充:因為Angular有官方中文化文件,所以以下關鍵字會以官方的中文翻譯為主

Component 組件

組件是Angular最基本的組成,一個網站都會有一個AppComponent來當Root Component 根組件,可以想像成樹的最根部。

這個根組件裡面還會有其他組件,例如:SidebarComponent 、HeaderComponent等等,當然還可以繼續長下去變成一棵組件樹。

一個組件包含了許多東西,最基本的有selector和template(組件Metadata

  • selector:輸入資料為CSS選擇器字串,表示這個組件的內容要放在哪裡
  • template:輸入資料為Angular自己的Html模組字串,表示如何顯示這個組件的view(Template語法

組件方便的地方在於獨立性,一個組件包含了自己的View和Controller,在重複利用或維護上都很方便,就像是樂高的一塊積木這樣。

Service 服務

服務就是組件和後端溝通的橋樑,服務負責處理Data Access、Logging等等的工作,而組件只要負責接收資料或傳資料給服務即可。

Router 路由

這個部分我還不是很清楚,按照官方網站的說明是指:「負責導航到目標組件」,後端中Router負責指引該url要連到哪一個檔案,而Angular的路由則是指引到哪一個組件。

Directive 指令

指令就是用來操作DOM用的,Angular有內建很多指令,例如:ngFor、ngif等等,我們可以放在template內來使用,例如:<p*ngIf="condition">Condition is true and I will show up!</p>,這個ngIf就會操作這個DOM的行為,condition為true時顯示,相反則刪除(檢查元素會發現只剩下<script></script>),是刪除而不是隱藏的原因是,一個元素即使隱藏,還是會接收到事件且繼續佔用資源,所以Angular會直接刪除該元素,增加我們App的效能。

第一個Angular App

講了這麼多,該進入正題了,首先看一下我們的資料夾裡面有什麼?

  • tsconfig.json:TypeScript的設定,如何編譯之類的
  • typings.json:負責管理與JavaScript有關的Library,例如:jQuery
  • package.json:官方幫我們準備好的工具包,裡面有寫好的Script和不少插件,我還沒有一個一個去了解用途,大家也可以先自行搜尋一下

建立第一個組件

建立一個app資料夾,在裡面新增一個名為app.component.ts的檔案,這就是我們的Root Component

檔案內容:

import { Component } from '@angular/core';  //從angular/core引入模板

@Component({  //這是一個裝飾器,告訴Angular如何創建這個組件
    selector: 'my-app',  //放置這個組件的元素
    template: '<h1>My First Angular 2 App!</h1>'  //這個組件的view
})
export class AppComponentl{ };  //如何控制view的行為與顯示

啟動應用

建立好我們第一個組件後,我們要有一個檔案來載入它,我們在app資料夾底下新增一個main.ts檔案

檔案內容:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';  //從app.component載入組件

bootstrap(AppComponent);

建立index.html

最後,在根目錄新增一個index.html

檔案內容:

<html>
    <head>
        <title>Angular 2 QuickStart</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">
        <!-- 1. Load libraries -->
        <!-- Polyfill(s) for older browsers -->
        <script src="node_modules/core-js/client/shim.min.js"></script>
        <script src="node_modules/zone.js/dist/zone.js"></script>
        <script src="node_modules/reflect-metadata/Reflect.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <!-- 2. Configure SystemJS -->
        <script src="systemjs.config.js"></script>
        <script>
            System.import('app').catch(function(err){ console.error(err); });
        </script>
    </head>
    <!-- 3. Display the application -->
    <body>
        <my-app>Loading...</my-app>
    </body>
</html>

Script載入的地方,system.src.js是指SystemJS,是Angular 2預設的模組載入器,我們也可以用其他東西取代,例如:webpack(雖然我還不會用),詳細SystemJS的設定可以看system.config.js。

這個html有預設載入一個style.css檔,有興趣的話也可以新增一個style.css來玩玩。

啟動App

最後,輸入指令npm start就可以啟動我們的「First App」了!

而且此時你如果對檔案做修改並儲存,伺服器會自動去偵測修改並且自動重新整理喔!

1 Comment

  1. 我的媽呀,跟一代差好多 …. 完全是不一樣的東西

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料