Ionic實戰：基於AngularJS的移動混閤應用開發 pdf epub mobi txt 電子書 下載 2025

簡體網頁||繁體網頁

☆☆☆☆☆

[美] Jeremy Wilken（傑裏米 威爾肯斯） 著，奇舞團 譯

圖書標籤:

• Ionic
• AngularJS
• 移動應用開發
• 混閤應用
• 前端開發
• JavaScript
• HTML
• CSS
• 移動端
• 開發教程

齣版社： 電子工業齣版社

ISBN：9787121292064

版次：1

商品編碼：11983622

包裝：平裝

開本：16開

齣版時間：2016-06-01

用紙：膠版紙

頁數：288

字數：342000

正文語種：中文

産品特色

編輯推薦

適讀人群 ：web開發人員

隻需掌握Web技術就能開發移動應用是不是很爽？有瞭Ionic之後，App的開發變得如此簡單：使用我們熟知的HTML、CSS和JavaScript技術就可以同時開發iOS和Android應用。

本書指導Web開發者使用Ionic和AngularJS創建移動應用。通過大量帶有注釋的示例，本書展示瞭如何使用移動UI組件，如何利用當前地點數據，如何集成相機等原生設備功能，如何添加手勢操作以及外部數據存儲等功能，讓我們能創建齣更加原生的應用。本書還介紹瞭如何通過測試提升應用的穩定性以及在開發中定位錯誤。然後，使用命令行工具教會大傢如何創建並將應用發布到應用商店。內容包括：

√ 使用HTML、JavaScript和CSS創建移動應用

√ 使用Ionic UI組件創建復雜交互

√ 一次編譯，“到處”發布（iOS和Android）

√ 使用原生設備硬件以及設備特定功能

√ 涵蓋完整的移動應用開發過程

讀者需要瞭解HTML、CSS和JavaScript知識；對於AngularJS，懂一些*好，不懂也沒有關係。

內容簡介

Ionic是近幾年很火的一項跨平颱開發技術。Ionic*大的亮點是集成瞭Angular和Cordova，對於有開發經驗的前端工程師來說上手難度大大降低，並且能直接使用現有的大量第三方庫和框架。本書是一本詳盡的 Ionic實戰教程，不僅告訴你“怎麼做”，還告訴你“為什麼”，這正是大部分入門書籍所欠缺的。無論你是否有相關開發經驗，這本書都可以幫助你快速掌握Ionic。

作者簡介

奇舞團是一個專業翻譯團隊，其成員都是各大技術公司位居一綫的程序員或架構師，具有豐富的理論知識和實踐經驗，而且語言文字水平都很高，翻譯的圖書質量均上佳。 Jeremy Wilken是一位資深UX軟件工程師，常年使用Ionic、AngularJS和Node.js。他現在居住在德剋薩斯州的奧斯汀。__eol__購買本書就可以免費訪問Manning 齣版社維護的一個私有網絡論壇，你可以寫書評、問技術問題並收到作者和其他用戶的反饋。如果要訪問論壇並注冊，請在瀏覽器中訪問www.manning.com/books/ionic-in-action。

目錄

第1章　Ionic和Hybrid應用介紹 1

1．1　Ionic是什麼 2

1．2　移動開發類型 3

1．2．1　原生移動應用 4

1．2．2　移動端網站（Web應用） 5

1．2．3　Hybrid應用 6

1．3　理解Ionic技術棧 7

1．3．1　Ionic：用戶界麵框架． 8

1．3．2　Angular：Web應用框架 10

1．3．3　Cordova：Hybrid應用框架． 10

1．4　為什麼選擇Ionic 11

1．4．1　開發者為什麼要選擇 Ionic 11

1．4．2　Ionic的缺點． 12

1．5　使用Ionic構建應用的前提 13

1．5．1　掌握 HTML、CSS和 JavaScript 13

1．5．2　掌握 Web應用和 Angular 13

1．5．3　擁有移動設備 14

1．6　Ionic支持的移動設備和平颱 14

1．6．1　蘋果的 iOS 14

1．6．2　榖歌的 Android 15

1．7　總結． 16

第2章　配置開發環境 17

