One, the nonsense said
Name: "Watercress Search"
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, it is very 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. ）
Second, directly above the figure
(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
...
I think the more important service and status routing code posted out
Copy Code code as follows:
/* 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: '
}
}
});
}]);
