1. [技術支援-8] 產品發佈設定
      發表時間: 2018-01-18 下午 10:03下午 10:03
      將產品發佈到正式環境 最簡單的方法是 [crayon-63e3af8a7dc39107745589/] 將所有dist/資料夾底下的文件複製一份到伺服器上 如果想順帶設置base href至<base href="/my/app/">,則可加下面參數 [crayon-63e3af8a7dc3f523544673/] 若有使用Router功能,將所有找不到的頁面都導向index.html
    2. [技術支援-7] TypeScript設定
      發表時間: 2018-01-17 下午 10:03下午 10:03
      TypeScript配置 TypeScript是Angular應用開發中使用的主語言。瀏覽器不能直接執行TypeScript,得先用tsc編譯器轉譯(transpile)成JavaScript,而且編譯器需要進行一些配置。而配置的檔案名稱就是tsconfig.json 這邊是官方關於此配置文件的詳細說明:tsconfig.json tsconfig.json 下面為一個tsconfig.json的
    3. [技術支援-6] NPM設定
      發表時間: 2018-01-16 下午 10:03下午 10:03
      安裝NPM環境 Angular應用程序以及Angular本身都依賴於很多第三方包(包括Angular自己)提供的特性和功能。這些包由Node包管理器( npm )負責安裝和維護。 因此Node.js和npm是做Angular開發的基礎。 這邊是Node.js下載連結:Downloads NPM 如果在電腦中需要同時運行多個不同版本的npm,可以使用nvm來管理他們:nvm package.json
    4. [技術支援-5] 佈署方式JIT及AOT介紹
      發表時間: 2018-01-15 下午 10:02下午 10:02
      Ahead-of-Time (AOT)編譯 在Angular 2 中有兩種編譯模式: JIT(Just-in-Time):Angular預設是使用 Just-in-Time (JIT) 即時編譯,等瀏覽器下載完 *.js 檔案後,會在用戶端的瀏覽器編譯 Angular 的 JS 程式碼,接著才會渲染畫面。 AOT(Ahead-of-Time):在程式發佈之前就透過 Angular Compiler
    5. [技術支援-4] Angular Universal
      發表時間: 2018-01-14 下午 10:03下午 10:03
      什麼是Angular Universal 下面是一段截錄於https://itw01.com/G3MBE3P.html對Angular Universal目的的說明 雖然Angular是一種構建Web應用的強大方式,但是長期以來,開發人員都知道它在SEO和可訪問性方面的限制。當然,Google的爬蟲能夠執行JavaScript,但是它並不是唯一的爬蟲方案。例如,在將一個連結提交給Slack之後,它
    6. [技術支援-3] Service worker離線支援
      發表時間: 2018-01-13 下午 10:01下午 10:01
      關於Service worker Angular在第5版新推出了支援Service worker的功能,主要是可以讓Angular更能符合PWA的概念。 所謂PWA(Progressive Web App)是希望能夠讓Web application盡可能的在各種環境(網路環境、手機作業系統等)下都能順暢且不減功能性的運作。 例如要可以支援離線功能,在使用 App 收信、寫信、刪除信件等動作,都需要
    7. [技術支援-2] 讓IDE支援Angular Language Service
      發表時間: 2018-01-12 下午 10:02下午 10:02
      語法自動補完 自動完成可以通過在輸入時提供可能要填入的值讓我們選擇,以加速開發的速度,如下圖: 錯誤檢查 可以檢查像是模版變數是否在元件內有對應的變數供綁定 跳轉到模版變數或方法所指向的程式碼位置 單擊並按下F12進入相對應的變數位置 可使用Angular Language Service的IDE Visual Studio Code 1. 直接在VSCode的擴充功能裡下載Angular lan
    8. [技術支援-1] 支援多語系
      發表時間: 2018-01-11 下午 9:02下午 9:02
      Angular i18n可做到的事 以本地格式顯示日期,數量,百分比和貨幣。 在組件模板中翻譯文字。 翻譯單數和複數 翻譯HTML屬性的替代文字 可以透過CLI來產生XLS檔案,並透過XLS檔案來設定多語系字串,接著使用下面的字串來產生網站檔案: [crayon-63e3af8a7f91d041278562/] 假如是使用JIT的方式去佈暑網站,則也要在頁面設定LOCALE_ID的值如下: [cr
    9. [功能介紹-15] Router進階介紹
      發表時間: 2018-01-10 下午 10:01下午 10:01
      設定Router Module 若我們的Router設定較為複雜時,可將Router配置為一個Router Module。 首先,設定一個路由模組app-routing.module.ts [crayon-63e3af8a802ce169037912/] 接著,更新app.module.ts文件 [crayon-63e3af8a802d4285101336/] 多層的Router Module 我
    10. [功能介紹-14] Router基礎介紹
      發表時間: 2018-01-09 下午 10:02下午 10:02
      什麼是Routing? Routing意指路由器,也就是由一個路由器來決定現在要顯示的頁面是什麼 在套用Routing時,會有下列的實踐流程 1. 套用轉址設定(讓伺服器不去真正網址所在的位置去讀取資料,而改由Routing來決定現在要顯示什麼畫面) 2. 由url分析要顯示的狀態是什麼 3. 由狀態去獲得真正要取得那些資訊 4. 從這些資訊組成實體 5. 套用導覽動作,由這個畫面切換至另一個畫面
    11. [功能介紹-20] HttpClient
      發表時間: 2018-01-08 下午 10:02下午 10:02
      使用HttpClientModule 官方文件:https://angular.io/api/common/http/HttpClientModule 下面是一個簡單的使用範例,假使我們要讀取這樣格式的JSON資料: [crayon-63e3af8a81082108003679/] [crayon-63e3af8a81087146701057/] this.results即為一個含有["item1
    12. [功能介紹-12] Angular裡Service的DI
      發表時間: 2018-01-07 下午 10:01下午 10:01
      何謂依賴注入 什麼是依賴注入呢?可以參考這篇文章:理解 Dependency Injection 實作原理 Service的DI 以下為一個service的範例 [crayon-63e3af8a81572916897327/] @Injectable()是angular的service使用做依賴注入的裝飾詞,可以使Service成為可被注入的元件。 當我們在provider設定這個服務給這個mod
    13. [功能介紹-11] NgModules
      發表時間: 2018-01-06 下午 10:01下午 10:01
      Angular modularity Angular有提供許多的功能,如FormsModule、HttpModule、RouterModule,都是NgModules。一些第三方資源提供者也有提供許多NgModules可使用,如Material Design、Ionic、AngularFire2等...。 NgModules可將一群功能性一致的components、directives和pipes
    14. [功能介紹-10] Reactive Forms (Model-Driven Forms) 
      發表時間: 2018-01-05 下午 10:01下午 10:01
      Template-Driven Forms與Model-Driven Forms的比較 Reactive forms Reactive forms的驗證大多是直接寫在controller裡的,會是一個明確的、非UI的data flowing。 Reactive forms的reactive patterns可以讓測試與驗證更加簡單。 使用Reactive forms可以用一個樹狀的控制物件來bin
    15. [功能介紹-9] Template-Driven Forms
      發表時間: 2018-01-04 下午 10:00下午 10:00
      使用Event由template表單傳送資料給Component 利用事件的$event去傳送相關資訊給component [crayon-63e3af8a829ac027545421/] 接收則可以透過event.target去存取該htmlInputElement的資料(詳細資料請見此) 下面的範例能將value存至一個變數內且顯示在頁面上: [crayon-63e3af8a829b28439
    16. [功能介紹-8] Pipes
      發表時間: 2018-01-03 下午 10:00下午 10:00
      Pipes有那些? 常用的Pipes有DatePipe,UpperCasePipe,LowerCasePipe,CurrencyPipe,和PercentPipe。它們都可用於任何模板。 下面是angular內建所有的的Pipes說明:  AsyncPipe:給Observable或Promise返回已發出的最新值  CurrencyPipe:格式化數字為錢幣格式  DatePipe:格式化一串日
    17. [功能介紹-7] Structural Directives
      發表時間: 2018-01-02 下午 10:00下午 10:00
      什麼是結構指令 結構指令負責HTML佈局。他們通常通過添加,刪除或操縱元素來塑造或重塑DOM的結構。結構指令很容易識別。通常會有星號(*)在指令屬性名稱前面。 以下是三種常件的結構指令的範例 [crayon-63e3af8a831ad775007525/] 一個attribute directive改變了元素的外觀或行為。例如,內置的NgStyle指令同時改變幾個元素樣式。 而Structural
    18. [功能介紹-6] Attribute Directives
      發表時間: 2018-01-01 下午 10:00下午 10:00
      Directive有分為結構型和屬性型的,這一篇要先介紹屬性型的Directive。 本篇的範例請見:Attribute Directive example / download example Angular有三種directive: 元件 - 包含template的directive。 結構指令 - 通過添加和刪除DOM元素來更改DOM佈局。(如ngFor、ngIf) 屬性指令 - 改變元素,
    19. [功能介紹-5] 動態載入元件
      發表時間: 2017-12-31 下午 10:00下午 10:00
      模版組件有的時後會需要能夠動態被載入,在這邊會講要如何利用ComponentFactoryResolver來動態加入組件 本篇的例子是需要動態載入廣告橫幅,因為廣告內容會由幾個不同的團隊來打造,要在同一個區塊循環播放不同的廣告,因此較難把不同的廣告放在同一個component,這時後就會需要用到動態載入的功能 完整範例請見: live example / download example The
    20. [功能介紹-4] 組件間的溝通
      發表時間: 2017-12-30 上午 8:59上午 8:59
      通過輸入綁定數據從父項傳遞給子項 這是接受數據的子元件的內容hero-child.component.ts 子元件輸要被輸入的屬性有兩個,以@Input開頭來做宣告: [crayon-63e3af8a83d04927376242/] 而這是父元件的內容,透過屬性綁定將值塞進子元件中 [crayon-63e3af8a83d09044243536/] 父元件的完整程式碼如下: [crayon-63e3
    21. [功能介紹-3] Hooks的生命週期
      發表時間: 2017-12-29 下午 9:59下午 9:59
      Lifecycle Hooks 一個組件有一個由Angular管理的生命週期。 Angular創建、產生元件,當元件的數據綁定屬性改變時做檢查並確認,並在元件從DOM中刪除它之前destroys掉該元件。 Angular提供lifecycle hooks,可以讓我們在各個階段加上我們要讓元件做的事情。 directive具有相同的lifecycle hooks。 如何使用Lifecycle Hoo
    22. [功能介紹-2] 資料繫結的模版語法
      發表時間: 2017-12-28 上午 12:10上午 12:10
      Template Syntax 在上一篇的Angular架構中有提到,透過模版語法,template可以與component做許多的溝通。 那這一篇就會介紹Angular內建的模版語法參考。 對於tempalte.html來說,所有的html標籤都可以使用,除了<script>以外,這是為了維護模版的安全性,去除template被攻擊的風險,因此在template中所有的<scr
    23. [功能介紹-1] Angular架構
      發表時間: 2017-12-27 上午 9:55上午 9:55
      Angular是一個框架,用來編寫html的應用程式,可以用javascript或typescript去編寫。 下圖是官網上所繪製的Angular架構圖: 首先先看最中間那一塊,是由template、metadata、component所構成的,這三個是一個component必備的元素。 所謂的元件可以看之前創建hero那篇文章,我們可以用下面指令創一個元件 [crayon-63e3af8a84c
    24. [新手教程-7] 使用http來與API溝通
      發表時間: 2017-12-26 下午 10:45下午 10:45
      Angular處理http是使用rx(Reactive Programming)來實作的,類別的名稱為rxjs 在閱讀此篇之前,建議可以了解一下何謂Reactive Programming,其核心概念為何,這樣會比較容易理解本篇的內容 推薦閱讀:Reactive Programming 簡介與教學(以 RxJS 為例)、官網 ReactiveX RxJS教學:30 天精通 RxJS 使用http來
    25. [新手教程-6] 使用Routing來切換頁面
      發表時間: 2017-12-25 上午 12:10上午 12:10
      什麼是Routing? Routing意指路由器,也就是由一個路由器來決定現在要顯示的頁面是什麼 在套用Routing時,會有下列的實踐流程 1. 套用轉址設定(讓伺服器不去真正網址所在的位置去讀取資料,而改由Routing來決定現在要顯示什麼畫面) 2. 由url分析要顯示的狀態是什麼 3. 由狀態去獲得真正要取得那些資訊 4. 從這些資訊組成實體 5. 套用導覽動作,由這個畫面切換至另一個畫面
    26. [新手教程-5] 建立Service
      發表時間: 2017-12-24 上午 8:45上午 8:45
      這邊是上一篇Angular的主從元件開發的範例檔案:按此下載 創建 HeroService 使用Angular CLI創建一個名為hero的服務 [crayon-63e3af8a85d30570056200/] 我們會看到在src/app下多出了兩個檔案:hero.service.spec.ts和hero.service.ts 打開src/app/hero.service.ts可以看到下面內容 [
    27. [新手教程-4] Angular的主從元件開發
      發表時間: 2017-12-23 上午 8:00上午 8:00
      創立hero-detail元件 在前一篇新手教程3-使用angular的迴圈及判斷式等功能裡,我們在顯示selectedHero的資訊時是與列表寫在同一個頁面 但如果顯示詳細資訊的地方有需要額外拆分出來,可以在創立一個元件,並將selectedHero傳入元件 [crayon-63e3af8a860c8719584663/] 寫入hero-detail的內容 開啟檔案src/app/hero-de
    28. [新手教程-3] 使用Angular的迴圈及判斷式等功能
      發表時間: 2017-12-22 下午 11:10下午 11:10
      延續上一篇的範例: 請按此下載. 利用*ngFor來做迴圈顯示完整列表 首先開啟src/app/heroes/heroes.component.ts 設定一個變數heroes [crayon-63e3af8a863ca770707680/] 接著開啟app.component.html,利用*ngFor來迴圈式的顯示列表內容 [crayon-63e3af8a863cf931911445/] 這時網
    29. [新手教程-2] 創立Angular的元件
      發表時間: 2017-12-21 上午 9:52上午 9:52
      使用CLI來為專案建立一個元件 [crayon-63e3af8a86712002752483/] 用這個指令,CLI會為我們初始化一個新的元件樣版 這時我們開啟app/heroes/heroes.component.ts [crayon-63e3af8a86718631682489/] 只要創建元件,都必需從Angular去import Component。 而@Component則是用來定義這一
    30. [新手教程-1] 建立一個Angular5的專案
      發表時間: 2017-12-20 下午 11:32下午 11:32
      這系列的文章為我在官網學習Angular 5時所紀錄下來的學習筆記。 原文的原始教程都可在Angular的Docs看到。 這三十天的筆記大綱預計分為新手教程、功能介紹、技術支援三個部份: 新手教程:一個最簡單的專案,用step by step的方式引導大家去做 功能介紹:一個個介紹Angular裡面各別的功能和特性 技術支援:涵蓋如何佈署、設定以及angular所使用的npm、typescript