2．1　快速上手． 18

2．1．1　設置開發環境 18

2．1．2　創建一個新項目 21

2．1．3　項目文件夾結構 22

2．1．4　在瀏覽器中預覽 23

2．2　配置預覽環境 24

2．2．1　安裝平颱工具 25

2．2．2　配置模擬器 26

2．2．3　配置連接設備 31

2．2．4　給項目添加平颱 32

2．2．5　在模擬器中預覽 32

2．2．6　在移動設備上預覽 33

2．3　總結． 35

第3章　AngularJS必備知識 37

3．1　AngularJS初探． 39

3．1．1　視圖和模闆：描述內容 39

3．1．2　控製器、模型和作用域：管理數據和邏輯． 41

3．1．3　Serivce：可重用的對象和方法 43

3．1．4　雙嚮數據綁定：在控製器和視圖之間共享數據． 43

3．2　配置本章的項目 43

3．2．1　獲取項目文件 44

3．2．2　啓動開發服務器 44

3．3　Angular應用基礎． 46

3．4　控製器：控製數據和業務邏輯 47

3．5　加載數據：使用控製器來加載數據並顯示在視圖中． 50

3．5．1　過濾器：轉換視圖中的數據 53

3．6　處理選擇筆記的單擊事件 54

3．7　創建一個指令，用來解析Markdown格式的筆記． 56

3．8　使用模型來管理內容編輯 59

3．9　保存和刪除筆記 62

3．9．1　添加 save()方法 63

3．9．2　使用 Angular錶單進行驗證 64

3．9．3　添加和刪除方法 64

3．10　繼續學習Angular 65

3．11　挑戰．． 66

3．12　總結 66

第4章　Ionic導航和核心組件． 68

4．1　配置項目． 70

4．1．1　創建一個新應用並手動添加代碼 70

4．1．2　剋隆完整版應用 70

4．2　配置應用導航 70

4．2．1　設計良好的應用導航 72

4．2．2　使用狀態管理器來聲明應用視圖 73

4．3　構建主視圖 77

4．3．1　創建內容容器 77

4．3．2　使用 CSS組件並添加一個簡單的鏈接列錶 78

4．3．3　給列錶元素添加圖標 80

4．4　使用控製器和模型來開發預訂視圖 81

4．5　把數據加載到天氣視圖中 85

4．5．1　給天氣視圖添加模闆 86

4．5．2　創建天氣控製器加載外部數據 87

4．5．3　給天氣視圖添加一個載入指示器 89

4．6　在餐館視圖中使用卡片和無限滾動 91

4．7　使用幻燈片組件來實現應用介紹 94

4．8　挑戰． 97

4．9　總結． 98

第5章　選項卡、高級列錶和錶單組件 99

5．1　配置本章的項目 101

5．1．1　手動創建項目並添加代碼． 101

5．1．2　剋隆完整項目 101

5．2　ionTabs：添加選項卡和導航． 101

5．2．1　給應用添加選項卡容器和三個選項卡 103

5．3　給每個選項卡添加ionNavView． 104

5．4　加載並顯示當前的比特幣匯率． 109

5．5　在同一個選項卡視圖中顯示貨幣細節 114

5．6　刷新比特幣匯率並顯示幫助信息． 117

5．6．1　IonRefresher：下拉刷新匯率． 118

5．6．2　$IonicPopover：彈齣幫助信息 120

5．7　繪製曆史數據 123

5．7．1　配置第三方庫 123

5．7．2　曆史信息選項卡模闆：使用 Highcharts和下拉列錶來切換貨幣．．． 124

5．7．3　曆史信息選項卡控製器：加載數據並配置圖錶 125

5．8　貨幣選項卡：支持重新排序和開關 129

5．8．1　IonReorderButton：讓列錶支持重新排序 129

5．8．2　IonToggle：給列錶元素添加開關 131

5．9　挑戰 132

5．10　總結． 132

第6章　使用 Ionic開發一款天氣應用． 134

6．1　項目配置 135

6．2　設置側滑菜單和視圖 136

6．3　地理位置搜索 139

6．4　增加設置視圖和數據的服務． 142

6．4．1　創建收藏地點和設置服務． 142

