✤ 讀懂本書

未來前端開發有發展前途嗎？

前端開發目前非常熱門，隨著前端開發市場持續擴大，不僅是網頁，甚至行動端、PC 端應用都可以使用前端技術進行開發。現在一線大公司都已經使用前端技術來開發自己的手機App 了，例如微信小程式、淘寶天貓、京東、餓了麼等，其火爆程度一目了然。

—現在入門還來得及嗎？種一棵樹最好的時間是十年前，其次是現在！

你還在用jQuery 嗎？已經過時啦！

雖然有很多舊網站還在使用jQuery，但是大多數公司的應徵標準早已改變。前端開發在這些年高速發展，技術更新速度很快，如果想保持自己的競爭力，必須持續保持學習狀態。現在想在前端開發領域找到一份好工作，則必須學好Angular、React、Vue 三大架構！

—各大應徵網站都可以搜一搜看一看，要不要學，你看著辦！

Angular 在前端開發中有哪些優勢？

Angular 作為一個比較大而全的前端架構，它使用TypeScript 進行開發，包含服務、範本、雙向綁定、路由、依賴植入等各種便捷的功能，可以讓你的開發效率事半功倍。Angular 由Google 公司開發並維護，具有許多的開發者和活躍的社區支援，而且中文文件翻譯十分全面。

—三大架構選擇困難怎麼辦？小孩才做選擇，成年人全部都要！

本書真的適合你嗎？

只要你擁有一定的前端開發基礎或有AngularJS 的開發經驗，那麼本書就能幫助你順利入門Angular7。從環境架設到TypeScript 語法說明，從內建指令到元件表單的每一個基礎知識，我們都一步步地教你學會。

—基礎知識太多怕學不會？

不用擔心，每個章節都配有實例幫助你了解關鍵的基礎知識

✤ 本書有關的技術或架構

■ HTML

■ CSS

■ Chrome 瀏覽器偵錯

■ Angular

■ HTTP

■ Karma

■ NPM

■ Git

■ JavaScript

■ SCSS

■ JSON

■ Ng-Zorro

■ HTTPS

■ Protractor

■ Node.js

■ Visual Studio Code

■ TypeScript

■ LESS

■ Json-serve

■ Ng-Alain

■ Jasmine

■ Postman

■ CNpm

✤ 本書有關的範例和案例

■ Hello Angular

■ 自訂結構型指令

■ 路由架構的架設

■ 單元測試常用 API

■ 城市元件

■ 使用者資訊頁

■ 端對端測試常用 API

■ 使用 json-server 實現增刪改查

■ 待辦列表

■ 商場後台管理系統

■ 製作一個 HTTP 攔截器

■ 在登入元件實現範本驅動型表單

■ 使用回應式表單建置個人資料頁

✤ 本書特點

（1） 實例為主、理論為輔，本書以理論知識的介紹為輔，以大量程式範例為主，透過許多精心選擇的典型實例，幫助讀者更進一步地了解Angular7 開發中的重點、困難。

（2） 循序漸進、輕鬆易學，本書的章節安排由淺入深，從簡單的基礎知識開始，一點點增加難度，觸發讀者的閱讀興趣，讓讀者能夠真正學習到Angular 的使用技巧。

（3） 技術新穎、與時俱進，採用目前最新的Angular7 版本，避免學習舊版本導致知識不通用。結合時下熱門的技術，如Node.js、jsonserver、Ng-Zorro 等，讓讀者在學習Angular 的同時，了解熟識更多相關的流行技術。對於無法全面說明的一些架構，還列出了官方文件的詳細網路位址以便於讀者上網查閱。

（4） 接近讀者、結合實際，書中使用的UI（使用者介面）架構、自動測試架構等，都是實際開發中常見的、使用率高的架構，保障讀者可以學以致用。

✤ 本書讀者

■ Angular 開發初學者

■ 前端開發工程師

■ 前端架構師

■ 從事後端開發且對前端開發技術有興趣的人員

■ 想學習 Angular 自己開發網頁的人員

