基于豆瓣API+Angular開發(fā)的web App
更新時間：2015年01月02日 16:41:19 投稿：hebedich
這篇文章主要介紹了基于豆瓣API+Angular開發(fā)的web App的方法和示例代碼，效果非常棒，有需要的小伙伴參考下
一、扯淡的說
name:【豆瓣搜索】
最近關(guān)注了下豆瓣的API，發(fā)現(xiàn)豆瓣開放平臺需要加強API文檔撰寫啊....但是有個可喜的發(fā)現(xiàn)豆瓣V2接口提供了搜索接口。最近在用phantom弄些爬蟲，想想，真是美麗極了！有個豆瓣的接口，我都不用去爬數(shù)據(jù)，不用數(shù)據(jù)存儲，丟給github page直接完事。豆瓣，Nice!最近也在看angular，于是就萌生了使用Angular + 豆瓣API 做一個web app。于是...網(wǎng)上回家就折騰了。
體驗地址：http://vczero.github.io/t/html/index.html#/
項目地址：https://github.com/vczero/search （歡迎大家fork，任意修改，繼續(xù)增加功能；歡迎拍磚，一起進步。）
二、直接上圖
（1）圖書搜索
（2）音樂搜索界面
（3）圖書詳情
（4）電影搜索
三、項目結(jié)構(gòu)和簡介
三、幾個注意點
（1）-webkit-tap-highlight-color:rgba(255,255,255,0);去除點擊時的高亮陰影
（2）box-sizing:border-box的使用，包含padding的像素計算
（3）position fixed 和 搜索跳轉(zhuǎn)的結(jié)合（虛擬鍵盤引起）
（4）angular-ui-router的多視圖控制
（5）ios & android系統(tǒng)的各種細節(jié)
（6）壓縮angularjs代碼依賴注入的問題
...
我覺得比較重要的服務(wù)和狀態(tài)路由的代碼貼出來
復(fù)制代碼 代碼如下:
/*服務(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: ''
}
}
});
}]);
相關(guān)文章
nodejs+axios爬取html出現(xiàn)中文亂碼并解決示例
這篇文章主要為大家介紹了nodejs+axios爬取html出現(xiàn)中文亂碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹NodeJS事件循環(huán)，Node中代碼從上到下同步執(zhí)行，在執(zhí)行過程中會將不同的任務(wù)添加到相應(yīng)的隊列中，那具體有的循環(huán)又是怎么回事呢，限免現(xiàn)編就帶大家學習該詳細內(nèi)容，需要的朋友也可以參考一下2022-02-02
這篇文章主要介紹了KOA+egg.js集成kafka消息隊列的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家介紹了Node模塊化開發(fā)實例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要為大家介紹了Node Sass依賴問題排查思路解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
Win7系統(tǒng)中如何安裝高版本的NodeJS(親測有效!)
Node.js是基于Chrome V8引擎的JavaScript運行環(huán)境,能夠使JavaScript在服務(wù)器端運行,這篇文章主要給大家介紹了關(guān)于Win7系統(tǒng)中如何安裝高版本的NodeJS的相關(guān)資料,需要的朋友可以參考下2023-12-12
express搭建的nodejs項目使用webpack進行壓縮打包
對于打包這個問題它并不是難點,但是對于我們這種初學者來說,根本就不知道應(yīng)該怎么做,下面這篇文章主要給大家介紹了關(guān)于express搭建的nodejs項目使用webpack進行壓縮打包的相關(guān)資料,需要的朋友可以參考下2022-12-12
windows8.1+iis8.5下安裝node.js開發(fā)環(huán)境
這篇文章主要介紹了windows8.1+iis8.5下安裝node.js開發(fā)環(huán)境的方法,需要的朋友可以參考下2014-12-12
通過npm package manager來安裝和管理包是我們最為常見的方式之一，本文將從淺入深地帶大家剖析一下npm install的執(zhí)行過程，感興趣的可以學習一下2023-05-05
這篇文章主要介紹了Node.js 進程平滑離場剖析小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01