位置:cuclife.com > IT > AngularJS >

基于豆瓣aPI+angular开发的web app

name:【豆瓣搜索】

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

体验地址:#/


(点小图查看大图)

点击图片看大图

项目地址:https://github.com/vczero/search (欢迎大家fork,任意修改,继续增加功能;欢迎拍砖,一起进步。)

二、直接上图

(1)图书搜索


(点小图查看大图)

点击图片看大图

(2)音乐搜索界面


(点小图查看大图)

点击图片看大图

(3)图书详情


(点小图查看大图)

点击图片看大图

(4)电影搜索


(点小图查看大图)

点击图片看大图

三、项目结构和简介


(点小图查看大图)

点击图片看大图

三、几个注意点

(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("http://www.xue163.com/");
    /*状态配置*/
    $stateProvider
        //首页
        .state('index',{
            url: 'http://www.xue163.com/',
            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: ''
                }
            }
        });
}]);