Angular2 架構、起始、分類、使用

對於Angular2的起手式，我採用了Angular-cli幫助我解決架構起始、後期的build和compile的問題。

最近在使用nodejs上面捨棄了傳統的npm install改用了yarn來安裝我的套件包

starter-kit 在使用上，建議把自己已經用順手的起始套件包一包丟上自己的GITHUB來使用

我自己看有關於angular2的教學都是使用systemjs把外部的JS來注入，不過angular-cli提供了使用JSON的方式來注入外部的JS

就我個人而言config能用JSON就不要用JS，目前也只是進行初期的準備，後期還有額外要新增的東西就再說啦

首先先講一下最常使用的幾個點會在angular2最頻繁使用到的import和decorator

@ngModule

Angular Modules help organize an application into cohesive blocks of functionality.

這個對於使用者建立架構的用處很大，能夠將一個大分類再細分成更多的部件，我提拱以下的一些我最常用組件來做說明

imports : 提供模組注入，要使用一些自定義、http、form的模組一開始都要先從這邊注入

declarations: 同層的一些組件使用，基本都是component填入這邊

providers: 使用於這個模組裡的service、pipes，例如使用http模組做RESTFUL的都會從這邊引入

export: 要讓外部引入該模組時，讓外部模組可以飲用的部分，這邊放置的都是component

entryComponent: 使用於ComponentFactoryResolver這個我是用在進行動態編譯component，只要定義了ClassName再引入就可以使用，很方便

還有其他的東西我沒有深入研究....

schemas: 用於自定義TagName不過我沒用過

bootstrap : 這個似乎啟用component的定義，不過沒用過、不熟

@Component

selector: 該component的起始點，定義通常為TagName <selector></selector> 這樣去做啟用

template, templateUrl: 樣板提供點，為VIEW

styleUrls, styles: CSS使用

animations: 動畫定義，我還沒用過

entryComponent:跟ngModule的一樣

前面有提過一篇angular-cli的用處，基本上我起始一個新的專案都是用它來做

接下來就是大架構的分類

就目前來說我只分幾個部分

就以單純的feature class來說

ng g component foo

ng g service foo

這樣會有以下的東西(我會先把spec拿掉)

foo.component.html

foo.component.ts

foo.component.css

foo.service.ts

最後整合進去一個模組裡面

foo.module.ts

使用@ngModule的裝飾器

declaration放進會用到的component,

export 放進去會讓其他modules使用的component,

providers 放進去service

還有額外要添加的就參考上面