WebApp_node.js developed based on Douban API + Angular

This article mainly introduces the webApp method and sample code developed based on Douban API + Angular. The results are very good. For more information, see the following.

Name: [Douban search]

I recently paid attention to the APIs of Douban, and found that the open platform of Douban needs to enhance its API documentation... but I am very pleased to find that the Douban V2 interface provides a search interface. I recently used phantom to get some crawlers. I think it's really beautiful! There is a Douban interface, so I don't have to crawl data or store data. Instead, I threw it to github page to complete the process. Douban, Nice! Recently I am also reading angular, so I started to use Angular + Douban API as a web app. So... it's time to go home online.

URL: http://vczero.github.io/t/html/index.html #/

Project address: https://github.com/vczero/search (Welcome to fork, any modification, continue to add features; Welcome to make bricks, together with progress .)

2. Direct

(1) Book Search

(2) Music Search Page

(3) book details

(4) movie search

Iii. Project Structure and overview

Iii. Notes

(1)-webkit-tap-highlight-color: rgba (255,255,255, 0); remove the highlighted shadow when you click

(2) box-sizing: Use of border-box, including pixel Calculation of padding

(3) combination of position fixed and search jump (caused by virtual keyboard)

(4) multi-view control of angular-ui-router

(5) various details of ios and android Systems

(6) compression of angularjs code dependency Injection

...

I think the code for the important service and status routing is posted.

The Code 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
// Homepage
. 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 :''
}
}
});
}]);