基于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"></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"></script>
最后展示的效果为
项目到这边已经完成的差不多了
公众号
欢迎关注我的公众号“码上开发”，每天分享最新技术资讯。关注获取最新资源
基于Bootstrap+angular的一个豆瓣电影app的更多相关文章
- 基于vue2.0的一个豆瓣电影App
1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...
- 一个豆瓣电影Top250爬虫
一个爬虫 这是我第一次接触爬虫,写的第一个爬虫实例. https://movie.douban.com/top250 模块 import requests #用于发送请求 import re #使用正 ...
- 微信小程序豆瓣电影项目的改造过程经验分享
在学习微信小程序开发过程中,一部分的难点是前端逻辑的处理,也就是对前端JS的代码编辑:一部分的难点是前端界面的设计展示:本篇随笔基于一个豆瓣电影接口的小程序开源项目进行重新调整,把其中遇到的相关难点和 ...
- 用VUEJS做一个猫眼电影web app
之前一直在学习原生js,可是发现原生js虽然很好,但是想实现一个稍微复杂一点的项目都很麻烦.直到遇见了vue.js,发现vue是真的很好用,而且很简洁,利用组件化开发能够快速做出项目,所以为了学习vu ...
- 用Vue.js开发一个电影App的前端界面
我们要构建一个什么样的App? 我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目.这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WEB交互界 ...
- 用vue开发一个猫眼电影web app
前言:之前一直在学习原生的javascript,但是无奈功力太浅,学了很长时候也只能写一些简单的小demo,知道遇见了vue,一切都变了,他的双向绑定和组件化思想让我迅速的爱上了他,可是光学不练是没有 ...
- 开源一个基于天天团购的团购app
可能大家都知道天天团购开源系统,一个做团购的开源项目很赞,前些日子做了基于天天团购系统做的团购客户端和移动端服务器!源代码放出,有了解的可以看看,希望收益! 先说服务器:app的服务器,基于天天团购的 ...
- 第一个nodejs爬虫：爬取豆瓣电影图片
第一个nodejs爬虫:爬取豆瓣电影图片存入本地: 首先在命令行下 npm install request cheerio express -save; 代码: var http = require( ...
- 一个基于Bootstrap实现的HMTL可视化编辑工具
疫情禁足在家,用原生的JS实现了一个HTML可视化编辑工具,页面布局基于Bootstrap.大约一个月时间,打通主要技术关卡,实现了第一版: 可以拖放编辑,实现了几乎所有的bootstrap预定义 ...
随机推荐
- 开篇有益-解析微软微服务架构eShopOnContainers（一）
为了推广.Net Core,微软为我们提供了一个开源Demo-eShopOnContainers,这是一个使用Net Core框架开发的,跨平台(几乎涵盖了所有平台,windows.mac.linux ...
- Fast data loading from files to R
Recently we were building a Shiny App in which we had to load data from a very large dataframe. It w ...
- 未能加载文件或程序集Newtonsoft.Json, Version=4.5.0.0
1.打开 程序管理器控制台 输入 PM> install-package newtonsoft.json 2.查看bin文件中是否有 newtonsoft.json.dll文件 3.在Web. ...
- React，关于redux的一点小见解
最近项目做多页面应用使用到了,react + webpack + redux + antd去构建多页面的应用,本地开发用express去模拟服务端程序(个人觉得可以换成dva).所以在这里吐槽一下我自 ...
- linux命令11
tar命令的使用 tar文件是把几个文件的(或)目录集合在一个文件夹里,是创建备份和归档的最佳工具. [root@localhost ~]# tar --help用法: tar [选项...] [FI ...
- css隐藏文字的小技巧
前段时间,在做项目的时候,遇到一个问题.背景图片上有一个“立即注册”的按钮,需要点击.但是问题是:现在的图片是背景图片,如果图片是在html页面内的话,我们可以使用锚点来对图片添加链接.这个时候,我们 ...
- APUE-文件和目录（一）
4.1 函数stat 函数stat返回与此命名文件有关的信息结构.下面的代码实现了一个工具,显示树形目录结构,需要加两个参数,一个为目录名,一个为显示目录的深度. #include <sys/s ...
- 原生js实现图片网格式渐显、渐隐效果
写正文前先吐槽一下:端午放假完第一天去某千人以上公司面试前端工程师,第一轮是我应聘职位的部门小领导,谈的不错,面试主要围绕要用到的技术来:第二轮来了我要说的正主,我了个去,问的问题一个和前端无关,问我 ...
- 第一天上午——HTML网页基础知识以及相关内容
今天上午学习了HTML基础知识以及相关内容,还有DW的基本使用方法. HTML(HyperText Markup Language):超文本标记语言,超文本:网页中除了包含文本文字之外,还包含了图片, ...
- 【2017-06-05】Jquery.ajax
AJAX 是一种网页数据异步加载技术 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 一.Json ...