[ Angular ] 快快樂樂學習 Angular 之路 - 2 基礎Conponent應用

前言

在這邊我會直接開始介紹 Component 基本的一些操作,

畢竟實作有畫面看還是比較有趣 XD

當然如果你想先從架構面與原理面先了解一些的話,

會推薦您先看官網(簡中翻譯,想看英文將 angular.cn 換成 angular.io 即可)

https://angular.cn/docs/ts/latest/guide/architecture.html#!#components

我們先從建立專案開始吧,

這次指令有點不太一樣了,

 ng new PROJECT_NAME --prefix PREFIX_NAME

這邊設定的 PREFIX_NAME 會替換預設的 app prefix 

那專案建立完成後,就來開始跟它玩耍吧 !!

這邊用到了 angular-cli 一個產生 component 的指令 ( 括號部分是可以省略的部分 )

ng g(enerate) c(omponent) your_conponent_name

 先看到我們產生的基本架構,

  1. 我們可以在這邊加入一些 HTML 範例並用 component 加入一些操作,
    例如 :  Header 我們可以把它切成一個 component。
  2. style 就比較特別了,這裡套用CSS只會影響到這個 component 內的 HTML templete
    不會影響到其他地方 !
  3. APP最一開始起始的地方,可以在這裡載入 一些  js 或 css framework  !
    例如 : BootStrap 3

 

這邊我會繼續切分出 Header 並套用 bs3-navbar  (箭頭是標示有修改的部分) ,

header.component.html 這一塊是屬於 header 的 html templete 部分

header.component.ts先暫時可以不用更動,

現在我們已經完成一個 header component 的 原型了,

我們要把它加到原本的 app component 內做顯示,

我們可以先看一下 app component 的 html templete 部分,

我們加入我們的 header tag  (這邊注意到它是對應我們 header component 的 selector )

接下來在 app component 內會用到一些模組化的觀念,

我們必須先將 header component 引用進來才能去做操作,

  1. 先將 header component 引用進來
  2. 在我們的 decorator 內設定directive 

完成畫面

小結

目前只能看到一小段 Angular 2 的好處,

可以將大的架構分門別類的拆裝成小元件的方式去做組合、管理,

當然如何切分還是要去做思考的,

如果切分太細的話,處理各component 之間的溝通就會非常麻煩,

最近也在好好地跟他玩耍著,

如果有空有心得也會繼續跟大家分享 : )