基于豆瓣API+Angular开发的web App
更新时间：2015年01月02日 16:41:19 投稿：hebedich
这篇文章主要介绍了基于豆瓣API+Angular开发的web App的方法和示例代码，效果非常棒，有需要的小伙伴参考下
一、扯淡的说
name:【豆瓣搜索】
最近关注了下豆瓣的API，发现豆瓣开放平台需要加强API文档撰写啊....但是有个可喜的发现豆瓣V2接口提供了搜索接口。最近在用phantom弄些爬虫，想想，真是美丽极了！有个豆瓣的接口，我都不用去爬数据，不用数据存储，丢给github page直接完事。豆瓣，Nice!最近也在看angular，于是就萌生了使用Angular + 豆瓣API 做一个web app。于是...网上回家就折腾了。
体验地址：http://vczero.github.io/t/html/index.html#/
项目地址：https://github.com/vczero/search （欢迎大家fork，任意修改，继续增加功能；欢迎拍砖，一起进步。）
二、直接上图
（1）图书搜索
（2）音乐搜索界面
（3）图书详情
（4）电影搜索
三、项目结构和简介
三、几个注意点
（1）-webkit-tap-highlight-color:rgba(255,255,255,0);去除点击时的高亮阴影
（2）box-sizing:border-box的使用，包含padding的像素计算
（3）position fixed 和 搜索跳转的结合（虚拟键盘引起）
（4）angular-ui-router的多视图控制
（5）ios & android系统的各种细节
（6）压缩angularjs代码依赖注入的问题
...
我觉得比较重要的服务和状态路由的代码贴出来
复制代码 代码如下:
/*服务的URL配置*/
app.constant('ServiceConfig', {
book_search: 'https://api.douban.com/v2/book/search',
book_search_id: 'https://api.douban.com/v2/book/',
music_search: 'https://api.douban.com/v2/music/search',
music_search_id: 'https://api.douban.com/v2/music/',
movie_search: 'https://api.douban.com/v2/movie/search',
movie_search_id: 'https://api.douban.com/v2/movie/subject/'
});
app.config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider){
/*URL路由*/
$urlRouterProvider.otherwise("/");
/*状态配置*/
$stateProvider
//首页
.state('index',{
url: '/',
views:{
header:{
templateUrl: '../html/views/list_header.html',
controller: 'SearchController'
},
container:{
templateUrl: '../html/views/list_book.html',
controller: 'BookListController'
},
footer:{
templateUrl: '../html/views/list_footer.html',
controller: ''
}
}
})
//book list
.state('book_list',{
url: '/book',
views:{
header:{
templateUrl: '../html/views/list_header.html',
controller: 'SearchController'
},
container:{
templateUrl: '../html/views/list_book.html',
controller: 'BookListController'
},
footer:{
templateUrl: '../html/views/list_footer.html',
controller: ''
}
}
})
// book detail
.state('book_detail',{
url: '/book/:id',
views:{
header:{
templateUrl: '../html/views/list_header.html',
controller: 'SearchController'
},
container:{
templateUrl: '../html/views/detail_book.html',
controller: 'BookDetailController'
},
footer:{
templateUrl: '../html/views/list_footer.html',
controller: ''
}
}
})
// music list
.state('music_lsit',{
url: '/music',
views:{
header:{
templateUrl: '../html/views/list_header.html',
controller: 'SearchController'
},
container:{
templateUrl: '../html/views/list_music.html',
controller: 'musicListController'
},
footer:{
templateUrl: '../html/views/list_footer.html',
controller: ''
}
}
})
// movie list
.state('movie_lsit',{
url: '/movie',
views:{
header:{
templateUrl: '../html/views/list_header.html',
controller: 'SearchController'
},
container:{
templateUrl: '../html/views/list_movie.html',
controller: 'movieListController'
},
footer:{
templateUrl: '../html/views/list_footer.html',
controller: ''
}
}
})
.state('search',{
url: '/search/:type',
views:{
header:{
templateUrl: '../html/views/search.html',
controller: 'Search'
},
container:{
templateUrl: '',
controller: ''
},
footer:{
templateUrl: '',
controller: ''
}
}
});
}]);
相关文章
这篇文章主要为大家介绍了nodejs+axios爬取html出现中文乱码示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍NodeJS事件循环，Node中代码从上到下同步执行，在执行过程中会将不同的任务添加到相应的队列中，那具体有的循环又是怎么回事呢，限免现编就带大家学习该详细内容，需要的朋友也可以参考一下2022-02-02
这篇文章主要介绍了KOA+egg.js集成kafka消息队列的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要为大家介绍了Node模块化开发实例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家介绍了Node Sass依赖问题排查思路解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
Node.js是基于Chrome V8引擎的JavaScript运行环境,能够使JavaScript在服务器端运行,这篇文章主要给大家介绍了关于Win7系统中如何安装高版本的NodeJS的相关资料,需要的朋友可以参考下2023-12-12
express搭建的nodejs项目使用webpack进行压缩打包
对于打包这个问题它并不是难点,但是对于我们这种初学者来说,根本就不知道应该怎么做,下面这篇文章主要给大家介绍了关于express搭建的nodejs项目使用webpack进行压缩打包的相关资料,需要的朋友可以参考下2022-12-12
windows8.1+iis8.5下安装node.js开发环境
这篇文章主要介绍了windows8.1+iis8.5下安装node.js开发环境的方法,需要的朋友可以参考下2014-12-12
通过npm package manager来安装和管理包是我们最为常见的方式之一，本文将从浅入深地带大家剖析一下npm install的执行过程，感兴趣的可以学习一下2023-05-05
这篇文章主要介绍了Node.js 进程平滑离场剖析小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
最新评论