Love Search, Love life, Web App based on Watercress API & angular development (by Vczero)

One, the talk of nonsense

Name: "Watercress Search"

Recently focused on the next Watercress API, found that watercress open platform needs to strengthen the API document writing AH .... But there's a welcome discovery. The Watercress V2 interface provides a search interface. Recently in using Phantom to get some reptiles, think, really beautiful! There is a watercress interface, I do not have to crawl data, no data storage, lost to GitHub page directly finished. Watercress, nice! recently also looked at angular, so the initiation of the use of angular + watercress API to do a web app. So... Online home on the toss.

Experience Address:http://vczero.github.io/t/html/index.html#/

Project Address : Https://github.com/vczero/search (Welcome to fork, any modification, continue to increase the function; Welcome to shoot Bricks, progress together. ）

Second, direct

(1) Book Search

(2) Music Search interface

(3) Details of the book

(4) Movie Search

III. Project Structure and introduction

Iii. several points of attention

(1)-webkit-tap-highlight-color:rgba (255,255,255,0); remove highlight shadows when clicked

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

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

(4) Multi-view control of Angular-ui-router

(5) Various details of iOS & Android system

(6) Compression Angularjs code Dependency Injection problem

...

I think the more important service and status of the route code is posted out

1 /*URL Configuration of the service*/2App.constant (' ServiceConfig ', {3Book_search: ' Https://api.douban.com/v2/book/search ',4book_search_id: ' https://api.douban.com/v2/book/',5     6Music_search: ' Https://api.douban.com/v2/music/search ',7music_search_id: ' https://api.douban.com/v2/music/',8     9Movie_search: ' Https://api.douban.com/v2/movie/search ',Tenmovie_search_id: ' https://api.douban.com/v2/movie/subject/' One }); A  -App. Config ([' $stateProvider ', ' $urlRouterProvider ',function($stateProvider, $urlRouterProvider) { -     /*URL Routing*/ the$urlRouterProvider. Otherwise ("/"); -      -     /*State Configuration*/ - $stateProvider +         //Home Page -. State (' Index ',{ +URL: '/', A views:{ at header:{ -Templateurl: '. /html/views/list_header.html ', -Controller: ' Searchcontroller ' -                 }, - container:{ -Templateurl: '. /html/views/list_book.html ', inController: ' Booklistcontroller ' -                 }, to footer:{ +Templateurl: '. /html/views/list_footer.html ', -Controller: " the                 } *             } $         })Panax Notoginseng         //Book list -. State (' Book_list ',{ theURL: '/book ', + views:{ A header:{ theTemplateurl: '. /html/views/list_header.html ', +Controller: ' Searchcontroller ' -                 }, $ container:{ $Templateurl: '. /html/views/list_book.html ', -Controller: ' Booklistcontroller ' -                 }, the footer:{ -Templateurl: '. /html/views/list_footer.html ',WuyiController: " the                 } -             } Wu         }) -         //Book detail About. State (' Book_detail ',{ $URL: '/book/:id ', - views:{ - header:{ -Templateurl: '. /html/views/list_header.html ', AController: ' Searchcontroller ' +                 }, the container:{ -Templateurl: '. /html/views/detail_book.html ', $Controller: ' Bookdetailcontroller ' the                 }, the footer:{ theTemplateurl: '. /html/views/list_footer.html ', theController: " -                 } in             } the         }) the          About         //Music list the. State (' Music_lsit ',{ theURL: '/music ', the views:{ + header:{ -Templateurl: '. /html/views/list_header.html ', theController: ' Searchcontroller 'Bayi                 }, the container:{ theTemplateurl: '. /html/views/list_music.html ', -Controller: ' Musiclistcontroller ' -                 }, the footer:{ theTemplateurl: '. /html/views/list_footer.html ', theController: " the                 } -             } the         }) the          the         //Movie List94. State (' Movie_lsit ',{ theURL: '/movie ', the views:{ the header:{98Templateurl: '. /html/views/list_header.html ', AboutController: ' Searchcontroller ' -                 },101 container:{102Templateurl: '. /html/views/list_movie.html ',103Controller: ' Movielistcontroller '104                 }, the footer:{106Templateurl: '. /html/views/list_footer.html ',107Controller: "108                 }109             } the         })111          the. State (' Search ',{113URL: '/search/:type ', the views:{ the header:{ theTemplateurl: '. /html/views/search.html ',117Controller: ' Search '118                 },119 container:{ -Templateurl: ",121Controller: "122                 },123 footer:{124Templateurl: ", theController: "126                 }127             } -         });129}]);

View Code

Love Search, Love life, Web App based on Watercress API & angular development (by Vczero)