码迷,mamicode.com
首页 > 移动开发 > 详细

爱搜索,爱生活,基于豆瓣API & Angular开发的web App(by vczero)

时间:2014-12-12 19:01:32      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:android   style   blog   http   io   ar   color   os   使用   

一、扯淡的说

name:【豆瓣搜索】

最近关注了下豆瓣的API,发现豆瓣开放平台需要加强API文档撰写啊....但是有个可喜的发现豆瓣V2接口提供了搜索接口。最近在用phantom弄些爬虫,想想,真是美丽极了!有个豆瓣的接口,我都不用去爬数据,不用数据存储,丢给github page直接完事。豆瓣,Nice!最近也在看angular,于是就萌生了使用Angular + 豆瓣API 做一个web app。于是...网上回家就折腾了。

体验地址:http://vczero.github.io/t/html/index.html#/

bubuko.com,布布扣项目地址https://github.com/vczero/search  (欢迎大家fork,任意修改,继续增加功能;欢迎拍砖,一起进步。)

二、直接上图

(1)图书搜索

bubuko.com,布布扣

 (2)音乐搜索界面

bubuko.com,布布扣

(3)图书详情

bubuko.com,布布扣

(4)电影搜索

bubuko.com,布布扣

三、项目结构和简介

bubuko.com,布布扣

三、几个注意点

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

...

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

bubuko.com,布布扣
  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 }]);
View Code

 

爱搜索,爱生活,基于豆瓣API & Angular开发的web App(by vczero)

标签:android   style   blog   http   io   ar   color   os   使用   

原文地址:http://www.cnblogs.com/vczero/p/angular_1.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!