一、扯淡的说
name:【豆瓣搜索】
最近关注了下豆瓣的api，发现豆瓣开放平台需要加强api文档撰写啊....但是有个可喜的发现豆瓣v2接口提供了搜索接口。最近在用phantom弄些爬虫，想想，真是美丽极了！有个豆瓣的接口，我都不用去爬数据，不用数据存储，丢给github page直接完事。豆瓣，nice!最近也在看angular，于是就萌生了使用angular + 豆瓣api 做一个web app。于是...网上回家就折腾了。
体验地址：http://vczero.github.io/t/html/index.html#/
项目地址：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(/);
    /*状态配置*/
    $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: ''
                }
            }
        });
}]);