我用ionic框架寫了個豆瓣圖書館

ionic : 集移動應用UI與 angularjs 框架與一身的 Hybrid App 框架

利用 ionic 咱們能夠輕易製造出一款帶有原生應用UI與體驗的移動App

此次咱們就搭建一個圖書 App (還能聽歌看電影....), 實現了一些基本的功能， 搜索圖書類型，查看圖書詳情，搜索圖書標籤，查看圖書筆記等。固然還能聽歌搜個電影之類的。。。。。

先上幾張截圖

---

總覽

前端： ionic 框架 => angularjs, ui-router, ngResource

後端： nodejs => express, request

功能實現： 主題搜索， 標籤搜索， 視圖內跳轉， 下拉刷新， 上劃加載， 圖書評論

前端UI： 主要採用 ionic 中原生 UI 組件

數據來源： 咱們沒有佈置數據庫， 全部數據都來自豆瓣 API。 在前端 Ajax 中會有 CORS 跨域問題， 因此咱們依靠 nodejs 佈置路由進行數據請求， 而後轉接給前端。

前端交互： 採用了與 ionic 綁定的 angularjs。 並且 ionic 已經幫咱們優化了部分組件，使 ui 交互更符合移動應用的感受， 咱們只須要利用好 ionic 封裝好的組件就能達到相似於一個移動應用的體驗。

---

結構

路由： www/js/app.js。 在 angularjs 主文件 app.js 里布置 url 與 html 模板的映射。 就像這個樣子~~ 其中包括一些視圖內嵌套視圖的，會有特殊的寫法。具體參見 ui-router

//app.js
.state('tab', {
  url: '/tab',
  abstract: true,
  templateUrl: 'templates/tabs.html'
})

Api： www/js/api.js 。與後端預約好數據接口以後咱們就能夠請求數據啦， 固然你也能夠用原生 Ajax 請求，但畢竟 ionic 是構建在 angularjs 基礎之上的，咱們使用 angularjs 的 ngResource 服務配置 api 。 具體是這個樣子地~~

//BooksResource.js

Books.$inject = ['$resource'];
function Books($resource) {
  return $resource('/api/books/', {},
  {'query': {method: 'GET'}})
}

模板： 模板放在 templates 文件夾中， 對應四個主視圖及一個詳情視圖。 每一個視圖文件中包含一個 html 模板和 一個 js 文件(控制器)。 啥是控制器呢？ 簡單來講就像你平時寫的 js 文件同樣，對對應的 html 進行「控制」 。

---

定義好 Api， 模板， 路由後，就能夠寫頁面了。 咱們全部請求的數據都在控制器文件中定義，而後在 html 文件中引用就能夠了。

基本結構就是這樣，有興趣的同窗能夠git。? 功能完善中，歡迎pr
https://github.com/ManInBoat/...