■ 可作為大專院校和教育訓練學校相關專業的 Web 前端開發實作教學

✤ 本書程式碼

為求程式正確執行展現全書內容，本書程式碼保留原作者之簡體中文格式。讀者下載後解壓並且對照本書執行範例。

✤ 讀懂本書

未來前端開發有發展前途嗎？

前端開發目前非常熱門，隨著前端開發市場持續擴大，不僅是網頁，甚至行動端、PC 端應用都可以使用前端技術進行開發。現在一線大公司都已經使用前端技術來開發自己的手機App 了，例如微信小程式、淘寶天貓、京東、餓了麼等，其火爆程度一目了然。

—現在入門還來得及嗎？種一棵樹最好的時間是十年前，其次是現在！

你還在用jQuery 嗎？已經過時啦！

雖然有很多舊網站還在使用jQuery，但是大多數公司的應徵標準早已改變。前端開發在這些年高速發展，技術更新速度很快，如果想保持自己的競爭力，...

01 初識Angular
1.1 Angular 簡介
1.2 架設開發環境
1.3 實戰練習：第一個Angular 程式
1.4 Angular UI 函數庫
1.5 小結

02 初識TypeScript
2.1 TypeScript
2.1 TypeScript 簡介
2.2 資料類型
2.3 函數
2.4 類別
2.5 小結

03 指令
3.1 指令的分類
3.2 內建指令
3.3 實戰練習：自訂結構型指令
3.4 小結

04 使用元件打造你的專案
4.1 元件
4.2 註釋
4.3 生命週期
4.4 資料傳遞
4.5 實戰練習：城市元件
4.6 小結

05 依賴植入
5.1 控制反轉與依賴植入
5.2 Angular 中的依賴植入
5.3 實戰練習：使用者資訊頁
5.4 小結

06 HTTP
6.1 HTTPClient—發送第一條網路請求
6.2 HTTP 協定基礎知識
6.3 HTTP 與HTTPS
6.4 實戰練習：製作一個HTTP 攔截器
6.5 小結

07 表單
7.1 Angular 中的表單
7.2 實戰練習：範本驅動型表單
7.3 實戰練習：回應式表單
7.4 小結

08 路由
8.1 路由的基本用法
8.2 路由的位置策略
8.3 路由的跳躍與傳參
8.4 子路由
8.5 實戰練習：路由架構的架設
8.6 小結

09 Angular 中的測試
9.1 測試的意義
9.2 第一個測試實例
9.3 Angular 測試工具
9.4 端對端測試
9.5 小結

10 後台模擬環境的架設
10.1 前後端分離
10.2 Postman 的安裝與使用
10.3 json-server 的安裝與使用
10.4 實戰練習：使用json-server 實現增刪改查
10.5 小結

11 專案實戰：待辦列表
11.1 待辦列表設計
11.2 待辦列表的建立
11.3 待辦列表的開發
11.4 修改為網路請求應用
11.5 小結

12 專案實戰：商場後台管理系統
12.1 專案設計
12.2 專案起步
12.3 路由的建置
12.4 資產盤點模組開發
12.5 商品管理模組的開發
12.6 個人中心模組的開發
12.7 訊息管理模組的開發
12.8 小結

01 初識Angular
1.1 Angular 簡介
1.2 架設開發環境
1.3 實戰練習：第一個Angular 程式
1.4 Angular UI 函數庫
1.5 小結

02 初識TypeScript
2.1 TypeScript
2.1 TypeScript 簡介
2.2 資料類型
2.3 函數
2.4 類別
2.5 小結

03 指令
3.1 指令的分類
3.2 內建指令
3.3 實戰練習：自訂結構型指令
3.4 小結

04 使用元件打造你的專案
4.1 元件
4.2 註釋
4.3 生命週期
4.4 資料傳遞
4.5 實戰練習：城市元件
4.6 小結

05 依賴植入
5.1 控制反轉與依賴植入
5.2 Angular 中的依賴植入
5.3 實戰練習：使...