我用ionic框架写了个豆瓣藏书楼

2019年8月31日 170次阅读 来源: hiscc

ionic : 集挪动运用UI与 angularjs 框架与一身的 Hybrid App 框架

应用 ionic 我们能够随意马虎制造出一款带有原生运用UI与体验的挪动App

此次我们就搭建一个图书 App (还能听歌看影戏….), 完成了一些基本的功用， 搜刮图书范例，检察图书概况，搜刮图书标签，检察图书笔记等。固然还能听歌搜个影戏之类的。。。。。

先上几张截图

《我用ionic框架写了个豆瓣藏书楼》
《我用ionic框架写了个豆瓣藏书楼》

总览

前端： 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/…

    原文作者：hiscc
    原文地址: https://segmentfault.com/a/1190000008476197
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