1. Nonsense
name:【Douban Search】
Recently I paid attention to Douban's API and found that Douban's open platform needs to strengthen API document writing... But there is a gratifying discovery that Douban V2 interface provides a search interface. I have been using phantom to make some crawlers recently. Thinking about it, it’s so beautiful! There is a Douban interface, and I don’t have to crawl data or store data. I throw it to github page and do it directly. Douban, Nice! I have also been watching angular recently, so I started to use Angular + Douban API to make a web app. So... I got tossed home online.
Experience address: http://vczero.github.io/t/html/index.html#/
Project address: https://github.com/vczero/search (Everyone is welcome to fork, modify it at will, and continue to add functions; welcome to make progress together.)
2. Directly upload the picture
(1) Book search
(2) Music search interface
(3) Book details
(4) Movie Search
III. Project structure and introduction
3. A few points to pay attention to
(1) -webkit-tap-highlight-color:rgba(255,255,255,0); Remove highlight shadows when clicked
(2) box-sizing: the use of border-box, pixel calculation containing padding
(3) The combination of position fixed and search jump (caused by virtual keyboard)
(4) Multi-view control of angular-ui-router
(5) Various details of ios & android system
(6) Problem of compressing angularjs code dependency injection
...
I think the code for the service and status routing is posted.
The code copy is as follows:
/*Service URL configuration*/
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 Routing*/
$urlRouterProvider.otherwise("/");
/*Status Configuration*/
$stateProvider
//front page
.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: ''
}
}
});
}]);