基于豆瓣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 相关文章推荐
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
javascript常用的方法分享
Jul 01 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
简单的js表格操作
Sep 24 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
vue实现评价星星功能
Jun 30 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中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
JavaScript中函数(Function)的apply与call理解
2015/07/08 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
浅谈Python中的可变对象和不可变对象
2017/07/07 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
Python调用JavaScript代码的方法
2020/10/27 Python
英国手机零售商:Metrofone
2019/03/18 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
什么是servlet
2012/05/08 面试题
就业推荐表自我鉴定范文
2014/03/21 职场文书
代理人委托书
2014/08/01 职场文书
网吧员工管理制度
2015/08/05 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis
java设计模式--七大原则详解
2021/07/21 Java/Android
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python