name:【豆瓣搜索】

最近關(guān)注了下豆瓣的API，發(fā)現(xiàn)豆瓣開放平臺(tái)需要加強(qiáng)API文檔撰寫啊....但是有個(gè)可喜的發(fā)現(xiàn)豆瓣V2接口提供了搜索接口。最近在用phantom弄些爬蟲，想想，真是美麗極了！有個(gè)豆瓣的接口，我都不用去爬數(shù)據(jù)，不用數(shù)據(jù)存儲(chǔ)，丟給github page直接完事。豆瓣，Nice!最近也在看angular，于是就萌生了使用Angular + 豆瓣API 做一個(gè)web app。于是...網(wǎng)上回家就折騰了。

體驗(yàn)地址：http://vczero.github.io/t/html/index.html#/

項(xiàng)目地址：https://github.com/vczero/search （歡迎大家fork，任意修改，繼續(xù)增加功能；歡迎拍磚，一起進(jìn)步。）

二、直接上圖

（1）圖書搜索

（2）音樂搜索界面

（3）圖書詳情

（4）電影搜索

三、項(xiàng)目結(jié)構(gòu)和簡介

三、幾個(gè)注意點(diǎn)

（1）-webkit-tap-highlight-color:rgba(255,255,255,0);去除點(diǎn)擊時(shí)的高亮陰影

（2）box-sizing:border-box的使用，包含padding的像素計(jì)算

（3）position fixed 和 搜索跳轉(zhuǎn)的結(jié)合（虛擬鍵盤引起）

（4）angular-ui-router的多視圖控制

（5）ios & android系統(tǒng)的各種細(xì)節(jié)

（6）壓縮angularjs代碼依賴注入的問題

...

我覺得比較重要的服務(wù)和狀態(tài)路由的代碼貼出來

代碼如下:
/*服務(wù)的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("/");
/*狀態(tài)配置*/
$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: ''
}
}
});
}]);

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com