天天看點

《AngularJS實戰》——導讀

《AngularJS實戰》——導讀

為何寫作本書

随着網際網路技術的發展,尤其是移動網際網路技術的興起和迅速壯大,前端應用的開發并非簡單靜态頁的制作,越來越多的功能複雜的動态應用由前端來完成。但是,在實作的過程中,前端技術自身有許多的不足,很難實作某些複雜功能。為克服自身的不足,往往需要借助一些常用的類庫和架構,如jquery和backbone等,但這些外部引入的類庫或架構隻友善了代碼開發,并未從根本上改變頁面結構。為了從根本上克服靜态頁在應用開發過程中的不足,我們引入了angularjs架構。

angularjs是目前最熱門的一種前端開發架構,為了簡化,也可直接稱為angular,其實它們都表示一套相同的架構代碼,這套代碼與其他類庫和架構的不同之處在于,它能從html本身的結構去改變開發動态應用的不足,如建立類似于頁面元素的指令,使用{{}}括号的方式綁定資料,将一些邏輯代碼與頁面的元素進行關聯,将html分組為可複用的各類元件。同時,angularjs還很完美地支援頁面中的表單元素和相關的驗證功能。

當然,angularjs中的内容遠不止上述提及的幾個部分,但它的核心功能是通過改變html頁面的結構,增強和擴大dom元素。基于這些提升的功能,開發人員可以非常友善、快捷地開發出一個具有增加、删除、修改、查詢功能的前端應用,而在建構這種應用的過程中,angularjs提供了大量可使用的功能,如資料雙向綁定、服務依賴注入、元件複用、路由導航和應用測試與部署等,這是其他架構不可及之處,也是它的魅力所在。

“臨淵羨魚,不如退而結網”,每一個從事web應用開發的工程師,無論是從事前端開發還是服務端的代碼開發,都有理由更新自己的知識結構,掌握這門炙手可熱的技術。但angularjs畢竟是一門全新的前端開發架構,要求開發人員樹立不同的開發理念和思路才能更好地學習它。是以,借助相應的書籍來引導開發者進行學習是非常有必要的。目前市場中大多數已出版的相關書籍隻是簡單的定義解析與理論灌輸,沒有對應的示例操作,缺乏對讀者真正的實踐指導。本書的誕生,很好地解決了這些難題,也衷心希望讀者能通過對本書的理論學習與實踐演練,早日開發出最為前沿與時尚的web應用。

本書特色

“學以緻用”是本書的一個重要特點,全書始終展現一個“用”字,無論是理論知識的介紹,還是實用示例的開發,無一例外,都是從實用的角度出發,對每一個示例都精心選擇,詳細介紹;為使讀者能夠通過示例執行後的頁面效果加深對應用的了解,對每一個示例都精心編排,扼要說明;全書由淺入深,逐漸推進,以示例為主線,引導讀者的閱讀興趣,是本書的特點之一;全面、詳細、完整地介紹angularjs的功能與特征,又是本書的另外一個重要特點。

如何閱讀本書

本書針對的是web開發者,無論是前端開發,還是背景編碼,都可以使用本書。在閱讀過程中,由于本書的結構是層進式的,章節之間有一定的關聯,是以,建議讀者按章節的編排,逐章閱讀;在閱讀時,盡量不要照抄書中的示例,要了解主要的、核心的代碼,自己動手開發相似功能的應用,并逐漸完善其功能,才能真正掌握其代碼的實質。

前 言

<a href="https://yq.aliyun.com/articles/108205">第1章 初識angular</a>

<a href="https://yq.aliyun.com/articles/108229">1.1 angular簡介</a>

1.1.1 特點

1.1.2 适用範圍

1.1.3 搭建開發angular應用的環境

<a href="https://yq.aliyun.com/articles/108245">1.2 開發簡單的angular應用</a>

示例1-1 編寫一個簡單的angular程式

示例1-2 編寫一個具有計算功能的angular程式

示例1-3 編寫一個綁定頁面元素的angular程式

示例1-4 編寫一個綁定多個頁面元素的angular程式

<a href="https://yq.aliyun.com/articles/108249">1.3 本章小結</a>

<a href="https://yq.aliyun.com/articles/108252">第2章 angular基礎知識</a>

<a href="https://yq.aliyun.com/articles/108258">2.1 angular中的表達式</a>

2.1.1 angular表達式與javascript表達式的差別

示例2-1 angular表達式與javascript表達式之間的互相調用