6．4．2　在側滑菜單列錶中顯示收藏的地點 144

6．4．3　增加設置視圖模闆． 145

6．4．4　設置視圖控製器． 147

6．5　設置天氣視圖 148

6．5．1　獲取 Forecast．io API 密鑰 148

6．5．2　使用 Ionic 命令行代理 149

6．5．3　增加天氣視圖的控製器和模闆 150

6．6　ionScroll：製作自定義滾動內容組件 151

6．6．1　在頁麵中使用 ionScroll． 152

6．6．2　為天氣數據查詢創建過濾器 158

6．7　活動菜單列錶：顯示可選列錶． 160

6．8　ionModal：顯示日齣和日落數據錶 162

6．8．1　配置彈窗 164

6．8．2　數據列錶集：讓日齣和日落時間列錶顯示得更快 166

6．9　彈框：提示並確認收藏地點修改． 169

6．10　挑戰． 171

6．11　總結 172

第7章　開發高級應用 173

7．1　配置本章項目 174

7．1．1　獲取代碼 174

7．2　使用 Sass 自定義 Ionic 樣式 174

7．2．1　設置 Sass 175

7．2．2　使用 Sass 變量自定義 Ionic 176

7．2．3　使用 Sass 編寫樣式 177

7．3　如何支持聯網和離綫模式． 178

7．4　處理手勢事件 180

7．4．1　使用 Ionic 事件指令監聽事件 180

7．4．2　使用 $ionicGesture 服務監聽事件 182

7．4．3　支持的手勢事件． 185

7．5　數據持久化 186

7．5．1　使用 localStorage 187

7．5．2　使用 Web SQL、IndexedDB 和 SQLite． 189

7．5．3　Cordova 插件提供的其他選項 190

7．6　製作跨平颱的應用 191

7．6．1　一種尺寸並不能滿足所有情況 191

7．6．2　根據平颱或者設備類型適配樣式 192

7．6．3　為平颱和設備類型適配交互 194

7．7　使用 $ionicCon．gProvider編輯默認交互行為 196

7．8　總結 197

第8章　使用Cordova插件 198

8．1　Cordova 插件 199

8．1．1　使用插件要考慮的問題． 200

8．1．2　安裝插件 201

8．1．3　使用插件 201

8．1．4　在模擬器中使用插件． 202

8．1．5　插件和係統限製． 203

8．1．6　Angular 和 Cordova 陷阱 203

8．1．7　關於設備和模擬器的一些常見問題解決辦法 205

8．2　ngCordova 207

8．2．1　安裝 ngCordova 207

8．3　在應用中使用相機和相冊插件． 208

8．3．1　創建相機應用 208

8．3．2　增加相機插件 209

8．3．3　創建相冊視圖 210

8．4　在天氣應用中使用地理位置． 212

8．4．1　配置地理位置插件示例． 213

8．4．2　添加地理位置插件和 ngCordova 214

8．4．3　請求用戶的地理位置． 214

8．4．4　優化天氣應用 216

8．5　本章挑戰 218

8．6　總結 219

第9章　預覽、調試和自動化測試． 220

9．1　預覽、調試和測試之間的區彆． 220

9．1．1　為什麼測試如此重要． 222

9．2　配置本章示例 222

9．3　預覽應用的其他方法 223

9．3．1　Ionic Lab． 223

9．3．2　Ionic View 224

9．4　使用真機調試 226

9．4．1　在 Android 設備上進行調試 227

9．4．2　在 iOS 或模擬器中進行調試 229

9．5　自動化測試 232

9．5．1　使用 Jasmine 和 Karma 進行單元測試 233

9．5．2　使用 Protractor 和 WebDriver 進行集成測試． 240

9．6　更多的測試示例 245

9．7　總結 245

第10章　編譯並發布應用． 246

10．1　創建應用過程一覽 247

10．2　創建應用圖標和啓動頁麵圖片 248

10．2．1　創建圖標 249

10．2．2　創建啓動頁麵圖片 250

10．3　準備上綫應用 251

10．4　編譯 Android 應用並發布到 Google Play 252

10．4．1　配置應用的簽名 252

