基于豆瓣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 相关文章推荐
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
Vue 表单控件绑定的实现示例
Aug 11 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
PHP中的self关键字详解
2019/06/23 PHP
javascript:void(0)使用探讨
2013/08/27 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
利用python3随机生成中文字符的实现方法
2017/11/24 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
客户表扬信范文
2014/01/10 职场文书
新教师岗前培训方案
2014/06/05 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
五心教育心得体会
2014/09/04 职场文书
大学生入党群众意见书
2015/06/02 职场文书
浅析Django接口版本控制
2021/06/26 Python