本文出自 我的 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 用來請求數(shù)據(jù)烟零，$q 是用于處理異步請求
打開 “www/templates/tabs.html” 文件墅诡，添加一個(gè)新的選項(xiàng)卡 “Topics”，此選項(xiàng)卡會顯示在應(yīng)用底部的 tabs 上
在 “www/templates/” 目錄下新建一個(gè)模板文件 “tab-topics.html”，用于顯示 topics 列表
在終端下執(zhí)行 “ionic serve” 命令，會自動(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 變量，用來傳遞到對應(yīng)的模板中
修改 “www/templates/tab-topics.html” 文件，使用 ng-repeat 屬性來遍歷 topics菩颖，使用 “{{變量}}” 的方式進(jìn)行數(shù)據(jù)綁定
注意：這里的 img 標(biāo)簽要使用 ng-src 屬性來綁定，不能直接用 {{變量}} 的方式綁定呻右，否則會在運(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) 方法川背，用來獲取對應(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，如有疑問晴及，歡迎在文章下方留言都办，我在收到留言后會及時(shí)答復(fù)您