10．4．2　編譯發布應用文件 253

10．4．3　簽名應用文件 253

10．4．4　優化 APK 文件． 254

10．4．5　編譯應用的升級版本 254

10．4．6　創建應用清單並將應用上傳到 Play Store．． 255

10．4．7　升級應用清單或上傳新版本 256

10．4．8　選擇 Android 商店．． 256

10．5　編譯 iOS 應用並發布到 AppStore 257

10．5．1　配置認證和 ID 257

10．5．2　配置應用的 ID 標識． 258

10．5．3　在 iTunes Connect 中創建應用清單． 258

10．5．4　使用 Xcode 編譯並上傳應用 259

10．5．5　完善 iTunes Connect 應用清單信息． 260

10．5．6　更新應用 260

10．6　總結． 261

附錄A　相關資源． 262

前言/序言

譯者序

剛入職的時候，團隊參加 Hackathon的過程中需要製作一款移動應用，在沒有 iOS和 Android工程師的情況下，經過調研， Ionic成瞭我們最終的技術解決方案，也為我翻譯本書打下瞭契機。我經常說技術沒有銀色子彈，沒有最完美的，隻有最適閤的。 Web App雖然有為人詬病的性能問題，但是在人員、時間、功能、性能等的權衡下，Ionic必然是有它的受眾的。

本書是 In Action係列的一員，這就注定瞭它是一本實戰書的命運。而事實也是如此，基本上每章都會用一個示例貫穿全章。我喜歡這種感覺，純理論的書讀起來讓我昏昏欲睡，實戰這種從 0到 1將最終成品展現在眼前的形式讓我非常有成就感。相信這也是大多實戰派鍾愛的感覺吧！當然這並不是說理論不重要，我希望的是以實戰為引，通過實戰慢慢去理解並深入理論，而後將理論反作用於實戰，相輔相成纔是最終奧義。

實戰書不好的地方在於它勢必會貼很多代碼，我甚至在有的書上看到過整頁整頁的代碼。相信本書的作者也不想這樣，所以很多時候他隻列齣瞭一些必要的代碼並提醒大傢可以到 Github倉庫上查看完整代碼。在這裏也推薦大傢在看完本書中的內容後再去看看倉庫中的示例，雖然書上的注解非常詳細，但我相信大傢定會有另

一番收獲。

書上的代碼是基於 Ionic 1.x的，而 Angular 2發布在即，Ionic 2也發布瞭 Beta版。很多人對於這本書是否已經過時産生瞭疑問。對於這一點大傢大可放心，官方文檔對於修改的地方詳細地列齣瞭新舊版本的寫法，而且 Ionic 2的接口和組件基本上都維持瞭原樣。當然，我個人覺得還是要理解 Ionic的精髓，舉一反三纔能對代碼的理解大有助益。

本書算是我翻譯的“處女作”，雖然我已經盡全力但難免有紕漏，如果你在閱讀的過程中有不明白的地方可通過 i@imnerd.org聯係我。這裏首先要感謝奇舞團給瞭我這樣一個機會，然後我要感謝本書的另一位譯者梁傑在翻譯過程中提供的幫助，此外我還要感謝李鬆峰老師，他百忙之中幫我們審校譯文。感謝我的媽媽在我人生中給予我的無私的愛。當然還要感謝書本前的你，我們的不期而遇定會觸發新的奇跡。祝君好運！

李喆明2016年5月15日

序

本書是 Jeremy Wilken九個月的努力成果，他是一位頂尖的 Ionic開發者，從 2013年開始我們就在一起開發並開源 Ionic，和他一起工作是一件非常愉快的事。本書不僅介紹瞭 Ionic的開源 SDK，還包含許多對資深 Ionic開發者有幫助的信息。

Jeremy為本書開發瞭三個 Ionic應用，幾乎用遍瞭現有的 Ionic組件。通過這三個應用，你可以學會如何組閤這些組件。第一個應用可以幫助度假勝地服務用戶，它用到瞭滑動頁麵、列錶、卡片、內容容器以及基礎導航。第二個應用是比特幣市場應用，可以展示比特幣的實時匯率，用到瞭下拉刷新、彈齣窗口、選項卡、圖錶、高級列錶以及嵌套視圖。第三個應用是天氣應用，使用瞭模態框、自定義滾動區域（分頁滾動）、外部數據加載、邊欄菜單以及一個搜索視圖。

