本文出自 我的 github

Ionic 這個(gè)框架包含了一套精美的相應(yīng)式 UI 組件、一套基于 AngularJS 的 Javascript 類庫，以及一套強(qiáng)大的 CLI 工具。之前介紹了如何搭建 Ionic 的開發(fā)環(huán)境，下面就來正式創(chuàng)建一個(gè)應(yīng)用吧。

創(chuàng)建 Ionic 項(xiàng)目

創(chuàng)建 “ionic start” 命令，template 是創(chuàng)建項(xiàng)目使用的模板，目前官方提供了三個(gè)模板：

• tabs（選項(xiàng)卡菜單，默認(rèn)）
• blank（空模板）
• slidemenu（側(cè)滑菜單）

$ ionic start myapp [template]

我使用 tabs 模板創(chuàng)建了一個(gè)名為 “Sample-Start-Using-Ionic” 的項(xiàng)目

編寫代碼

IonicChina 社區(qū)提供了一套 API，這里我就用這套 API 寫一個(gè)獲取 topics 的 Demo 吧

進(jìn)入項(xiàng)目目錄，使用 Sublime Text 打開項(xiàng)目目錄，打開 “www/js/app.js” 文件，添加一個(gè)新的路由 “tab.topics”

打開 “www/js/controllers.js” 文件，添加一個(gè)新的控制器 “TopicsCtrl”

打開 “www/js/services.js” 文件，添加一個(gè)新的服務(wù) “Topics”，這個(gè)服務(wù)用到了 $http 和 $q 兩個(gè)服務(wù)，$http 用來請(qǐng)求數(shù)據(jù)，$q 是用于處理異步請(qǐng)求

打開 “www/templates/tabs.html” 文件，添加一個(gè)新的選項(xiàng)卡 “Topics”，此選項(xiàng)卡會(huì)顯示在應(yīng)用底部的 tabs 上

在 “www/templates/” 目錄下新建一個(gè)模板文件 “tab-topics.html”，用于顯示 topics 列表

在終端下執(zhí)行 “ionic serve” 命令，會(huì)自動(dòng)打開瀏覽器加載這個(gè)項(xiàng)目，運(yùn)行結(jié)果如圖

這說明我的模板是沒有問題的，離成功又近了一步，打開 “www/js/controllers.js” 文件，修改下 “TopicsCtrl” 文件，在方法參數(shù)那里引用 “Topics” 服務(wù)，然后調(diào)用 Topics.all() 方法并在 Console 里輸出試試

一切都在意料之中，從 topics API 抓取到的數(shù)據(jù)正常顯示在了 Console 里，在 “www/js/controllers.js” 文件里添加一個(gè) $scope.topics 變量，用來傳遞到對(duì)應(yīng)的模板中

修改 “www/templates/tab-topics.html” 文件，使用 ng-repeat 屬性來遍歷 topics，使用 “{{變量}}” 的方式進(jìn)行數(shù)據(jù)綁定

注意：這里的 img 標(biāo)簽要使用 ng-src 屬性來綁定，不能直接用 {{變量}} 的方式綁定，否則會(huì)在運(yùn)行時(shí)導(dǎo)致一個(gè)錯(cuò)誤

瀏覽器自動(dòng)刷新頁面后，正確的數(shù)據(jù)已經(jīng)顯示出來了，到此已經(jīng)成功了一半

下面再寫一個(gè)顯示 topic 詳細(xì)的頁面，打開 “www/js/app.js” 文件，添加一個(gè)新的路由 “tab.topic-detail”，“:topicId” 用來匹配傳遞的參數(shù)，可以在控制器中使用 $stateParams 服務(wù)去捕獲

打開 “www/js/services.js” 文件，修改 all() 方法，將抓取到的數(shù)據(jù)保存在一個(gè)變量里，然后再添加一個(gè) findById(id) 方法，用來獲取對(duì)應(yīng) id 的 topic

打開 “www/js/controllers.js” 文件，添加一個(gè)新的控制器 “TopicDetailCtrl”，內(nèi)容如下

修改 “www/templates/tab-topics.html” 文件，修改列表的 href 屬性，指向 “tab.topic-detail” 這個(gè)路由，并傳遞當(dāng)前 topic 的 id 值

在 “www/templates/” 目錄下新建一個(gè)模板文件 “topic-detail.html”，用于顯示 topic 詳細(xì)信息，注意 ng-bind-html 的用法，這個(gè)屬性用于綁定 html 內(nèi)容到頁面中

瀏覽器自動(dòng)刷新之后，點(diǎn)擊 topics 列表中第一項(xiàng)，成功打開了 topic 的詳細(xì)頁面

至此，這個(gè)簡單的 Demo 就完成了，所有代碼已上傳到 我的 Github，如有疑問，歡迎在文章下方留言，我在收到留言后會(huì)及時(shí)答復(fù)您