AngularJS 2 Day4 了解Component的組成以及應用

本章的重點在於了解Component的應用,由於在Angular 2 的世界當中主要都是以Component來完成的

將一整個系統的架構,拆分成一部份一部份的小功能,每一個功能都獨立起來

之後合併再一起,就會是一個完整的功能。

上一個章節中我們介紹了整個Angular 2 的系統架構。

今天來帶大家認識一下Angular2 最重要的一部分-Component組件

以一個系統架構來說,可以拆分成每一個細部的功能

這些細部的功能對Angular來說,就是一個個的Component,每一個Component都各司其職

做好自己份內的事情,等到功能都完成後,合併再一起就會是一個完整的系統了。

首先我們可以從圖中看到Angular CLI幫我們將一個Angular範本給建置好

會分成資料夾的方式做一個呈現,而每一個Component當中都有屬於自己的資料夾

我們會發現到在這個資料夾當中,主要有CSS、html、TypeScript

也就代表說,在這個Component底下,是可以完成屬於她自己的功能。

接下來我們來看一下最重要的ts檔,看看他為我們做了哪些事

在ts檔當中我們會發現一開始有一段程式碼叫 @Component

這是一個裝飾器,主要是在定義這個組件的相關內容

selector代表的內容為此組件要呼叫的標籤, 例如想在某一個頁面中將這個Component給載入進來

這時候就可以這樣呼叫他:  <app-root></app-root>

templateUrl 代表為此組件的所在位置,會需要定義該html檔案存放的地點在何處

styleUrls 代表為此組件的CSS檔案位置,用來定義每一個標籤內容中的樣式,其中有一點很重要的事,你會發現到他是一個陣列的型態

也就是說在一個Component當中,我可以同時擁有多個CSS樣式,如果想做添加只需要在後面加上,'CSS檔案路徑名稱' 就可以載入。

接下來我們看到下一部分:

export class AppComponent {
  title = 'app works!';
}

我們發現他是一個Class的類別,名稱就是自己所建立的Component名稱,這裡面要撰寫的程式碼就是各位在JavaScript上所撰寫的任何一切跟網頁邏輯有關的部分

有碰過Java或是C#的網友應該更能體會,在ES6的版本以及TypeScript當中,都是使用Class方式來定義類別,讓整體的程式架構顯現得更清楚。

其中會發現在我們這行當中,會有一個title的變數,在這裡的變數我們可以透過databinding的方式,將資料輸出在前端網頁。

至於詳細的用法我們就留在下一章節為各位做詳細的介紹。

以上文章敘述如有錯誤及觀念不正確,請不吝嗇指教:)

有任何家教、案子 或技術相關問題 請都歡迎聯繫我

http://www.zhenghui.idv.tw/