這些應用都很有特點並且比較完整，它們已經完成瞭應用商店上架所需的 80%的功能，其餘的 20%會在每章結尾列齣，由讀者完成。

對於經驗豐富的 Ionic開發者來說，本書介紹瞭如何實現特定平颱的功能開發，比如在 iOS上使用動作菜單，在安卓上使用彈齣窗口。本書同樣介紹瞭 Ionic生態係統的背景以及如何使用 Cordova及其插件；介紹瞭 Ionic平颱提供的各種服務，比如 Ionic視圖；還介紹瞭如何使用高級技巧和測試來優化 Ionic開發流程。 Jeremy用優秀的例子結閤他獨到的視角來教大傢如何搭建環境並編寫你自己的測試。

在和 Max Lynch以及 Ben Sperry一起開發 Ionic之前，我加入瞭他們的公司，負責開發已經獲得成功的産品，其中就包括 Codiqa，這是一個圖形化的 jQuery Mobile拖曳構建工具。在開發 Codiqa時，我意識到設備和瀏覽器的潛力並沒有被充分開發，用戶一直在要求我們為工具添加更多的功能。最終，我們決定創建自己的 Hybrid應用開發套件，充分發揮移動設備的潛力。有瞭 Angular這樣的強力工具，我們有能力將 Hybrid移動應用開發推進到能和原生應用開發相抗衡的程度。我們在 2013年發布瞭 Ionic的 alpha版，令我感到自豪的是，開發社區非常快地接受瞭 Ionic並幫助它進一步發展。更令我激動的是，Ionic纔剛剛起步，我們會繼續完善它，讓開發者可以更快更輕鬆地開發高性能的應用。

本書既有對 Ionic的介紹，也有更加深入的應用開發最佳實踐，因此無論你是初學者還是資深開發者，都會有所收獲。非常感謝你加入 Ionic社區。

玩得開心！

Adam Bradley Ionic框架聯閤創建人

前言

幾年前人們還在爭論是否值得為移動端應用開發投入時間和精力，時至今日，手機的重要性已經毋庸多言。截至 2015年夏天，蘋果和榖歌應用商店中的應用數量已經突破一百萬。手機的銷量已經達到颱式機 /筆記本電腦的六倍，平闆電腦的銷量眼看著也要在年內超過颱式機 /筆記本電腦。移動設備已經無處不在。

迴到 2013年，移動應用開發領域主要的關注點還是構建原生應用。這些原生應用使用 Java或者 Objective-C寫成，開發者需要學習這些語言、平颱工具、 SDK等。對於像我這樣的 Web開發者來說，這是一道很難跨越的障礙。當時的移動端 Web主要是構建響應式網站而不是移動端應用。由於老式設備和瀏覽器對 Hybrid應用（使用 Web技術構建的原生應用）支持不好，再加上設計風格和原生應用完全不同，很少有人會選擇 Hybrid應用。

Ionic的發起者們看到瞭機會。他們意識到移動設備正在迅速發展， Hybrid應用會成為原生應用的有力對手。有些開發者想用他們已經掌握的 Web技術來開發原生應用，而這也正是 Ionic的目標。 Ionic使用瞭開源項目 Cordova和 Angular，把它們整閤成一個統一的 Hybrid移動應用開發平颱。

1.0版本發布之後， Ionic已經可以支持 Web開發者構建移動應用。 Ionic團隊自豪地把 Ionic稱作： Hybrid應用“一直在等待的那個 SDK”。寫完本書之後，我已經可以看到 Ionic的光明未來。 Ionic如此強大的核心就是本書介紹的那些開源組件。此外，圍繞 Ionic的服務平颱正在搭建中，包括推送通知、數據分析、 beta測試等。我維護著很多受歡迎的開源項目，這些項目都有完善的開發和社區支持， Ionic就是其中之一（目前是 GitHub Star最多的前 40個項目之一， Ionic使用的 Angular在本書編寫時是前三名）。大量的應用使用 Ionic構建，有些甚至得到瞭應用商店的推薦。

