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 <selector&g

對於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 # 可以將

來紀錄一下最近遇到的一些小問題 用新的工具就是踩坑加上撞牆 對於在typescript上面使用外部的模組就是會有許許多多的狀況以及需要適應的地方 拿剛剛做的小東西來說明好了 import { Component , OnInit , ElementRef , Inject , AfterViewInit } from '@angular/core' ; declare let jQuery : any ; @ Component ({ ... }) export class test implements OnInit , AfterViewInit { elementRef : ElementRef ; logs = new Array(); constructor ( @ Inject ( ElementRef ) elementRef : ElementRef ) { this . elementRef = elementRef ; } ngOnInit() { let $button = jQuery ( this . elementRef . nativeElement ). find ( ".btn" ); $button . click (() => { let log = jQuery ( this ). attr ( 'log' ); ... logPush ( log ); function logPush ( log ){ this . logs . push ( log ); } }) } } 這只是一個簡易的示範使用jquery來實做button當被點擊到的時候進行處理 當然在ng2有提供(click)="onClick()&

今天在修改angularjs踩到顆地雷 主要是因為以下的code function init () { $scope . item . list = getList (); } function getList () { var items = new Array(); $http . get ( URL ). then ( function ( data ) { items = data ; }, function ( res ) { items = [{ "error" : "queryFailed" }] }); return items ; } 這樣在console.log叫出來看，$scopr.item.list會變成 [] 中間沒有東西 原因是在呼叫函式後，$http做的是Ajax的動作，他要去從遠端把資料拉出來 可是問題是這樣的傳輸需要時間，結果在傳輸狀態下return先被啟用了 花了有點長的時間去查詢解決辦法 我之前就有發生過這樣的問題，然後用callback解決掉，可是這樣搞總不是辦法，而且也不是我要的東西 後來採用了promise以及宣告的順序解決掉這個問題 這個例子中就是模仿我專案的情況，首先先開始init的function再進行getList的請求 執行後$scopr.item.list就會出錯 於是我將它改成以下的方式 function pre (){ getList (). then ( function ( data ){ onInit ( data ) }); } function onInit ( items ) { $scope . item . list = getList (); } function getList () { var items = new Array(); var deferred = $q . defer (); $http . get ( URL

開始用typescript做開發了((目前還是先練習當中 使用情況還算OK，不過對於裝飾器(decorator)的東西，我不是很熟悉可能還要再多練習 Definition files也是還沒有開始動手寫過 目前大概都是非常前面的那種HelloWorld等級的東西 宣告部分來說大概類似底下的 let a: number = 1 ; let b: string = "helloworld" ; function部份為了回傳值，也是更進化了 function returnNumber (i: number ) : number { return i ; } function returnString(str: string ) : string { return str; } 也添加了class的應用，我記得ES6才會有支援 class test{ private m_a: string ; b: number ; constructor (q: string ){ this .m_a = "Hello" + q; this .b = 50 ; } returnA() : string { return this .m_a + this .b; } } let a = new test( "world" ); console.log(a.returnA()); 也添加了很多新概念進去，比原本的JS應該是可以讓其結構更清楚了一些 要不然全程用function+closure做類的處理...做的時候我會真的會回頭看不懂我寫啥鬼... Reference : https://blogs.msdn.microsoft.com/ericsk/2012/10/01/typescript/ https://www.gitbook.com/book/zhongsp/typescript-handbook/details

無言到爆炸，之前就有發生過我還一直忘記怎樣處理 以下是情況發生 打算要把滑鼠加速用掉，結果重新啟動竟然無法進入圖形界面了 檢查log cat /var/log/Xorg.0.log 發現是剛剛滑鼠加速的文件錯誤導致xwindows崩潰再起不能 OK remove之後再重啟一遍，這下又有情況發生 登入界面資訊正確卻又一直重複登入 還好之前有發生過 檢查一下確認是home底下的.Xauthority 的權限出問題 ctrl+alt+f1進入terminal把home底下的.Xauthority 刪除掉讓它重新自建一個 sudo rm -f .Xauthoruty 成功登入！ 媽呀...真的有種一不小心它就會說掰掰給我看啊...

紀錄一下一些在ubuntu當中使用到的一些指令和工具,以及安裝ubuntu 的過程 使用機器 ASUS BX310 core-i5 6200u, Ubuntu 16.04 這台一開始就有256G SSD + 1T HDD 我從HDD切了500G來裝ubuntu((好像有點多... 一開始要先將Ubuntu燒成USB 開機碟 例如說Rufus Asus的bios沒有預設usb boot on的模式 所以我從Win10下手 Win10 > 設定 > 更新與安全性 > 復原  > 進階重新啟動 > 立即重新啟動 usb在點選之前就要先插在機器上, 然後點選usb開機的選項, 這樣就可以使用usb開機了 如果要從bios啟用,就要先create option把usb的path設定進去,不過這部份不熟我沒有用～ 接下來選擇語言及一些有的沒的,我語言界面全程使用英文避免以後會有問題出現,有些程式編碼不吃中文+空格就會很麻煩... 到這邊選擇Something else如果選擇了windows boot manager聽說會有問題,不過我都切了就沒有必要啦 接下來會到選擇disk的部份在freespace的地方切一個swap出來 大小我用8192MB 剩下的space就是根目錄安裝啦 >> 點選freespace兩下可以選擇詳細對這空間做什麼指令, 最底下有個Mount Point,如果對它做更為細緻的調整就在那邊進行,我只有切swap 和根目錄(就是一個/的符號)的設定 接下來也是在硬碟設定那邊最下面有個device for bootloader 的選項  我這台的HDD竟然是在sda, windows bootloader在sdb....... 選項選取sda不要選到sda1 2 3之類的,來建立開機選項,這樣就可以install now了 安裝完畢後因為我這台跟16.04用的linux kernel 4.4有點不合,用沒多久滑鼠鍵盤沒有反應,似乎xwindow哪邊crash了... 幸好主管即時救援, 發現了也有些人會出現同樣問題, 升級了linux kernel到4.7後就沒有問題了 OK, 立刻求救google大神 how to update linux k

現在有超多的前端編輯器讓人使用，我本身有玩過的有Atom, VI, Notepad++, Brackets, Visual Studio Code, Sublime Text 3 依照我使用經驗的部分來介紹一下各個編輯器中我認為的差異所在吧~ 1. Atom   背景不說了，單純討論使用觀感，我用的是算頗早之前0.35的版本(這篇文章目前1.12)，很多功能都沒有、不足或者有Bug，除了那個足夠炫麗的畫面以外，實際給我應用價值為0。基於Electron核心，所以雖然是編輯器，實際上算是瀏覽器(Chromium)做的應用程式。當時光是啟動耗費的記憶體就已經足夠嚇人，更別說開啟大型專案那執行速度根本就是慢... 適合於喜歡酷炫效果的人 2. VI 該怎說呢...對於被圖形介面寵壞的我，第一次碰到VI跟白癡一樣，沒有辦法用滑鼠對我來說根本就是沒用，所以接觸不多..用ssh遠端修改檔案才會使用到他，但是寫code到現在，完全根本不想碰滑鼠能夠用shortcut就用。開始感覺到VI的實際強大之處，可惜的是VI指令我一直沒有背.. 適合於完全不想用滑鼠的人 3. Notepad ++   第一個碰到的編輯器，當初是拿來寫C/C++專用，快、小、方便就是它的特點，裝模組後可以擴充很多功能，不過在使用Notepad++期間我是一直使用他最基本的功能就是了... 適合於帶著隨身碟到處跑的人 4. Brackets   我覺得光是LiveView就是這個編輯器的強大之處，啟動速度跟他的兄弟Atom差不多，但是LiveView模式就傲視群雄了，不用Save、Reload就可以直接看到結果，不僅是class連JS的修改都可以及時預覽，同時也有不錯的Class Hint的套件可供使用，不僅是Style連外部的CSS都可以吃到。 適合於Layout設計排版，要觀看及時效果的人 5. Visual Studio Code   我第2常用的編輯器，啟動是Electron三兄弟中(Atom, Brackets)最快的，寫TypeScript才開始真正接觸到，雖然在Beta版本就有接觸過，但是因為同樣的問題 記憶體、速度 而使我之前只把它當作玩具而已。但是現在深入之後真正的體會到Vi

最近因為Electron與nodejs和工作上的關係，開始了對AngularJS的學習，約莫在9月初的尷尬時間點開始了Study和Survey。 Ang2 和 Ang1兩邊遊蕩，後者和前者聽說架構上差異頗大以及效能上也有差距，但是Ang2那時仍然在測試中，不過就在隔一個禮拜剛好看到final release 2.0.0決定開始進行對Ang2以及TypeScript(簡稱TS)的學習。 TS很有趣，跟一般的JS不一樣。對於我剛寫完C++跳來前端來說，TypeScript理解後反而更容易對我的胃口。(題外話:當初是聽說寫後端，結果搞一搞突然在開發前端了...真是各種意想不到...尤其又沒有前輩可以詢問，只好自己單幹) TS是JS的超集，這就不多說了，他可以直接拿JS的function拿來compile，跟我之前在看的CoffeeScript完全不一樣(個人有大括強迫症，CoffeeScript這種我就是各種不習慣)，加上Visual StudioCode的強力支援，在寫JS的東西就可以更細的去做區分了。 因為對於TS仍然在初步學習階段，又加上真的是從無到有(那怕之前已經有JS的經驗)，就不寫太深入的東西了... 以我一開始使用來說: 在nodejs當中開始實際使用TS一定要安裝兩樣東西 npm install typescript typings -g TS OK 沒問題  typings是啥玩意? Typings可以調出modules的definition檔案，近似於C++中的header file，一般來說安裝modules除了利用npm install以外，如果是使用TS就會需要用到Typings額外安裝該模組的.d.ts檔案供TS引入模組使用，如果沒有這檔案要做基本require在TS編譯中可是會報錯誤的喔! 後面安裝Angular2就...之後再說吧  呵呵

選名選了超久.. 這邊大概會記錄下自己的coding的小玩意吧... 可以PO上來的目前來看大概只有JavaScript和PHP...其他大概一些網上看到的軟體介紹 目前研究Angular2 with TypeScript 順便加上一些哩哩摳摳  應該可以讓網頁變的很好玩...?