0人評分過此書

圖像 Angular 開發入門:打造高靈活度的網頁應用程式

出版日期
2022/01/15
閱讀格式
PDF
書籍分類
學科分類
ISBN
9789864349821

本館館藏

借閱規則
當前可使用人數 30
借閱天數 14
線上看 0
借閱中 0
選擇分享方式

推薦本館採購書籍

您可以將喜歡的電子書推薦給圖書館,圖書館會參考讀者意見進行採購

讀者資料
圖書館
* 姓名
* 身分
系所
* E-mail
※ 我們會寄送一份副本至您填寫的Email中
電話
※ 電話格式為 區碼+電話號碼(ex. 0229235151)/ 手機格式為 0900111111
* 請輸入驗證碼
本書內容改編自第12屆iT邦幫忙鐵人賽Modern Web組佳作網路系列文章《Angular全集中筆記》

Angular是Google所發展出來的完整前端框架,可以用來開發網頁、桌面與行動等各種應用程式;也提供了Angular CLI來簡化開發過程中事務型的作業。
本書以循序漸進的方式,一層一層地由淺入深的介紹Angular前端框架,並搭配著圖像說明與實務案例,讓讀者更容易了解如何利用Angular開發高靈活性的應用程式。

【書籍特色】
從零開始介紹Angular的基礎知識、各種類型的元件、依賴注入等核心內容,幫助讀者快速入門。
利用圖像化方式說明Angular各種觀念,幫助讀者更容易地了解在多種不同程式或元件間的抽象互動。
透過變動的需求範例程式,從簡入深的使用Angular各種概念,帶領讀者更容易地連結前端技術與使用者需求。
完整介紹Angular CLI各種命令,讓讀者熟悉在開發過程中,利用CLI命令簡化事務型的作業。

【目標讀者】
1. 對前端框架有興趣的初學者。
2. 想要完整了解Angular前端框架的前端工程師。
3. 想轉職前端工程師的大大們。


【專業推薦】

