基于豆瓣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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
jQuery实现列表的全选功能
Mar 18 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
基于require.js的使用(实例讲解)
Sep 07 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 Javascript
用webAPI实现图片放大镜效果
Nov 23 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
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
JavaScript 设计模式学习 Factory
2009/07/29 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
jquery foreach使用示例
2013/09/12 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
浅析使用Python搭建http服务器
2019/10/27 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
旅游管理毕业生自荐信
2013/11/05 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
建议书怎么写
2014/03/12 职场文书
跳槽求职信范文
2014/05/26 职场文书
医院节能减排方案
2014/06/13 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
微信小程序实现轮播图指示器
2022/06/25 Javascript