愛搜尋，愛生活，基於豆瓣API & Angular開發的web App（by vczero）

標籤：android   style   blog   http   io   ar   color   os   使用   

一、扯淡的說

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代碼依賴注入的問題

...

我覺得比較重要的服務和狀態路由的代碼貼出來

  1 /*服務的URL配置*/  2 app.constant(‘ServiceConfig‘, {  3     book_search: ‘https://api.douban.com/v2/book/search‘,  4     book_search_id: ‘https://api.douban.com/v2/book/‘,  5       6     music_search: ‘https://api.douban.com/v2/music/search‘,  7     music_search_id: ‘https://api.douban.com/v2/music/‘,  8       9     movie_search: ‘https://api.douban.com/v2/movie/search‘, 10     movie_search_id: ‘https://api.douban.com/v2/movie/subject/‘ 11 }); 12  13 app.config([‘$stateProvider‘, ‘$urlRouterProvider‘,function($stateProvider, $urlRouterProvider){ 14     /*URL路由*/ 15     $urlRouterProvider.otherwise("/"); 16      17     /*狀態配置*/ 18     $stateProvider 19         //首頁 20         .state(‘index‘,{ 21             url: ‘/‘, 22             views:{ 23                 header:{ 24                     templateUrl: ‘../html/views/list_header.html‘, 25                     controller: ‘SearchController‘ 26                 }, 27                 container:{ 28                     templateUrl: ‘../html/views/list_book.html‘, 29                     controller: ‘BookListController‘ 30                 }, 31                 footer:{ 32                     templateUrl: ‘../html/views/list_footer.html‘, 33                     controller: ‘‘ 34                 } 35             } 36         }) 37         //book list 38         .state(‘book_list‘,{ 39             url: ‘/book‘, 40             views:{ 41                 header:{ 42                     templateUrl: ‘../html/views/list_header.html‘, 43                     controller: ‘SearchController‘ 44                 }, 45                 container:{ 46                     templateUrl: ‘../html/views/list_book.html‘, 47                     controller: ‘BookListController‘ 48                 }, 49                 footer:{ 50                     templateUrl: ‘../html/views/list_footer.html‘, 51                     controller: ‘‘ 52                 } 53             } 54         }) 55         // book detail 56         .state(‘book_detail‘,{ 57             url: ‘/book/:id‘, 58             views:{ 59                 header:{ 60                     templateUrl: ‘../html/views/list_header.html‘, 61                     controller: ‘SearchController‘ 62                 }, 63                 container:{ 64                     templateUrl: ‘../html/views/detail_book.html‘, 65                     controller: ‘BookDetailController‘ 66                 }, 67                 footer:{ 68                     templateUrl: ‘../html/views/list_footer.html‘, 69                     controller: ‘‘ 70                 } 71             } 72         }) 73          74         // music list 75         .state(‘music_lsit‘,{ 76             url: ‘/music‘, 77             views:{ 78                 header:{ 79                     templateUrl: ‘../html/views/list_header.html‘, 80                     controller: ‘SearchController‘ 81                 }, 82                 container:{ 83                     templateUrl: ‘../html/views/list_music.html‘, 84                     controller: ‘musicListController‘ 85                 }, 86                 footer:{ 87                     templateUrl: ‘../html/views/list_footer.html‘, 88                     controller: ‘‘ 89                 } 90             } 91         }) 92          93         // movie list 94         .state(‘movie_lsit‘,{ 95             url: ‘/movie‘, 96             views:{ 97                 header:{ 98                     templateUrl: ‘../html/views/list_header.html‘, 99                     controller: ‘SearchController‘100                 },101                 container:{102                     templateUrl: ‘../html/views/list_movie.html‘,103                     controller: ‘movieListController‘104                 },105                 footer:{106                     templateUrl: ‘../html/views/list_footer.html‘,107                     controller: ‘‘108                 }109             }110         })111         112         .state(‘search‘,{113             url: ‘/search/:type‘,114             views:{115                 header:{116                     templateUrl: ‘../html/views/search.html‘,117                     controller: ‘Search‘118                 },119                 container:{120                     templateUrl: ‘‘,121                     controller: ‘‘122                 },123                 footer:{124                     templateUrl: ‘‘,125                     controller: ‘‘126                 }127             }128         });129 }]);

View Code

 

愛搜尋，愛生活，基於豆瓣API & Angular開發的web App（by vczero）