標籤: angular

將產品發佈到正式環境 最簡單的方法是 [crayon-64199b94bf6a0886621863/] 將所有dist/資料夾底下的文件複製一份到伺服器上 如果想順帶設置base href至<base href="/my/app/">，則可加下面參數 [crayon-64199b94bf6ab288126324/] 若有使用Router功能，將所有找不到的頁面都導向index.html

TypeScript配置 TypeScript是Angular應用開發中使用的主語言。瀏覽器不能直接執行TypeScript，得先用tsc編譯器轉譯(transpile)成JavaScript，而且編譯器需要進行一些配置。而配置的檔案名稱就是tsconfig.json 這邊是官方關於此配置文件的詳細說明：tsconfig.json tsconfig.json 下面為一個tsconfig.json的

安裝NPM環境 Angular應用程序以及Angular本身都依賴於很多第三方包(包括Angular自己)提供的特性和功能。這些包由Node包管理器( npm )負責安裝和維護。 因此Node.js和npm是做Angular開發的基礎。 這邊是Node.js下載連結：Downloads NPM 如果在電腦中需要同時運行多個不同版本的npm，可以使用nvm來管理他們：nvm package.json

Ahead-of-Time (AOT)編譯 在Angular 2 中有兩種編譯模式： JIT(Just-in-Time)：Angular預設是使用 Just-in-Time (JIT) 即時編譯，等瀏覽器下載完 *.js 檔案後，會在用戶端的瀏覽器編譯 Angular 的 JS 程式碼，接著才會渲染畫面。 AOT(Ahead-of-Time)：在程式發佈之前就透過 Angular Compiler

什麼是Angular Universal 下面是一段截錄於https://itw01.com/G3MBE3P.html對Angular Universal目的的說明 雖然Angular是一種構建Web應用的強大方式，但是長期以來，開發人員都知道它在SEO和可訪問性方面的限制。當然，Google的爬蟲能夠執行JavaScript，但是它並不是唯一的爬蟲方案。例如，在將一個連結提交給Slack之後，它

關於Service worker Angular在第5版新推出了支援Service worker的功能，主要是可以讓Angular更能符合PWA的概念。 所謂PWA（Progressive Web App）是希望能夠讓Web application盡可能的在各種環境（網路環境、手機作業系統等）下都能順暢且不減功能性的運作。 例如要可以支援離線功能，在使用 App 收信、寫信、刪除信件等動作，都需要

語法自動補完 自動完成可以通過在輸入時提供可能要填入的值讓我們選擇，以加速開發的速度，如下圖： 錯誤檢查 可以檢查像是模版變數是否在元件內有對應的變數供綁定 跳轉到模版變數或方法所指向的程式碼位置 單擊並按下F12進入相對應的變數位置 可使用Angular Language Service的IDE Visual Studio Code 1. 直接在VSCode的擴充功能裡下載Angular lan

