1. Omong kosong
Nama: 【Pencarian Doban】
Baru -baru ini saya memperhatikan API Douban dan menemukan bahwa platform terbuka Douban perlu memperkuat penulisan dokumen API ... tetapi ada penemuan yang memuaskan bahwa antarmuka DoBan V2 menyediakan antarmuka pencarian. Saya telah menggunakan Phantom untuk membuat beberapa crawler baru -baru ini. Memikirkannya, sangat indah! Ada antarmuka Douban, dan saya tidak perlu merangkak data atau menyimpan data. Saya melemparkannya ke halaman GitHub dan melakukannya secara langsung. Douban, bagus! Saya juga telah menonton Angular baru -baru ini, jadi saya mulai menggunakan Angular + Douban API untuk membuat aplikasi web. Jadi ... saya dilemparkan pulang secara online.
Alamat Pengalaman: http://vczero.github.io/t/html/index.html#/
Alamat Proyek: https://github.com/vczero/search (semua orang dipersilakan untuk fork, memodifikasinya sesuka hati, dan terus menambahkan fungsi; selamat datang untuk membuat kemajuan bersama.)
2. Langsung unggah gambar
(1) Pencarian Buku
(2) Antarmuka Pencarian Musik
(3) Detail Buku
(4) Pencarian Film
AKU AKU AKU. Struktur dan Pendahuluan Proyek
3. Beberapa poin yang harus diperhatikan
(1) -webkit-tap-highlight-color: RGBA (255.255.255,0); Hapus Bayangan Sorot Saat Diklik
(2) Ukuran kotak: Penggunaan kotak perbatasan, perhitungan piksel yang mengandung padding
(3) Kombinasi posisi tetap dan lompatan pencarian (disebabkan oleh keyboard virtual)
(4) Kontrol multi-view dari Angular-UI-Router
(5) Berbagai detail sistem iOS & Android
(6) Masalah mengompresi Injeksi Ketergantungan Kode AngularJS
...
Saya pikir kode untuk layanan dan routing status diposting.
Salinan kode adalah sebagai berikut:
/*Konfigurasi URL Layanan*/
app.constant ('serviceConfig', {
book_search: 'https://api.doBan.com/v2/book/search',
book_search_id: 'https://api.doBan.com/v2/book/',
Music_search: 'https://api.doBan.com/v2/music/search',
music_search_id: 'https://api.doBan.com/v2/music/',
film_search: 'https://api.doBan.com/v2/movie/search',
film_search_id: 'https://api.doBan.com/v2/movie/subject/'
});
app.config (['$ stateProvider', '$ urlRouterProvider', function ($ stateProvider, $ urlRouterProvider) {
/*Routing URL*/
$ urlRouterProvider.otherwise ("/");
/*Konfigurasi Status*/
$ stateProvider
//halaman depan
.state ('index', {
URL: '/',
Tampilan: {
header: {
templateUrl: '../html/views/list_header.html',
Pengontrol: 'SearchController'
},
wadah:{
TemplateUrl: '../html/views/list_book.html',
Pengontrol: 'BookListController'
},
footer: {
templateUrl: '../html/views/list_footer.html',
Pengontrol: ''
}
}
})
// daftar buku
.state ('book_list', {
URL: '/Buku',
Tampilan: {
header: {
templateUrl: '../html/views/list_header.html',
Pengontrol: 'SearchController'
},
wadah:{
TemplateUrl: '../html/views/list_book.html',
Pengontrol: 'BookListController'
},
footer: {
templateUrl: '../html/views/list_footer.html',
Pengontrol: ''
}
}
})
// Pesan detail
.state ('book_detail', {
url: '/book/: id',
Tampilan: {
header: {
templateUrl: '../html/views/list_header.html',
Pengontrol: 'SearchController'
},
wadah:{
TemplateUrl: '../html/views/detail_book.html',
Pengontrol: 'BookDetailController'
},
footer: {
templateUrl: '../html/views/list_footer.html',
Pengontrol: ''
}
}
})
// Daftar Musik
.state ('music_lsit', {
URL: '/musik',
Tampilan: {
header: {
templateUrl: '../html/views/list_header.html',
Pengontrol: 'SearchController'
},
wadah:{
templateUrl: '../html/views/list_music.html',
Pengontrol: 'MusicListController'
},
footer: {
templateUrl: '../html/views/list_footer.html',
Pengontrol: ''
}
}
})
// Daftar film
.state ('film_lsit', {
URL: '/film',
Tampilan: {
header: {
templateUrl: '../html/views/list_header.html',
Pengontrol: 'SearchController'
},
wadah:{
templateUrl: '../html/views/list_movie.html',
Pengontrol: 'MovielistController'
},
footer: {
templateUrl: '../html/views/list_footer.html',
Pengontrol: ''
}
}
})
.State ('Search', {
URL: '/Cari/: Type',
Tampilan: {
header: {
TemplateUrl: '../html/views/search.html',
Pengontrol: 'Cari'
},
wadah:{
TemplateUrl: '',
Pengontrol: ''
},
footer: {
TemplateUrl: '',
Pengontrol: ''
}
}
});
}]);