Coding life

對於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 <select...

對於Angular2 的使用以及一開始的環境設置,Angular-cli給了不小的幫助 這邊來做一下紀錄大概利用了angular-cli的過程和方法 更詳細的部份可以詳見在github上面 angular-cli 的專案 # 安裝angular-cli npm install angula-cli # 一開始的專案創建 ng new <project-name> 這樣就是專案部份的建立,建立的同時也會把git repositary init起來 在進行專案,首要部份就是module, component, service各項部件的建立 在更詳細的部份其實可以進去node_modules/ng裡面的blueprint去看他的sourcecode 架構 指令 Component ng g component my-new-component Directive ng g directive my-new-directive Pipe ng g pipe my-new-pipe Service ng g service my-new-service Class ng g class my-new-class Interface ng g interface my-new-interface Enum ng g enum my-new-enum Module ng g module my-module 在使用的時候其實還有額外的參數指令可以下 例如說當我不需要使用spec在創建component的選項時,可以加入以下命令 ng g component --spec=false <name> 或者說對於很多其他的選項可以在node_modules/angular-cli/blueprint的index.js裡面都可以查到定義 一些其他的功能 提供Hot Reload即時線上看 ng serve # listen on localhost:4200 輸出網站整體 ng build # 可以將...