Angular i18n可做到的事 以本地格式顯示日期，數量，百分比和貨幣。 在組件模板中翻譯文字。 翻譯單數和複數 翻譯HTML屬性的替代文字 可以透過CLI來產生XLS檔案，並透過XLS檔案來設定多語系字串，接著使用下面的字串來產生網站檔案： [crayon-64199b94c180b397137974/] 假如是使用JIT的方式去佈暑網站，則也要在頁面設定LOCALE_ID的值如下： [cr

設定Router Module 若我們的Router設定較為複雜時，可將Router配置為一個Router Module。 首先，設定一個路由模組app-routing.module.ts [crayon-64199b94c2289775286174/] 接著，更新app.module.ts文件 [crayon-64199b94c228f128614369/] 多層的Router Module 我

什麼是Routing? Routing意指路由器，也就是由一個路由器來決定現在要顯示的頁面是什麼 在套用Routing時，會有下列的實踐流程 1. 套用轉址設定（讓伺服器不去真正網址所在的位置去讀取資料，而改由Routing來決定現在要顯示什麼畫面） 2. 由url分析要顯示的狀態是什麼 3. 由狀態去獲得真正要取得那些資訊 4. 從這些資訊組成實體 5. 套用導覽動作，由這個畫面切換至另一個畫面

使用HttpClientModule 官方文件：https://angular.io/api/common/http/HttpClientModule 下面是一個簡單的使用範例，假使我們要讀取這樣格式的JSON資料： [crayon-64199b94c307a526965357/] [crayon-64199b94c307f267096848/] this.results即為一個含有["item1

何謂依賴注入 什麼是依賴注入呢？可以參考這篇文章：理解 Dependency Injection 實作原理 Service的DI 以下為一個service的範例 [crayon-64199b94c3574479189240/] @Injectable()是angular的service使用做依賴注入的裝飾詞，可以使Service成為可被注入的元件。 當我們在provider設定這個服務給這個mod

Angular modularity Angular有提供許多的功能，如FormsModule、HttpModule、RouterModule，都是NgModules。一些第三方資源提供者也有提供許多NgModules可使用，如Material Design、Ionic、AngularFire2等...。 NgModules可將一群功能性一致的components、directives和pipes

Template-Driven Forms與Model-Driven Forms的比較 Reactive forms Reactive forms的驗證大多是直接寫在controller裡的，會是一個明確的、非UI的data flowing。 Reactive forms的reactive patterns可以讓測試與驗證更加簡單。 使用Reactive forms可以用一個樹狀的控制物件來bin

使用Event由template表單傳送資料給Component 利用事件的$event去傳送相關資訊給component [crayon-64199b94c4a35995035981/] 接收則可以透過event.target去存取該htmlInputElement的資料（詳細資料請見此） 下面的範例能將value存至一個變數內且顯示在頁面上： [crayon-64199b94c4a3a0960

Pipes有那些？ 常用的Pipes有DatePipe，UpperCasePipe，LowerCasePipe，CurrencyPipe，和PercentPipe。它們都可用於任何模板。 下面是angular內建所有的的Pipes說明：  AsyncPipe：給Observable或Promise返回已發出的最新值  CurrencyPipe：格式化數字為錢幣格式  DatePipe：格式化一串日

什麼是結構指令 結構指令負責HTML佈局。他們通常通過添加，刪除或操縱元素來塑造或重塑DOM的結構。結構指令很容易識別。通常會有星號(*)在指令屬性名稱前面。 以下是三種常件的結構指令的範例 [crayon-64199b94c525e759680526/] 一個attribute directive改變了元素的外觀或行為。例如，內置的NgStyle指令同時改變幾個元素樣式。 而Structural

Directive有分為結構型和屬性型的，這一篇要先介紹屬性型的Directive。 本篇的範例請見：Attribute Directive example / download example Angular有三種directive： 元件 - 包含template的directive。 結構指令 - 通過添加和刪除DOM元素來更改DOM佈局。(如ngFor、ngIf) 屬性指令 - 改變元素，

模版組件有的時後會需要能夠動態被載入，在這邊會講要如何利用ComponentFactoryResolver來動態加入組件 本篇的例子是需要動態載入廣告橫幅，因為廣告內容會由幾個不同的團隊來打造，要在同一個區塊循環播放不同的廣告，因此較難把不同的廣告放在同一個component，這時後就會需要用到動態載入的功能 完整範例請見： live example / download example The

通過輸入綁定數據從父項傳遞給子項 這是接受數據的子元件的內容hero-child.component.ts 子元件輸要被輸入的屬性有兩個，以@Input開頭來做宣告： [crayon-64199b94c5dd5014836953/] 而這是父元件的內容，透過屬性綁定將值塞進子元件中 [crayon-64199b94c5ddb022591612/] 父元件的完整程式碼如下： [crayon-6419

Lifecycle Hooks 一個組件有一個由Angular管理的生命週期。 Angular創建、產生元件，當元件的數據綁定屬性改變時做檢查並確認，並在元件從DOM中刪除它之前destroys掉該元件。 Angular提供lifecycle hooks，可以讓我們在各個階段加上我們要讓元件做的事情。 directive具有相同的lifecycle hooks。 如何使用Lifecycle Hoo

Template Syntax 在上一篇的Angular架構中有提到，透過模版語法，template可以與component做許多的溝通。 那這一篇就會介紹Angular內建的模版語法參考。 對於tempalte.html來說，所有的html標籤都可以使用，除了<script>以外，這是為了維護模版的安全性，去除template被攻擊的風險，因此在template中所有的<scr

Angular是一個框架，用來編寫html的應用程式，可以用javascript或typescript去編寫。 下圖是官網上所繪製的Angular架構圖： 首先先看最中間那一塊，是由template、metadata、component所構成的，這三個是一個component必備的元素。 所謂的元件可以看之前創建hero那篇文章，我們可以用下面指令創一個元件 [crayon-64199b94c6d

Angular處理http是使用rx（Reactive Programming）來實作的，類別的名稱為rxjs 在閱讀此篇之前，建議可以了解一下何謂Reactive Programming，其核心概念為何，這樣會比較容易理解本篇的內容 推薦閱讀：Reactive Programming 簡介與教學(以 RxJS 為例)、官網 ReactiveX RxJS教學：30 天精通 RxJS 使用http來

什麼是Routing? Routing意指路由器，也就是由一個路由器來決定現在要顯示的頁面是什麼 在套用Routing時，會有下列的實踐流程 1. 套用轉址設定（讓伺服器不去真正網址所在的位置去讀取資料，而改由Routing來決定現在要顯示什麼畫面） 2. 由url分析要顯示的狀態是什麼 3. 由狀態去獲得真正要取得那些資訊 4. 從這些資訊組成實體 5. 套用導覽動作，由這個畫面切換至另一個畫面

這邊是上一篇Angular的主從元件開發的範例檔案：按此下載 創建 HeroService 使用Angular CLI創建一個名為hero的服務 [crayon-64199b94c7eeb743009987/] 我們會看到在src/app下多出了兩個檔案：hero.service.spec.ts和hero.service.ts 打開src/app/hero.service.ts可以看到下面內容 [

創立hero-detail元件 在前一篇新手教程3-使用angular的迴圈及判斷式等功能裡，我們在顯示selectedHero的資訊時是與列表寫在同一個頁面 但如果顯示詳細資訊的地方有需要額外拆分出來，可以在創立一個元件，並將selectedHero傳入元件 [crayon-64199b94c82f0277758109/] 寫入hero-detail的內容 開啟檔案src/app/hero-de

延續上一篇的範例: 請按此下載. 利用*ngFor來做迴圈顯示完整列表 首先開啟src/app/heroes/heroes.component.ts 設定一個變數heroes [crayon-64199b94c8642339995247/] 接著開啟app.component.html，利用*ngFor來迴圈式的顯示列表內容 [crayon-64199b94c8647113130581/] 這時網

使用CLI來為專案建立一個元件 [crayon-64199b94c8998199915119/] 用這個指令，CLI會為我們初始化一個新的元件樣版 這時我們開啟app/heroes/heroes.component.ts [crayon-64199b94c899e668623369/] 只要創建元件，都必需從Angular去import Component。 而@Component則是用來定義這一

這系列的文章為我在官網學習Angular 5時所紀錄下來的學習筆記。 原文的原始教程都可在Angular的Docs看到。 這三十天的筆記大綱預計分為新手教程、功能介紹、技術支援三個部份： 新手教程：一個最簡單的專案，用step by step的方式引導大家去做 功能介紹：一個個介紹Angular裡面各別的功能和特性 技術支援：涵蓋如何佈署、設定以及angular所使用的npm、typescript