2.1.2 $window視窗對象在表達式中的使用

示例2-2 $window視窗對象在表達式中的使用

2.1.3 angular表達式的容錯性

示例2-3 angular表達式的容錯性

<a href="https://yq.aliyun.com/articles/108267">2.2 angular中的控制器</a>

2.2.1 控制器的概念

2.2.2 控制器初始化$scope對象

示例2-4 控制器初始化$scope對象

2.2.3 添加$scope對象方法

示例2-5 通過表達式綁定$scope對象的方法

示例2-6 在事件中綁定$scope對象的方法

示例2-7 添加帶參數的$scope方法

2.2.4 $scope對象屬性和方法的繼承

示例2-8 $scope對象中方法和屬性的繼承

<a href="https://yq.aliyun.com/articles/108272">2.3 angular中的模闆</a>

2.3.1 構模組化闆内容

示例2-9 構模組化闆内容

2.3.2 使用指令複制元素

示例2-10 使用指令複制元素

2.3.3 添加元素樣式

示例2-11 添加元素樣式

2.3.4 控制元素的隐藏與顯示狀态

示例2-12 控制元素的隐藏與顯示狀态

<a href="https://yq.aliyun.com/articles/108275">2.4 模闆中的表單控件</a>

2.4.1 表單基本驗證功能

示例2-13 表單基本驗證功能

2.4.2 表單中的checkbox和radio控件

示例2-14 表單中的checkbox和radio控件

2.4.3 表單中的select控件

示例2-15 表單中的select控件

<a href="https://yq.aliyun.com/articles/108276">2.5 本章小結</a>

<a href="https://yq.aliyun.com/articles/108277">第3章 angular的過濾器和作用域</a>

<a href="https://yq.aliyun.com/articles/108281">3.1 模闆中的過濾器</a>

3.1.1 排序方式過濾

示例3-1 排序方式過濾

3.1.2 比對方式過濾

示例3-2 比對方式過濾

3.1.3 自定義過濾器

示例3-3 自定義過濾器

<a href="https://yq.aliyun.com/articles/108337">3.2 過濾器的應用</a>

3.2.1 表頭排序

示例3-4 表頭排序

3.2.2 字元查找

示例3-5 字元查找

<a href="https://yq.aliyun.com/articles/108341">3.3 作用域概述</a>

3.3.1 作用域特點

示例3-6 $watch方法的使用

3.3.2 作為資料模型的作用域

示例3-7 作為資料模型的作用域

<a href="https://yq.aliyun.com/articles/108350">3.4 作用域的層級和事件</a>

3.4.1 作用域的層級

示例3-8 作用域的層級

3.4.2 作用域事件的傳播

示例3-9 作用域事件的傳播

<a href="https://yq.aliyun.com/articles/108355">3.5 本章小結</a>

第4章 angular的依賴注入

4.1 依賴注入介紹

4.1.1 依賴注入的原理

示例4-1 依賴注入的原理

4.1.2 簡單依賴注入的示例

示例4-2 簡單依賴注入的示例

4.2 依賴注入标記

4.2.1 推斷式注入

示例4-3 推斷式注入的示例

4.2.2 标記式注入

示例4-4 标記式注入的示例

4.2.3 行内式注入

示例4-5 行内式注入的示例

4.3 $injector常用api

4.3.1 has和get方法

示例4-6 has和get方法的示例

4.3.2 invoke方法

示例4-7 invoke方法的示例

4.3.3 依賴注入應用的場景

4.4 本章小結

第5章 angular中mvc模式

5.1 mvc模式概述

5.1.1 mvc簡介

5.1.2 使用angular中mvc的優勢和缺點

5.2 model元件

5.2.1 model元件的基礎概念

示例5-1 model元件的基礎概念

5.2.2 使用ngrepeater方式周遊model對象

示例5-2 使用ngrepeater方式周遊model對象

5.3 controller元件

5.3.1 控制器的屬性和方法

示例5-3 控制器的屬性和方法

5.3.2 控制器方法中的參數

示例5-4 控制器方法中的參數

5.3.3 控制器中屬性和方法的繼承

示例5-5 控制器中屬性和方法的繼承

5.4 view元件

5.4.1 view元件中的模闆切換

示例5-6 view元件中的模闆切換

5.4.2 在切換視圖模闆時傳參數

示例5-7 多頁面切換并傳遞參數

5.5 本章小結

繼續閱讀