基于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预定义 ...
随机推荐
- 阿里云服务器：IIS网站的架设（一、环境设置与安装IIS网站 二、网站的基本设置 三、建立新网站（未完待续））
Windows Server 2012 R2的Internet Information Services (IIS)网站的模块化设计,可以减少被攻击面并减轻管理负担,让系统管理员更容易架设安全的具备高 ...
- 浅谈JAVA验证码~
这两天在帮同学做个项目,项目中需要做个验证码,说实话那么多年竟然没注意过这东西,原理很简单,贴出来给大家做个参考. 1.简单介绍 一般稍微有些经验的程序员都不会再自己写原生验证码生成了,因为各种强大的 ...
- Win10无法连接远程桌面提示“你的凭据不工作”的三个解决方法
Win10无法连接远程桌面提示"你的凭据不工作"的三个解决方法(转藏) 解决方法一:修改组策略 1.在"开始"窗口运行gpedit.msc,进入计算机配置-&g ...
- nodeJS之进程process对象
前面的话 process对象是一个全局对象,在任何地方都能访问到它,通过这个对象提供的属性和方法,使我们可以对当前运行的程序的进程进行访问和控制.本文将详细介绍process对象 概述 process ...
- unittest模块的常用方法：
unittest模块的常用方法: assertEqual(a, b) a == b assertNotEqual(a, b) a != b assertTrue(x) bool ...
- iOS11和机器学习CoreML库
随着iOS11的发布,苹果公司也正式加入了机器学习的战场.在新的iOS11中内置了CoreML,虽然还是Beta版本,但是功能已经非常强大了. 在这个CoreML库里面,已经集成了一些训练好的模型,可 ...
- 关于combotree的用法总结
后台: 实体树 public class TreeNode{ private String id; private String text; private String level; private ...
- 利用document的readyState去实现页面加载中的效果
打开新的网页时,为了增强友好性体验,告知用户网页正在加载数据需要呈现一个"页面加载中"之类的提示,只需要利用document就可以实现. 实现示例代码如下: <style&g ...
- redis学习（2）--- Redis概述
一.Redis介绍 高性能键值对数据库,支持的键值对数据类型: 字符串类型 列表类型 有序集合类型 散列类型 集合类型 官方测试读写速度: 测试50个并发程序,执行10万次请求 读的速度:每秒11万次 ...
- 在Caffe添加Python layer详细步骤
本文主要讨论的是在caffe中添加python layer的一般流程,自己设计的test_python_layer.py层只是起到演示作用,没有实际的功能. 1) Python layer 在caff ...