我一直想把自己的學習經驗分享齣來，告訴大傢如何成為一名移動應用開發者，寫這本 Ionic的書也延續瞭這一思想。最初我的計劃是將 Ionic的特性作為核心進行講解，對每個特性進行單獨介紹。寫瞭 6章之後，我發現這個方法行不通。我喜歡那些能夠運行並且能夠交互的東西，對移動應用來說能上手使用是最好的。

因此，寫完前三個核心章節的草稿之後，我扔掉瞭它們，從頭開始，直接用實踐來進行介紹。這和我使用 Ionic開發第一個應用時所采用的學習方法很像，希望這能幫助你更好地學習 Ionic。實際上，你會發現本書的所有章節都充滿這種對讀者的關懷。

我在不斷試錯中掌握瞭 Ionic，文檔永遠是一位好老師。工作中需要開發移動應用的時候，我可以使用 Ionic在一天之內做齣一個原型。 Ionic剛齣來的時候，我總會不斷更新我的應用，讓它適配 Ionic的改動和新特性，在這個過程中我深深感受到 Ionic發展速度之快。 beta版發布幾個月之後， Ionic就完善瞭 API和架構設計，並沿用至今。

在未來， Ionic必將包括更多社區驅動的貢獻和組件、更多的平颱服務和更高的性能及質量。我迫不及待地想知道你會做齣什麼，我也很高興能見證你在 Ionic的幫助下成為一名移動應用開發者。

緻謝

在本書中，我分享瞭許多學習經驗，這些經驗都要歸功於我得到的鍛煉、指導和支持。雖然無法將每個為本書誕生做齣貢獻的人都羅列齣來，但我知道，貢獻最大的人是開源社區中的那些重度參與者。他們編寫、維護並支持瞭開源項目，我對他們緻以最崇高的尊重和感激。

謝謝 Manning，謝謝那些優秀的編輯，是你們的努力工作讓這本書成為現實。多虧有 Robin de Jongh，本書纔得以起步，我的寫作熱情也全靠他維持。真誠地感謝 Helen Stergius，是她不知疲倦地編輯、深夜頭腦風暴、積極的態度和活力推動我完成主要的編寫流程。我還要感謝團隊中的其他人，在他們的幫助下完成瞭本書的齣版和審校工作，尤其要感謝 Gregor Zurowski、Katie Tennant、Mary Piergies、Janet Vail、Matt Merkes、Candace Gillhoolley、Kevin Sullivan、Donna Clements和 Jodie Allen。

許多同行評審者幫助我完善草稿中薄弱環節的漏洞，也讓我更有信心做齣積極改變。非常感謝 Andrea Prearo、Barbara Fusinska、Charlie Gaines、Cho S. Kim、 Chris Graham、Gareth van der Berg、Giuseppe de Marco、Jeff Cunningham、Ken Rimple、Kevin Liao、Lourens Steyn、Patrick Dennis、Rabimba Karanjai、Satadru Roy和 Wendy Wise——你們提齣瞭許多有用的建議，如果沒有你

評分☆☆☆☆☆

新項目準備采用的技術，學習下

評分☆☆☆☆☆

不錯的，實例寫的很好

評分☆☆☆☆☆

書質量不錯 還沒開始看 不過應該挺好的

評分☆☆☆☆☆

買沒開始用，等使用過後再補充。相信京東品質

評分☆☆☆☆☆

價格便宜，發貨速度快。

評分☆☆☆☆☆

包裝沒有損壞，質量還可以，物流很快。

評分☆☆☆☆☆

好書 正在看 也是當下最流行的技術吧

評分☆☆☆☆☆

書應該不錯的，618買瞭好多的，很便宜的，以後都應該有活動購入

評分☆☆☆☆☆

東西收到以後馬上查看，發現與圖片描述一緻，超級喜歡，賣傢發貨速度很快，服務也很到位，給老闆點個贊，下次還會來購買！東西收到以後馬上查看，發現與圖片描述一緻，超級喜歡，賣傢發貨速度很快，服務也很到位，給老闆點個贊，下次還會來購買！