分享Bootstrap+angular实现豆瓣电影app实例
1、搭建项目框架
npm初始化项目
安装需要的第三方库
新建一个index.html页面 引用 这三个依赖库
2、搭建首页样式
3、配置angular路由
(function(angular){'use strict';var module = angular.module('movie.in_theaters',['ngRoute']);
module.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/in_theaters',{
controller: 'inTheatersController',
templateUrl: '/in_theaters/view.html'});
}]);
module.controller('inTheatersController',['$scope',function($scope){
}]);
})(angular);<h1 class="page-header">正在热映</h1>
(function(angular){'use strict';var module = angular.module('movie.coming_soon',['ngRoute']);
module.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/coming_soon',{
controller: 'comingSoonController',
templateUrl: '/coming_soon/view.html'});
}]);
module.controller('comingSoonController',['$scope',function($scope){
}]);
})(angular);<h1 class="page-header">即将上映</h1>
(function (angular) {'use strict';var module = angular.module('movie', ['ngRoute', 'movie.in_theaters','movie.coming_soon' ]);
module.config(['$routeProvider', function ($routeProvider) {
$routeProvider.otherwise({
redirectTo: '/in_theaters'});
}]);
})(angular);<body ng-app="movie">
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" ng-view> </div>
<script src="/js/app.js?1.1.11"></script>
4、豆瓣API
豆瓣API开发者文档
(function (angular) {'use strict';var http = angular.module('movie.http', []);
http.service('HttpService', ['$window', '$document', function ($window, $document) {this.jsonp = function (url, data, callback) {var cbFuncName = 'jsonp_fun' +Math.random().toString().replace('.', '');
$window[cbFuncName] = callback;var queryString = url.indexOf('?') == -1 ? '?' : '&';for (var key in data) {
queryString += key + '=' + data[key] + '&';
}
queryString += 'callback=' + cbFuncName;var script = document.createElement('script');
script.src = url + queryString;
$document[0].body.appendChild(script);
}
}]);
})(angular);(function (angular) {'use strict';var module = angular.module('movie.in_theaters', ['ngRoute', 'movie.http']);
module.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/in_theaters', {
controller: 'inTheatersController',
templateUrl: '/in_theaters/view.html'});
}]);
module.controller('inTheatersController', ['$scope', 'HttpService', function ($scope, HttpService) {
console.log(HttpService);
HttpService.jsonp('http://api.douban.com/v2/movie/in_theaters', {
count: 10,
start: 0}, function (data) {
$scope.data = data;
$scope.$apply();
console.log(data);
});
}]);
})(angular);<h1 class="page-header">{{data.title}}</h1><div class="list-group"><a href="{{item.alt}}" class="list-group-item" ng-repeat="item in data.subjects"><span class="badge">{{item.rating.average}}</span><div class="media"><div class="media-left"><img class="media-object" ng-src="{{item.images.small}}" alt=""></div><div class="media-body"><h3 class="media-heading">{{item.title}}</h3><p>类型：<span>{{item.genres.join('、')}}</span></p><p>导演：<span ng-repeat="d in item.casts">{{d.name +($last?'':'、')}}</span></p> </div></div></a></div>(function(angular){'use strict';var module = angular.module('movie.coming_soon',['ngRoute','movie.http']);
module.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/coming_soon',{
controller: 'comingSoonController',
templateUrl: '/coming_soon/view.html'});
}]);
module.controller('comingSoonController',['$scope','HttpService',function($scope,HttpService){
HttpService.jsonp('http://api.douban.com/v2/movie/coming_soon',{
count:10,
start:0},function(data){
$scope.data=data;
$scope.$apply();
});
}]);
})(angular);<h1 class="page-header">{{data.title}}</h1><div class="list-group"><a href="{{item.alt}}" class="list-group-item" ng-repeat="item in data.subjects"><span class="badge">{{item.rating.average}}</span><div class="media"><div class="media-left"><img class="media-object" ng-src="{{item.images.small}}" alt=""></div><div class="media-body"><h3 class="media-heading">{{item.title}}</h3><p>类型：<span>{{item.genres.join('、')}}</span></p><p>导演：<span ng-repeat="d in item.casts">{{d.name +($last?'':'、')}}</span></p> </div></div></a></div><script src="/components/http.js?1.1.11"></script>
最后展示的效果为
项目到这边已经完成的差不多了
Atas ialah kandungan terperinci 分享Bootstrap+angular实现豆瓣电影app实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Filem perlumbaan 'Gran Turismo' dikeluarkan di pawagam tanah besar hari ini, dengan skor kesegaran Rotten Tomatoes sebanyak 63%
Sep 10, 2023 pm 08:33 PM
Menurut berita dari laman web ini pada 1 September, filem aksi perlumbaan yang penuh ghairah "Gran Turismo: Speed" telah dikeluarkan secara rasmi hari ini Filem ini diadaptasi dari pengalaman legenda sebenar pemain PlayStation menjadi pemandu perlumbaan profesional, Neil Blom. Daerah 9" Diarahkan oleh Kem. Laman web ini mendapati bahawa "Gran Turismo: Speed" mempunyai skor kesegaran Rotten Tomatoes sebanyak 63% dan nilai popcorn sebanyak 98%, tapak web penarafan filem dan televisyen CinemaScore mempunyai rating penonton A, dan box office global telah melebihi AS$56 juta; . Filem ini mengisahkan tentang seorang budak permainan biasa yang cuba sedaya upaya untuk mengejar impian berlumba yang tidak dapat dicapai Tanpa digemari oleh dunia luar, dia bergantung pada bakat, kerja keras dan cintanya untuk sentiasa mencabar had di arena sebenar. hidup dan mati, mengatasi lawannya, dan akhirnya berjaya menjadi pelumba
Imej pratonton 'Digimon Adventure 02 THE BEGINNING' yang dikeluarkan, akan dikeluarkan di Jepun pada 27 Oktober
Sep 04, 2023 pm 03:57 PM
Laman web ini melaporkan pada 1 September bahawa imej pratonton baharu versi teater "Digimon Adventure 02 THEBEGINNING" telah dikeluarkan dan akan dikeluarkan di Jepun pada 27 Oktober. Laman web ini menyedari bahawa versi teater sebelum ini telah mengeluarkan treler Selain Daisuke, V-Zimon dan protagonis lain, protagonis Rui Owada membuat debutnya. Treler itu menayangkan pentas "Mitsuoka" di mana siri "Digimon" bermula Bermula dari kemunculan protagonis Taichi Yagami dan kakaknya Hikari dari "Digimon Adventure", ikatan "tidak boleh ditukar ganti" telah "didedahkan." Pada masa yang sama, Digimon nostalgia seperti Angemon, Ankylomon, dan Aquimon telah muncul satu demi satu, serta Emperordramon (mod naga), Fairymon, Lighteater, dll. Pengenalan plot: Dunia ini penuh dengan kemungkinan. Beberapa dunia yang dibentangkan di hadapan mata saya kadang-kadang memberi saya
Treler konsep 'Bear Bears Reversal of Time and Space' dikeluarkan dan akan dikeluarkan pada hari pertama Tahun Baru Imlek pada 2024
Oct 27, 2023 pm 09:13 PM
Menurut berita dari laman web ini pada 27 Oktober, The Bears secara rasmi mengumumkan treler konsep "The Bears Reversal of Time and Space", yang akan dikeluarkan pada hari pertama Tahun Baru Imlek pada 2024 (10 Februari). Laman web ini mendapati bahawa "Bear Bears: Reverse Time and Space" ialah filem ke-10 dalam siri filem "Bear Bears", yang diterbitkan oleh Huaqiang Fantawild (Shenzhen) Animation Co., Ltd. Dapat dilihat dari treler bahawa Bald Qiang telah berubah daripada seorang penebang kayu kepada "pekerja" di pejabat Ketika Bald Qiang duduk di atas kerusi dengan memakai "alat misteri", "Bear Infested: Treasure Hunt", " "Beruang Beruang. : Angin Beruang", "Beruang Berhantu - Angkasa Fantasi", "Beruang Berhantu - Era Primitif", "Beruang Berhantu - Benua Liar", "Beruang Berhantu - Kembali ke Bumi", "Beruang Berhantu - Ikutlah Saya" "Bear Core" dan klip filem lain yang dipancarkan. Sinopsis plot: Kepala Botak
Bagaimana untuk menetapkan mod Bahasa Inggeris pada aplikasi Douban Bagaimana untuk menetapkan mod Bahasa Inggeris pada aplikasi Douban
Mar 12, 2024 pm 02:46 PM
Bagaimana untuk menetapkan mod bahasa Inggeris pada aplikasi Douban? Aplikasi Douban ialah perisian yang membolehkan anda melihat ulasan pelbagai sumber Perisian ini mempunyai banyak fungsi Apabila pengguna menggunakan perisian ini buat kali pertama, mereka perlu log masuk, dan bahasa lalai pada perisian ini adalah Untuk mod Cina, beberapa. pengguna suka menggunakan mod Bahasa Inggeris, tetapi mereka tidak tahu cara menetapkan mod Bahasa Inggeris pada perisian ini. Editor di bawah telah menyusun kaedah menetapkan mod Bahasa Inggeris untuk rujukan anda. Cara menetapkan mod Bahasa Inggeris pada aplikasi Douban: 1. Buka aplikasi "Douban" pada telefon anda 2. Klik "Saya" 3. Pilih "Tetapan" di sudut kanan atas.
Filem mudah alih 'Hua Jing' bakal dikeluarkan: keseluruhan filem itu dirakam menggunakan siri Huawei Pura70
Jul 16, 2024 pm 09:04 PM
Menurut berita pada 15 Julai, He Gang, Ketua Pegawai Eksekutif Huawei Terminal BG, hari ini mengumumkan bahawa filem telefon bimbit "Hua Jing" ciptaan bersama Huawei dan pengarah Zhao Xiaoding akan dikeluarkan tidak lama lagi. Beliau menambah: "Sejak kami berganding bahu dengan Festival Filem Ayam Emas pada tahun 2019 untuk melancarkan 'Projek Filem Mudah Alih Ayam Emas Pengimejan Huawei', kami telah menerima lebih daripada 10,000 penyertaan. Karya berwarna-warni telah membolehkan saya melihat apa yang boleh dicapai dengan merakam filem dengan telefon bimbit Kemungkinan dan kedalaman naratif. Difahamkan bahawa Zhao Xiaoding ialah jurugambar diraja Zhang Yimou dan telah mengerjakan banyak filem Zhang Yimou.
Panduan 'Itik Tidak Dijangka' untuk menjadi ibu tiri pada tahun 80-an untuk membantu heroin menjalani kehidupan yang bahagia
Mar 12, 2024 pm 03:52 PM
Unexpected Duck ialah permainan teka-teki kasual yang popular di Douyin. Antaranya, membantu heroin menjalani kehidupan yang bahagia sebagai ibu tiri pada tahun 80-an adalah salah satu tahap dalam permainan Unexpected Duck ? Hari ini, editor laman web ini membawakan anda panduan untuk membersihkan permainan "Unexpected Duck" 80's Stepmother untuk membantu heroin menjalani kehidupan yang bahagia lihat bersama! "Itik Tidak Dijangka" Menjadi ibu tiri pada tahun 80-an dan bantu heroin menjalani kehidupan yang bahagia heroin hidup bahagia Dalam tahap ini, seret beg pakaian ke kakak anda, dan kemudian seret wang ke kedudukan yang ditunjukkan dalam gambar di bawah: 2. Di sebelah kanan, seret jarum dan benang, penyapu dan spatula ke. si kakak 3. Kemudian seret duit ke kedudukan yang ditunjukkan dalam gambar di bawah: 4. Kemudian seret
Filem 'Sakamoto Ryuichi: Masterpiece' dijadualkan ditayangkan di seluruh negara pada 31 Mei, merakamkan konsert piano terakhirnya.
May 09, 2024 pm 03:55 PM
Laman web ini melaporkan pada 9 Mei bahawa filem "Sakamoto Ryuichi: The Masterpiece" mengeluarkan poster yang telah dimuktamadkan, mengesahkan bahawa ia akan dikeluarkan di seluruh negara pada 31 Mei. Ia mengandungi 20 lagu klasik dan berdurasi kira-kira 103 minit. Filem ini mendapat banyak populariti dan reputasi apabila ia ditayangkan di Festival Filem Beijing. Muzik mengalir, mencipta semula pergerakan kehidupan, tetapi muziknya tidak berkesudahan. Laman web ini mendapati bahawa filem ini akan tersedia dalam versi 2D, CINITY, CINITYLED dan Dolby Atmos untuk dipilih oleh penonton. Encik Ryuichi Sakamoto, seorang komposer, penerbit muzik, penyanyi, pelakon dan pemain piano terkenal Jepun, meninggal dunia di Tokyo pada 28 Mac 2023, pada usia 71 tahun. Bagi memperingati dan memperingati kerjaya muzik legenda artis bertaraf dunia ini secara mendalam, pengarah Sora Ono (sendiri anak Sakamoto Ryuichi) merakamkan
Treler untuk filem baharu Disney 'Inside Out 2' memecahkan rekod dengan 157 juta tontonan dalam masa 24 jam, mengatasi 'Frozen 2'
Nov 11, 2023 pm 12:33 PM
Kandungan yang perlu ditulis semula di laman web ini ialah: 11 Kandungan yang perlu ditulis semula ialah: Kandungan yang perlu ditulis semula ialah: 11 Kandungan yang perlu ditulis semula ialah: Menurut berita Jepun, Disney secara rasmi mengumumkan bahawa kandungan yang perlu ditulis semula untuk "Inside Out" ialah: treler :2" menerima 1.57 bilion tontonan dalam masa 24 jam, mengatasi "Beku" Kandungan yang perlu ditulis semula ialah: 2. Kandungan yang perlu ditulis semula ialah: kandungan yang perlu ditulis semula pada 2019 ialah: rekod yang ditetapkan pada 2019 (1.164 Kandungan yang perlu ditulis semula ialah: bilion kali). Ketua pegawai kreatif Pixar Pete Docter berkata: "Kami gembira kerana ramai orang menonton "Head".
