基于豆瓣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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
解析Vue.js中的组件
Feb 02 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 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
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
简述php环境搭建与配置
2016/12/05 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
Vue如何基于vue-i18n实现多国语言兼容
2020/07/17 Javascript
vue v-model的用法解析
2020/10/19 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
python SSH模块登录,远程机执行shell命令实例解析
2018/01/12 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
python实现发送邮件
2021/03/02 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
如何执行一个shell程序
2012/11/23 面试题
《胖乎乎的小手》教学反思
2014/02/26 职场文书
槐乡的孩子教学反思
2014/04/27 职场文书
另类冲刺标语
2014/06/24 职场文书
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python