[Angular2速成班]來寫個TodoApp(1) | angular component用法
之前的文章介紹過AngularCLI的基本用法之後,本篇文章開始就來寫一個簡單的TodoApp,藉此來練習Angular2的各種特色。基本觀念首先,我們必須先知道,Angular2引入了WebComponent的概念,也就是一個Angular2app基本上是由數個元件(component)來組成的,因此在設計時我們可以適當的將預期的畫面拆解成數個component,然後各司其職,並且適當的彼此溝通,來完成我們預期的程式。那麼要如何建立一個component呢?其實在之前HelloWorld的文章我們使用AngularCLI建立一個專案時,就已經有一個最基本app-root的component囉!我們可以打開src/...
之前的文章介紹過Angular CLI的基本用法之後,本篇文章開始就來寫一個簡單的TodoApp,藉此來練習Angular2的各種特色。
基本觀念首先,我們必須先知道,Angular2引入了Web Component的概念,也就是一個Angular2 app基本上是由數個元件(component)來組成的,因此在設計時我們可以適當的將預期的畫面拆解成數個component,然後各司其職,並且適當的彼此溝通,來完成我們預期的程式。
那麼要如何建立一個component呢?其實在之前Hello World的文章我們使用Angular CLI建立一個專案時,就已經有一個最基本app-root的component囉!
我們可以打開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 { title = app works!; }在這裡我們可以看到@Component就是用來將AppComponent這個class"裝飾"成一個component,這是在ES6提出來的一種decorator語法,使用@#XXXX來從不同的切面對程式進行描述,雖然大部分的瀏覽器都還不支援,但我們使用TypeScript撰寫時,編譯器就能將程式轉換成大部分瀏覽器都看得懂得程式碼了!
Angular2製作了許多的decorator,而@component就是其中一個,因此只要在class上面使用@component宣告,Angular2核心就能夠知道這是一個com...