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

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




留言

張貼留言

這個網誌中的熱門文章

ts-node 應用

github page ts-node是直接執行typescript使用的，若是不想做tsc的動作而直接執行的話可以直接利用 ts-node <path-to-file> 直接去做執行 這中間當然可以套用一些其他的options不過簡單執行這個即可 注意：因為ts-node是執行typescript，所以先確定系統當中是否已經安裝typescript 一開始當然先說起手勢啦 yarn global add ts-node 上一篇提到了yarn那就當然用yarn來做安裝的動作啦 安裝期間東西會有點多，網速慢的大概要注意一下 雖然說ts-node可以直接執行typescript的程式，但是實際上執行情況是先將typescript先compile後放在cache中，然後再做執行，所以並不會像nodejs運行js檔案那樣來的快速，中間還是會有經過一次編譯的動作 該報錯還是會報錯，不過好處是它會直接trace到.ts的檔案，一般的.map.js檔案如果當中沒有註冊或者安裝其他套件做設定的話，最高一層只會追蹤到js就停止，並不會往上追到原始碼去 Options: -e, --eval [code] Evaluate code -p, --print [code] Evaluate code and print result -r, --require [path] Require a node module for execution -C, --compiler [name] Specify a custom TypeScript compiler -I, --ignoreWarnings [code] Ignore TypeScript warnings by diagnostic code -D, --disableWarnings Ignore every TypeScript warning -P, --project [path] Path to TypeScript project (or \`false\`) -O, --compilerOpti
閱讀完整內容

ubuntu 日常(X)紀錄

今天開機發現了螢幕log in的部分沒有了input field的黑色小框框 我猜是周五裝了一些東西沒有仔細檢查就做了update的關係吧.... 情況大概跟 這篇 有點像 不過還是可以輸入進去畫面 不過進去後所有的東西都跑掉啦，button的邊框、選擇的邊框、filesystem變得我都認不出來你是啥鬼、Wallpaper變黑的 第一直覺是unity你又再玩我了，基本上ubuntu有關視覺效果部分找unity算帳大概八九不離十 不過在檢查的時候一時不小心手賤KEY了以下指令 $ sudo startx GOOD  我的login部分可以loop了.... ctrl+alt+f1切上Terminal趕快把家目錄底下的.Xauthority幹掉重開再進去 接下來就是回復桌面的項目... sudo apt-get udpate sudo apt-get autoremove ubuntu-desktop unity sudo apt-get install ubuntu-desktop unity 或許有人說不是用 sudo apt-get install -reisntall ubuntu-desktop 就好，我試過，很神奇的沒有用... 結果我的桌面依然沒有出現不過按鈕其他的地方正常啦 想說就算了 之前因為有動過.conf的地方  很多東西要重來 開始處理輸入法問題((對  我的輸入法也跑掉了 這中間又發生一件手殘的事情.... sudo apt-get autoremove ibus 導致我的top banner 和 launch bar消失 然後就開始默默地重新安裝起了ubuntu-desktop 和 unity... 參考的是 這篇 然後回頭想到是不是我只有update沒有進行過一次upgrade 於是做了一次 sudo apt-get upgrade 謝天謝地  背景、launch bar、top banner全部都回來了，覺得開心
閱讀完整內容

nodejs async await promise

其實es6是yield來做標題所述的流程控制, 不過說真的我比較習慣用promise with async await... setTimeout (() = > { console .log ( 1 )}, 5 ); setTimeout (() = > { console .log ( 2 )}, 1 ); setTimeout (() = > { console .log ( 3 )}, 3 ); setTimeout (() = > { console .log ( 4 )}, 2 ); 以下是結果 2 4 3 1 這樣的情況最容易發生在讀取外部資料時程式在還未接取完全資料,流程卻繼續進行下去 以往是使用callback function來解決這個衝突, 不過這樣非常形成callback hell導致程式維護以及閱讀不容易 目前的nodejs以及新的瀏覽器都有提供了promise的用法,在nodejs 7.0以上的版本有支援async await的語法, Typescript於 2.1也可以編譯async await後在es3 es5的情境下使用 剛剛寫的是用typescript不過在沒有加註情況下跟es6差不多.... 假若說我希望是顯示結果是1 2 3 4這樣照順序下來的話... new Promise ((res,rej) = > { setTimeout (() = > {res( 1 )}, 5 ); }).then(res = > { console .log (res); return new Promise ((res,rej) = > { setTimeout (() = > {res( 2 )}, 1 )}) }).then((res) = > { console .log (res); return new Promise ((res,rej) = > { setTimeout (() = > {res( 3 )}, 3 )}) }).then((res) = > { console .log (res); return new
閱讀完整內容