爱搜索，爱生活，基于豆瓣API & Angular开发的web App（by vczero）

浏览数：38 / 时间：2015年06月11日

一、扯淡的说

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代码依赖注入的问题

...

我觉得比较重要的服务和状态路由的代码贴出来

  1 /*服务的URL配置*/
  2 app.constant(‘ServiceConfig‘, {
  3     book_search: ‘https://api.douban.com/v2/book/search‘,
  4     book_search_id: ‘https://api.douban.com/v2/book/‘,
  5     
  6     music_search: ‘https://api.douban.com/v2/music/search‘,
  7     music_search_id: ‘https://api.douban.com/v2/music/‘,
  8     
  9     movie_search: ‘https://api.douban.com/v2/movie/search‘,
 10     movie_search_id: ‘https://api.douban.com/v2/movie/subject/‘
 11 });
 12 
 13 app.config([‘$stateProvider‘, ‘$urlRouterProvider‘,function($stateProvider, $urlRouterProvider){
 14     /*URL路由*/
 15     $urlRouterProvider.otherwise("/");
 16     
 17     /*状态配置*/
 18     $stateProvider
 19         //首页
 20         .state(‘index‘,{
 21             url: ‘/‘,
 22             views:{
 23                 header:{
 24                     templateUrl: ‘../html/views/list_header.html‘,
 25                     controller: ‘SearchController‘
 26                 },
 27                 container:{
 28                     templateUrl: ‘../html/views/list_book.html‘,
 29                     controller: ‘BookListController‘
 30                 },
 31                 footer:{
 32                     templateUrl: ‘../html/views/list_footer.html‘,
 33                     controller: ‘‘
 34                 }
 35             }
 36         })
 37         //book list
 38         .state(‘book_list‘,{
 39             url: ‘/book‘,
 40             views:{
 41                 header:{
 42                     templateUrl: ‘../html/views/list_header.html‘,
 43                     controller: ‘SearchController‘
 44                 },
 45                 container:{
 46                     templateUrl: ‘../html/views/list_book.html‘,
 47                     controller: ‘BookListController‘
 48                 },
 49                 footer:{
 50                     templateUrl: ‘../html/views/list_footer.html‘,
 51                     controller: ‘‘
 52                 }
 53             }
 54         })
 55         // book detail
 56         .state(‘book_detail‘,{
 57             url: ‘/book/:id‘,
 58             views:{
 59                 header:{
 60                     templateUrl: ‘../html/views/list_header.html‘,
 61                     controller: ‘SearchController‘
 62                 },
 63                 container:{
 64                     templateUrl: ‘../html/views/detail_book.html‘,
 65                     controller: ‘BookDetailController‘
 66                 },
 67                 footer:{
 68                     templateUrl: ‘../html/views/list_footer.html‘,
 69                     controller: ‘‘
 70                 }
 71             }
 72         })
 73         
 74         // music list
 75         .state(‘music_lsit‘,{
 76             url: ‘/music‘,
 77             views:{
 78                 header:{
 79                     templateUrl: ‘../html/views/list_header.html‘,
 80                     controller: ‘SearchController‘
 81                 },
 82                 container:{
 83                     templateUrl: ‘../html/views/list_music.html‘,
 84                     controller: ‘musicListController‘
 85                 },
 86                 footer:{
 87                     templateUrl: ‘../html/views/list_footer.html‘,
 88                     controller: ‘‘
 89                 }
 90             }
 91         })
 92         
 93         // movie list
 94         .state(‘movie_lsit‘,{
 95             url: ‘/movie‘,
 96             views:{
 97                 header:{
 98                     templateUrl: ‘../html/views/list_header.html‘,
 99                     controller: ‘SearchController‘
100                 },
101                 container:{
102                     templateUrl: ‘../html/views/list_movie.html‘,
103                     controller: ‘movieListController‘
104                 },
105                 footer:{
106                     templateUrl: ‘../html/views/list_footer.html‘,
107                     controller: ‘‘
108                 }
109             }
110         })
111         
112         .state(‘search‘,{
113             url: ‘/search/:type‘,
114             views:{
115                 header:{
116                     templateUrl: ‘../html/views/search.html‘,
117                     controller: ‘Search‘
118                 },
119                 container:{
120                     templateUrl: ‘‘,
121                     controller: ‘‘
122                 },
123                 footer:{
124                     templateUrl: ‘‘,
125                     controller: ‘‘
126                 }
127             }
128         });
129 }]);