1. Non-sens
Nom: 【Search Douban】
Récemment, j'ai prêté attention à l'API de Douban et j'ai constaté que la plate-forme ouverte de Douban doit renforcer la rédaction de documents de l'API ... mais il y a une découverte gratifiante que l'interface Douban V2 fournit une interface de recherche. J'utilise Phantom pour faire des robots récents. En y réfléchissant, c'est tellement beau! Il y a une interface Douban, et je n'ai pas à ramper de données ou à stocker des données. Je le jette sur la page GitHub et je le fais directement. Douban, gentil! J'ai également regardé Angular récemment, alors j'ai commencé à utiliser Angular + Douban API pour créer une application Web. Alors ... j'ai été jeté à la maison en ligne.
Adresse d'expérience: http://vczero.github.io/t/html/index.html#/
Adresse du projet: https://github.com/vczero/search (tout le monde est le bienvenu à Fork, le modifier à volonté et continuer à ajouter des fonctions; bienvenue pour progresser ensemble.)
2. Téléchargez directement l'image
(1) Recherche de livres
(2) Interface de recherche de musique
(3) Détails du livre
(4) Recherche de films
Iii. Structure et introduction du projet
3. Quelques points pour prêter attention
(1) -Webkit-Tap-Highlight-Color: RGBA (255 255,255,0); Supprimer les ombres de surbrillance lorsque vous cliquez
(2) Dimensionnement de la boîte: l'utilisation de la boîte de bordure, calcul de pixels contenant un rembourrage
(3) La combinaison de la position fixe et de recherche de recherche (causée par le clavier virtuel)
(4) Contrôle multi-visualités de l'angular-ui-router
(5) Divers détails du système iOS et Android
(6) Problème de compression de la dépendance du code angularjs
...
Je pense que le code du service et du routage de statut est affiché.
La copie de code est la suivante:
/ * Configuration de l'URL de 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/',
film_search: 'https://api.douban.com/v2/movie/search',
film_search_id: 'https://api.douban.com/v2/movie/subject/'
});
app.config (['$ stateprovider', '$ urlrouterprovider', fonction ($ stateprovider, $ urlrouterprovider) {
/ * Routage d'URL * /
$ urlrouterprovider.wore ("/");
/ * Configuration d'état * /
$ StateProvider
// première page
.State ('index', {
URL: '/',
Vues: {
En-tête: {
templateUrl: '../html/views/list_header.html',
contrôleur: «SearchController»
},
récipient:{
templateUrl: '../html/views/list_book.html',
Contrôleur: «BooklistController»
},
pied de page: {
templateUrl: '../html/views/list_footer.html',
Contrôleur: ''
}
}
})
// Liste de livres
.State ('book_list', {
URL: «/ livre»,
Vues: {
En-tête: {
templateUrl: '../html/views/list_header.html',
contrôleur: «SearchController»
},
récipient:{
templateUrl: '../html/views/list_book.html',
Contrôleur: «BooklistController»
},
pied de page: {
templateUrl: '../html/views/list_footer.html',
Contrôleur: ''
}
}
})
// Détail du livre
.State ('book_detail', {
URL: '/ book /: id',
Vues: {
En-tête: {
templateUrl: '../html/views/list_header.html',
contrôleur: «SearchController»
},
récipient:{
templateUrl: '../html/views/detail_book.html',
Contrôleur: «BookDetailController»
},
pied de page: {
templateUrl: '../html/views/list_footer.html',
Contrôleur: ''
}
}
})
// liste de musique
.State ('music_lsit', {
URL: «/ musique»,
Vues: {
En-tête: {
templateUrl: '../html/views/list_header.html',
contrôleur: «SearchController»
},
récipient:{
templateUrl: '../html/views/list_music.html',
Contrôleur: «MusiclistController»
},
pied de page: {
templateUrl: '../html/views/list_footer.html',
Contrôleur: ''
}
}
})
// Liste de films
.State ('film_lsit', {
URL: '/ film',
Vues: {
En-tête: {
templateUrl: '../html/views/list_header.html',
contrôleur: «SearchController»
},
récipient:{
templateUrl: '../html/views/list_movie.html',
Contrôleur: «MovieListController»
},
pied de page: {
templateUrl: '../html/views/list_footer.html',
Contrôleur: ''
}
}
})
.State ('Search', {
URL: '/ Search /: Type',
Vues: {
En-tête: {
templateUrl: '../html/views/search.html',
Contrôleur: «Recherche»
},
récipient:{
templateUrl: '',
Contrôleur: ''
},
pied de page: {
templateUrl: '',
Contrôleur: ''
}
}
});
}]);