Angular-cli

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

# 可以將網站進行最小化,使用prod的模式

ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

留言

張貼留言

這個網誌中的熱門文章

Typescript 4_ 那些奇怪的字(上) extends, infer, typeof

這篇中途有點難產，畢竟我好像不小心難度拉太高了，所以在思考名詞解釋的情況的時候都是有點不太合適的感覺...另外這些關鍵字詞有 extends, infer, typeof, as, in, keyof, never, unknown, void, static, get, set, readonly，前面會先介紹一部分。 在這篇中，來介紹一下會在typescript看到的關鍵字詞 extends  繼承屬性 extends  的使用上，跟前一篇 & 的使用有那麼一點的類似，不過在typescript的用法更偏向於物件導向的 繼承 / inheritance 的概念。 那...什麼是繼承？就請去找oop相關的書籍，這邊就不再贅述了。畢竟寫oop的前輩對於繼承的相關說明都很透徹了，就無需我再重新解釋:P 有趣的是在typescript的實作中， extends 是可以拿來做 conditional type 來實作的。 也就是可以利用3元表達式  a ? b : c  來對  generic type  做更進一步的屬性判定。 interface IFoo { props: string ; } interface IFooReturn { result: string ; } interface IBar { name: string ; } interface IBarReturn { result: number ; } function Sample < T >( arg: T ): T extends IFoo ? IFooReturn : IBarReturn ; 而  conditional type  搭配  infer  就有各種的實作產生 infer   type inference  取得function裡面的數值 就如字面上的意義來說，這個是常用來取得  function  裡面的參數值，在 typescript 內建函數  utility types  中，可以看到其實作  ReturnTyp...
閱讀完整內容

Editor 比較~

圖片
現在有超多的前端編輯器讓人使用，我本身有玩過的有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版本就有接觸過，但是因為同樣的問題 記憶體、速度 而使...
閱讀完整內容

live-server and ngrok

照例： github page 最原本我是使用connect搭配 serve-static 實做 const   connect  =  require ( 'connect' ); const   serveStatic  =  require ( 'serve-static' ); connect (). use ( serveStatic ( __dirname )). listen ( 8080 ,  function (){      console . log ( 'Server running on 8080...' ); }); 主要流程大概就是如此，搭配上 ngrok 大概可以測試個ssl需求的東西 後來從其他地方發現live-server這個好用的東西就拿他來做我暫時性測試和restful api的實做 另外live-server有提供live-reload的功能，只要當前關注的資料夾有異動，會自行reload，不過缺點是並不會clean cached 和 hard reload，這點請注意 一樣起手式 yarn global add live-server 在全域底下安裝live-server live-server [--arguments] 在該資料夾底下直接透過cmd、teminal直接啟動，在指令完成時會啟動default browser然後開啟頁面 沒有做其餘的設定的話，基本出來的url為 http://127.0.0.1:8080/ 如果沒有其他的指令的話，這基本上為固定的預設值，當然接下來就是介紹其他我常用的arguments --port=NUMBER 其實liver-server會自行檢測那一個port被佔用，然後自行尋找新的port --cors 這個提供api可以提供Access-Control-Allow-Origin，拿來做api測試服務很好用 --ignore=PATH || --ignorePattern=REGEX 設定忽略的位置，或者透過regular expression來做設定，這項...
閱讀完整內容