Recently paid attention to the next Watercress API, found that watercress open platform to strengthen the API document writing AH .... But there's a welcome discovery. Watercress V2 Interface provides a search interface. Recently in the use of phantom to get some reptiles, think, really beautiful! There is a watercress interface, I do not have to crawl data, no data storage, throw to GitHub page directly finished. Watercress, nice! recently also see angular, so the initiation of the use of angular + watercress API to do a web app. So... Going home on the internet is a toss.
Experience Address: http://vczero.github.io/t/html/index.html#/
Project Address: Https://github.com/vczero/search (Welcome to fork, arbitrary modification, continue to increase the function; Welcome to the brick, progress together. )
The effect chart is as follows
(1) Book Search
(2) Music Search interface
(3) Book details
(4) Movie Search
III. structure and introduction of the project
Three, a few attention points
(1)-webkit-tap-highlight-color:rgba (255,255,255,0); remove highlighted shadows when clicked
(2) The use of box-sizing:border-box, including padding pixel calculations
(3) Position fixed and search jump combination (virtual keyboard caused)
(4) Multi-view control of Angular-ui-router
(5) The details of iOS & Android system
(6) Compression Angularjs code Dependency Injection problem
...
The more important code
The code is as follows |
Copy Code |
/* URL configuration of the service * * 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 Home . 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: ' } } }); }]); |