基于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预定义 ...
随机推荐
- 利刃 MVVMLight 10：Messenger 深入
1.Messager交互结构和消息类型 衔接上篇,Messeger是信使的意思,顾名思义,他的目是用于View和ViewModel 以及 ViewModel和ViewModel 之间的消息通知和接收. ...
- Sqoop简介及安装
Hadoop业务的大致开发流程以及Sqoop在业务中的地位: Sqoop概念 Sqoop可以理解为[SQL–to–Hadoop],正如名字所示,Sqoop是一个用来将关系型数据库和Hadoop中的数据 ...
- Principal Components Regression, Pt.1: The Standard Method
In this note, we discuss principal components regression and some of the issues with it: The need fo ...
- RColorBrewer的使用
RColorBrewer是一个R包,使用http://colorbrewer2.org/这个网站提供的颜色.我们画一个包括八个box的boxplot时,或者在x-y散点图上画六条线时,该怎样选择颜色呢 ...
- nginx反向代理cas server之1：多个cas server负载均衡配置以及ssl配置
系统环境采用centOS7 由于cas server不支持session持久化方式的共享,所以请用其他方式代替,例如:组播复制. 为什么不支持session持久化:http://blog.csdn.n ...
- 禅道---Bug管理模块
禅道官网:http://www.cnezsoft.com/ 简介: 开源免费的项目管理软件.集产品管理.项目管理.测试管理一体以及事物管理组织管理的功能 使用原因: 开源 方便跟踪管理Bug 使用简单 ...
- 安装并配置Apache
从今天开始,我将开始Web开发的学习.本系列博客将陆续记录我学习过程中的收获和困惑,从前端到后端,一探Web开发的流程和内容.我目前掌握的有C/C++,有一些使用C进行嵌入式开发的经验,C++就马马虎 ...
- JVM高级特性-三、垃圾收集之判断对象存活算法
一.概述 运行时数据区中,程序计数器.虚拟机栈.本地方法栈都是随线程而生随线程而灭的 因此,他们的内存分配和回收是确定的,在方法或线程结束时就回收.而Java堆和方 法区则是不确定的,程序运行过程中创 ...
- 在PHP中连接数据库的八大步骤
连接数据库的八大步骤 Step1:链接数 ...
- redis 对象
redis通过前面几篇的数据结构构键了一个对象系统,这个对象系统包含了字符串对象,列表对象,哈希对象,集合对象,有序集合对象 每一个对象都是一个redisobject typedef struct r ...