分享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>
最后展示的效果为
项目到这边已经完成的差不多了
以上是分享Bootstrap+angular实现豆瓣电影app实例的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
赛车电影《GT 赛车：极速狂飙》今日内地影院上映，烂番茄新鲜度 63%
Sep 10, 2023 pm 08:33 PM
本站9月1日消息，热血赛车动作电影《GT赛车：极速狂飙》今日正式上映，影片由PlayStation游戏玩家成为职业赛车手的真实传奇经历改编，《第九区》导演尼尔・布洛姆坎普执导。本站注意到，《GT赛车：极速狂飙》烂番茄新鲜度63%，爆米花值98%；影视评分网站CinemaScore观众评分A，目前全球票房已突破5600万美元。影片讲述平凡游戏少年拼尽全力追逐遥不可及的赛车梦，在不被外界看好的情况下，凭借天赋、努力与热爱在生死一线的真实赛场上不断挑战极限，超越对手，最终成功从一个籍籍无名的游戏玩家变
《数码宝贝大冒险 02 THE BEGINNING》先行图公开，10 月 27 日在日本上映
Sep 04, 2023 pm 03:57 PM
本站9月1日消息，剧场版《数码宝贝大冒险02THEBEGINNING》全新先行图公开，将于10月27日在日本上映。本站注意到，该剧场版此前公布了预告片，除了大辅、V仔兽等主角团外，本作的主角小和田瑠衣首次登场。预告片中投影了《数码宝贝》系列开始的舞台“光丘”，从《数码宝贝大冒险》的主角八神太一和妹妹光的出现开始，“不可替代的”羁绊“被展现出来”。同时，还有天使兽、甲龙兽、天鹰兽等怀旧数码宝贝相继登场，还有帝王龙兽（龙模式）、妖精兽、噬光兽等剧情简介：这个世界充满了可能性。眼前呈现的几个世界时而给
《熊出没・逆转时空》概念预告公布，2024 大年初一上映
Oct 27, 2023 pm 09:13 PM
本站10月27日消息，熊出没官方公布了《熊出没・逆转时空》概念预告，将于2024大年初一（2月10日）上映。本站注意到，《熊出没・逆转时空》是《熊出没》系列电影的第10部影片，由华强方特（深圳）动漫有限公司出品。从预告片可以看出，光头强从伐木工变成了在办公室的“打工人”，随着光头强戴着“神秘仪器”坐在座椅上，《熊出没之夺宝熊兵》、《熊出没之雪岭熊风》、《熊出没・奇幻空间》、《熊出没・原始时代》、《熊出没・狂野大陆》、《熊出没・重返地球》、《熊出没・伴我“熊芯”》等电影片段一闪而过。剧情简介：光头
豆瓣app如何设置英文模式 豆瓣app设置英文模式的方法
Mar 12, 2024 pm 02:46 PM
豆瓣app如何设置英文模式？豆瓣app是一款可以让大家在这上面查看各种资源评论的软件，这个软件上面有很多的功能，用户在首次使用这个软件的时候，是需要进行登录的，而且这个软件上面的语言默认就是中文模式，有些用户就喜欢用英文模式，但是又不知道要怎么在这个软件上面设置英文模式，下面小编就整理了设置英文模式的方法供大家参考。豆瓣app设置英文模式的方法 1、打开手机上的“豆瓣”app； 2、点击“我的”； 3、选择右上角的“设置”
手机电影《化境》即将上映：全片使用华为Pura70系列拍摄
Jul 16, 2024 pm 09:04 PM
7月15日消息，华为终端BG首席执行官何刚今日宣布，华为与赵小丁导演合作，共创的手机电影作品《化境》即将上映。他补充道：“自2019年我们携手金鸡电影节，启动‘华为影像·金鸡手机电影计划’以来，累计收到报名作品10000余部，多彩纷呈的作品让我看到了用手机拍摄电影所能达到的可能性与叙事深度。”从海报中可以看到，该电影宣传称“由华为Pura70系列拍摄”，海报为黑白风格。据了解，赵小丁是张艺谋的御用摄影师，曾在多部张艺谋执
《想不到鸭》80当后妈帮女主过上幸福生活通关攻略
Mar 12, 2024 pm 03:52 PM
想不到鸭是抖音很火的休闲闯关解谜游戏，关卡类型很多，其中80当后妈帮女主过上幸福生活是想不到鸭游戏关卡之一，具体怎么过关呢？今天本站网小编给大家带来了《想不到鸭》80当后妈帮女主过上幸福生活通关攻略分享，没有通关的朋友可以来看看具体过关方法，一起来看看吧！《想不到鸭》80当后妈帮女主过上幸福生活通关攻略80当后妈目标：帮女主过上幸福生活1、80当后妈帮女主过上幸福生活这一关先拖动行李箱到姐姐，然后拖动钱到下图所示的位置：2、右边，拖动针线、扫帚、锅铲到姐姐3、然后拖动钱到下图所示位置：4、然后拖
《星际迷航》新电影官宣明年上映，今年秋季开拍
Apr 12, 2024 pm 09:07 PM
本站4月12日消息，派拉蒙影业日前宣布，新一部《星际迷航》电影将于今年秋季开拍，预计明年上映。据悉，该片是一个起源故事，时间设定在2009年上映《星际迷航》的几十年前。该片由托比・海恩斯执导，赛斯・格雷厄姆-史密斯担任编剧，J・J・艾布拉姆斯的坏机器人制片公司制作。▲2009年上映《星际迷航》据本站了解，2009年上映《星际迷航》电影是由美国派拉蒙影业公司出品的科幻冒险片，由J・J・艾布拉姆斯执导，克里斯・派恩、扎克瑞・昆图、艾瑞克・巴纳、佐伊・索尔达娜等联合主演。该片根据1966年同名剧集改编
迪士尼新片《头脑特工队 2》预告片24小时内破纪录达1.57亿次播放量，超越《冰雪奇缘 2》
Nov 11, 2023 pm 12:33 PM
本站需要重写的内容是：11需要重写的内容是：月需要重写的内容是：11需要重写的内容是：日消息，迪士尼官方宣布，《头脑特工队需要重写的内容是：2》的预告片在需要重写的内容是：24需要重写的内容是：小时内获得了需要重写的内容是：1.57需要重写的内容是：亿次观看，超越了《冰雪奇缘需要重写的内容是：2》在需要重写的内容是：2019需要重写的内容是：年创下的记录（1.164需要重写的内容是：亿次）。皮克斯首席创意官皮特・道格特（Pete需要重写的内容是：Docter）表示：“我们很高兴有这么多人收看《头