目前世面上講授Angular的中文書籍很少,但這本「圖像Angular開發入門」非常適合新手入門,對於想要進入前端框架領域的新手來說,是個相當不錯的選擇。書中講解不少Angular實戰開發中必須瞭解的重要觀念,搭配著完整的範例程式碼,初學者可以直接從線上就能體驗Angular的開發過程,也可以透過互動的方式快速掌握精髓之處。
多奇數位創意技術總監、Google Developer Expert、Microsoft MVP
──Will 保哥 | 2021/8/16
  • 01 進入 Angular 世界的大門
    • 1.1 Angular 簡介
      • 1.1.1 Angular 的發展歷史
      • 1.1.2 Angular 特性
    • 1.2 建置 Angular 開發環境
      • 1.2.1 安裝 Node.js
      • 1.2.2 安裝 Angular CLI
      • 1.2.3 利用 Angular CLI 建立專案
      • 1.2.4 啟動 Angular 應用程式
  • 02 專案結構與模組(Module)
    • 2.1 Angular 專案檔案結構
      • 2.1.1 開發相依套件檔案
      • 2.1.2 Angular 專案定義檔
      • 2.1.3 TypeScript 組態設定檔
      • 2.1.4 Angular 應用程式檔案
      • 2.1.5 環境設定檔
    • 2.2 Angular 模組
      • 2.2.1 什麼是 Angular 模組
      • 2.2.2 @NgModule 裝飾器的定義
      • 2.2.3 BrowserModule 與 CommonModule
  • 03 應用程式的基石– 元件(Component)
    • 3.1 元件的概述
      • 3.1.1 什麼是 Angular 元件
      • 3.1.2 利用 Angular CLI 建立元件
      • 3.1.3 @Component 裝飾器的定義
    • 3.2 單向繫結(One-way binding)
      • 3.2.1 文字插值(Text interpolation)
      • 3.2.2 事件繫結(Event Binding)
      • 3.2.3 屬性繫結(Property / Attribute Binding)
      • 3.2.4 樣式繫結(Style Binding)
      • 3.2.5 類別繫結(Class Binding)
    • 3.3 巢狀元件間的互動
      • 3.3.1 利用 @Input 裝飾器接收父元件資料
      • 3.3.2 利用 @Attribute 裝飾器接收父元件資料
      • 3.3.3 利用 @Output 裝飾器通知父元件
      • 3.3.4 雙向繫結(Two-way Binding)
      • 3.3.5 利用範本參考變數使用子元件屬性與方法
    • 3.4 頁面範本的封裝
      • 3.4.1 封裝頁面範本
      • 3.4.2 動態內容投影
    • 3.5 生命週期
      • 3.5.1 輸入屬性值變更監控
      • 3.5.2 元件初始化作業
      • 3.5.3 自訂變更檢測
      • 3.5.4 動態內容投影的初始與變更檢測
      • 3.5.5 頁面檢視的初始與變更檢測
      • 3.5.6 元件實體銷毀
    • 3.6 元件樣式
      • 3.6.1 檢視封裝模式(View encapsulation model)
      • 3.6.2 特殊的選擇器
  • 04 功能擴增的黑魔法 – 指令(Directive)
    • 4.1 指令的概述
      • 4.1.1 什麼是 Angular 指令
      • 4.1.2 利用 Angular CLI 建立指令
      • 4.1.3 @Directive 裝飾器的定義
    • 4.2 Angular 內建指令
      • 4.2.1 清單列表 –  ngFor
      • 4.2.2 條件判斷 –  ngIf
      • 4.2.3 多個條件判斷 – ngSwitch
      • 4.2.4 動態元件載入 –  ngComponentOutlet
      • 4.2.5 利用 <ng-container> 避免改變頁面結構
      • 4.2.6 利用 @ViewChild 取得含結構型指令的元素
    • 4.3 自訂 Angular 指令
      • 4.3.1 自訂變更元素樣式的屬性型指令(Attribute Directive)
      • 4.3.2 自訂改變元素行為的屬性型指令(Attribute Directive)
      • 4.3.3 自訂結構型指令(Structural Directive)
    • 4.4 自訂指令內的繫結
      • 4.4.1 @HostListener 裝飾器
      • 4.4.2 @HostBinding 裝飾器
  • 05 檢視資料的面具 – 管道(Pipe)
    • 5.1 Angular 內建管道
      • 5.1.1 檢視物件資料 – JsonPipe
      • 5.1.2 改變字母大小寫 – TitleCasePipe / LowerCasePipe / UpperCasePipe
      • 5.1.3 限制顯示長度 – SlicePipe
      • 5.1.4 物件轉換成陣列 – KeyValuePipe
      • 5.1.5 數值資料的顯示 – DecimalPipe
      • 5.1.6 百分比資料的顯示 – PercentPipe
      • 5.1.7 貨幣資料的顯示 – CurrencyPipe
      • 5.1.8 日期資料的顯示 – DatePipe
    • 5.2 自訂 Angular 管道
      • 5.2.1 利用 Angular CLI 建立管道
      • 5.2.2 利用管道將陣列資料倒序排列
  • 06 應用程式的橋梁 – 服務(Service)
    • 6.1 自訂 Angular 服務
      • 6.1.1 利用 Angular CLI 建立服務
      • 6.1.2 利用 @Injectable 裝飾器配置可注入的服務
      • 6.1.3 獨體設計模式(Singleton)的服務實體
      • 6.1.4 水平元件間的互動
    • 6.2 利用提供者設定抽換服務
      • 6.2.1 利用 useClass 抽象服務
      • 6.2.2 利用 useExisting 抽象服務
      • 6.2.3 利用 useValue 抽象服務
      • 6.2.4 利用 useFactory 抽象服務
      • 6.2.5 提供者範圍
    • 6.3 自訂提供者令牌
      • 6.3.1 類別類型的令牌
      • 6.3.2 字串類型的令牌
      • 6.3.3 InjectionToken 令牌
      • 6.3.4 相同令牌指定多種提供者
    • 6.4 遠端資料的取得
      • 6.4.1 利用 HttpClient 取得遠端資料
      • 6.4.2 利用 AsyncPipe 管道顯示可監控的資料
      • 6.4.3 利用 HttpClient 把資料傳到後端服務
      • 6.4.4 利用 HTTP_INTERCEPTORS 攔截請求
    • 6.5 Angular 內建注入裝飾器
      • 6.5.1 選擇性的注入 – @Optional()
      • 6.5.2 改變注入的起訖位置 – @Self() / @SkipSelf() / @Host
  • 07 範本驅動表單(Template-Driven Form)
    • 7.1 利用範本驅動表單建立表單
      • 7.1.1 範本驅動表單概述
      • 7.1.2 利用 NgModel 指令定義表單模型屬性
      • 7.1.3 利用範本參考變數取得表單模型屬性值
      • 7.1.4 取得 NgForm 型別的表單模型
      • 7.1.5 利用 NgModelGroup 指令定義表單群組
    • 7.2 表單狀態的使用
      • 7.2.1 表單輸入項是否已被點選
      • 7.2.2 表單輸入項是否曾經輸入過
      • 7.2.3 表單輸入項是否驗證通過
      • 7.2.4 表單輸入項是否為可輸入狀態
      • 7.2.5 表單是否提交過
    • 7.3 表單的欄位驗證
      • 7.3.1 設定必填的欄位驗證
      • 7.3.2 設定欄位最小與最大長度驗證
      • 7.3.3 設定 Email 格式驗證
      • 7.3.4 數值欄位範圍驗證
      • 7.3.5 設定正規化表示式驗證
      • 7.3.6 自訂表單驗證指令
  • 08 響應式表單(Reactive Form)
    • 8.1 利用響應式表單建立表單
      • 8.1.1 響應式表單概述
      • 8.1.2 利用 FormControl 建立單一欄位的表單
      • 8.1.3 利用 FormGroup 建立表單群組
      • 8.1.4 利用 FormArray 建立表單陣列
      • 8.1.5 利用 FormBuilder 建立表單
    • 8.2 表單的欄位驗證
      • 8.2.1 設定表單欄位驗證
      • 8.2.2 自訂欄位同步驗證方法
      • 8.2.3 自訂欄位非同步驗證方法
    • 8.3 表單模型常用方法
      • 8.3.1 表單值的存取與監控
      • 8.3.2 表單陣列結構的操作
      • 8.3.3 表單狀態的設定與監控
      • 8.3.4 表單驗證的設定
    • 8.4 自訂表單元件
      • 8.4.1 實作 ControlValueAccessor 介面
      • 8.4.2 設定 NG_VALUE_ACCESSOR 令牌提供者
      • 8.4.3 實作 Validator 介面
      • 8.4.4 設定 NG_VALIDATORS 令牌提供者
  • 09 功能頁面的切換 – 路由(Router)
    • 9.1 利用路由切換頁面
      • 9.1.1 應用程式的路由模組
      • 9.1.2 基本路由定義
      • 9.1.3 轉址路由定義
      • 9.1.4 萬用路由(wildcard route)定義
      • 9.1.5 利用 routerLink 指令切換路由頁面
      • 9.1.6 利用 Router 服務方法切換路由頁面
    • 9.2 路由的參數與資料傳遞
      • 9.2.1 路由參數的傳遞與取得
      • 9.2.2 查詢字串的傳遞與取得
      • 9.2.3 路由資料的傳遞與取得
    • 9.3 子路由與延遲載入(Lazy Loading)
      • 9.3.1 子路由的設定
      • 9.3.2 延遲載入的設定
    • 9.4 路由守門員(Router Guard)
      • 9.4.1 利用 Angular CLI 建立路由守門員
      • 9.4.2 檢查是否有權限進入頁面
      • 9.4.3 檢查是否可以離開頁面
    • 9.5 其他路由設定
      • 9.5.1 Angular 內建路由策略
      • 9.5.2 追蹤與訂閱路由事件
      • 9.5.3 強制重新整理頁面
  • 10 開發、建置與部署
    • 10.1 Angular CLI 常用指令
      • 10.1.1 建立函式庫專案
      • 10.1.2 利用 Schematics 管理套件與建立元件
      • 10.1.3 執行單元測試
      • 10.1.4 程式碼風格檢查
    • 10.2 應用程式的建置組態
      • 10.2.1 工作空間組態
      • 10.2.2 靜態檔案的設定
      • 10.2.3 全域樣式與 JavaScript 檔案配置
      • 10.2.4 不同執行環境變數的配置
    • 10.3 部署應用程式
      • 10.3.1 利用 ng build 命令建置應用程式
      • 10.3.2 IIS 站別設定

評分與評論

請登入後再留言與評分
幫助
您好,請問需要甚麼幫助呢?
使用指南

客服專線:0800-000-747

服務時間:週一至週五 AM 09:00~PM 06:00

loading