基于豆瓣API+Angular开发的web App


Posted in Javascript onJanuary 02, 2015

一、扯淡的说

name:【豆瓣搜索】

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

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

基于豆瓣API+Angular开发的web App项目地址:https://github.com/vczero/search (欢迎大家fork,任意修改,继续增加功能;欢迎拍砖,一起进步。)

二、直接上图

(1)图书搜索

基于豆瓣API+Angular开发的web App

(2)音乐搜索界面

基于豆瓣API+Angular开发的web App

(3)图书详情

基于豆瓣API+Angular开发的web App

(4)电影搜索

基于豆瓣API+Angular开发的web App

三、项目结构和简介

基于豆瓣API+Angular开发的web App

三、几个注意点

(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: ''

                }

            }

        });

}]);
Javascript 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 #Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 #Javascript
javascript制作的cookie封装及使用指南
Jan 02 #Javascript
分享一则javascript 调试技巧
Jan 02 #Javascript
javascript实现无限级select联动菜单
Jan 02 #Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 #Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 #Javascript
You might like
一个简单的域名注册情况查询程序
2006/10/09 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
python3.6.3+opencv3.3.0实现动态人脸捕获
2018/05/25 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
python支付宝支付示例详解
2019/08/22 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
Python调用Windows命令打印文件
2020/02/07 Python
详解Django中异步任务之django-celery
2020/11/05 Python
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
校园之星获奖感言
2014/01/29 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
便利店促销方案
2014/02/20 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis
python装饰器代码解析
2022/03/23 Python
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL