1、搭建项目框架

npm初始化项目

npm init -y 　　//按默认配置初始化项目

安装需要的第三方库

npm install bootstrap angular angular-route --save

新建一个index.html页面 引用 这三个依赖库

新建两个文件夹coming_soon in_theaters
然后在这两个文件夹里分别创建一个controller.js 文件和view.html文件
最后项目文件的结构是这样

2、搭建首页样式

采用bootstrap
该页面的样式
然后还需要引用这一个css文件
然后删掉一些不需要的标签
最后形成的界面

到这边后，项目的基本结构与样式搭建完成
 

3、配置angular路由

到in_theaters下的controller.js文件中 写上
(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);
在view.html写上
<h1 class="page-header">正在热映</h1>
到coming_soon下的controller.js 写上
(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);
在view.html写上
<h1 class="page-header">即将上映</h1>
然后在js文件夹中新建一个app.js 写上
(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);
 
最后在index.html页面 body标签加上指令
<body ng-app="movie">
在内容显示模块中加上ng-view指令
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" ng-view>

</div>
引用app.js
 <script src="/js/app.js"></script>
最后浏览index.html

说明一切配置正常

4、豆瓣API

豆瓣API开发者文档

这边采用jsonp方式获取数据、
由于angular的jsonp方式豆瓣不支持、所以这边自己封装了一个jsonp组件
新建一个components文件夹、在该文件夹下创建http.js文件 写上
(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);
然后在in_theaters文件夹下的controller.js添加对movie.http模块的依赖，并通过jsonp请求数据封装到$scope.data中 
(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);
然后在对应的view.html中修改成 
<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>
对应的也在coming_soon文件夹下的controller.js中修改 
(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);
对应的view.html 修改成
<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>
最后别忘了在index.html最后引用
<script src="/components/http.js"></script>

最后展示的效果为

项目到这边已经完成的差不多了

公众号

欢迎关注我的公众号“码上开发”，每天分享最新技术资讯。关注获取最新资源

基于Bootstrap+angular的一个豆瓣电影app的更多相关文章

  1. 基于vue2.0的一个豆瓣电影App

    1.搭建项目框架 使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...

  2. 一个豆瓣电影Top250爬虫

    一个爬虫 这是我第一次接触爬虫,写的第一个爬虫实例. https://movie.douban.com/top250 模块 import requests #用于发送请求 import re #使用正 ...

  3. 微信小程序豆瓣电影项目的改造过程经验分享

    在学习微信小程序开发过程中,一部分的难点是前端逻辑的处理,也就是对前端JS的代码编辑:一部分的难点是前端界面的设计展示:本篇随笔基于一个豆瓣电影接口的小程序开源项目进行重新调整,把其中遇到的相关难点和 ...

  4. 用VUEJS做一个猫眼电影web app

    之前一直在学习原生js,可是发现原生js虽然很好,但是想实现一个稍微复杂一点的项目都很麻烦.直到遇见了vue.js,发现vue是真的很好用,而且很简洁,利用组件化开发能够快速做出项目,所以为了学习vu ...

  5. 用Vue.js开发一个电影App的前端界面

    我们要构建一个什么样的App? 我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目.这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WEB交互界 ...

  6. 用vue开发一个猫眼电影web app

    前言:之前一直在学习原生的javascript,但是无奈功力太浅,学了很长时候也只能写一些简单的小demo,知道遇见了vue,一切都变了,他的双向绑定和组件化思想让我迅速的爱上了他,可是光学不练是没有 ...

  7. 开源一个基于天天团购的团购app

    可能大家都知道天天团购开源系统,一个做团购的开源项目很赞,前些日子做了基于天天团购系统做的团购客户端和移动端服务器!源代码放出,有了解的可以看看,希望收益! 先说服务器:app的服务器,基于天天团购的 ...

  8. 第一个nodejs爬虫：爬取豆瓣电影图片

    第一个nodejs爬虫:爬取豆瓣电影图片存入本地: 首先在命令行下 npm install request cheerio express -save; 代码: var http = require( ...

  9. 一个基于Bootstrap实现的HMTL可视化编辑工具

    疫情禁足在家,用原生的JS实现了一个HTML可视化编辑工具,页面布局基于Bootstrap.大约一个月时间,打通主要技术关卡,实现了第一版:   可以拖放编辑,实现了几乎所有的bootstrap预定义 ...

随机推荐

  1. Spring Boot 学习（2）

    文 by / 林本托 Tips 做一个终身学习的人. 源代码:github下的/code01/ch2. 配置 Web 应用程序 在上一章中,我们学习了如何创建一个基本的应用程序模板,并添加了一些基本功 ...

  2. R语言快速深度学习进行回归预测（转）

    深度学习在过去几年,由于卷积神经网络的特征提取能力让这个算法又火了一下,其实在很多年以前早就有所出现,但是由于深度学习的计算复杂度问题,一直没有被广泛应用. 一般的,卷积层的计算形式为: 其中.x分别 ...

  3. 从LINQ开始之LINQ to Objects（下）

    前言 上一篇<从LINQ开始之LINQ to Objects(上)>主要介绍了LINQ的体系结构.基本语法以及LINQ to Objects中标准查询操作符的使用方法. 本篇则主要讨论LI ...

  4. 《NLTK基础教程》译者序

    购买<NLTK基础教程> 说来也凑巧,在我签下这本书的翻译合同时,这个世界好像还不知道AlphaGo的存在.而在我完成这本书的翻译之时,Master已经对人类顶级高手连胜60局了.至少从媒 ...

  5. markdown 基础语法

    markdown 基础 你好,我是markdown文档 介绍 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 说的简单一点,mar ...

  6. 对yield 的理解

    最近在学习Python的时候看到yield的相关语法,感觉很独特,相比其他如C/C++的语法比较有意思,于是在看完资料相关章节做一个总结. yield 是一个类似于 return的语法,但是对于ret ...

  7. windows 配置 Scheme + Emacs 编程环境

    软件下载列表: Emacs Racket (这里使用 Racket ,更加方便,便于后面配置 Emacs) 配置 安装好 Emacs 后,在 C:\Users\用户名\AppData\Roaming\ ...

  8. Eclipse中常用的快捷键,敏捷开发必备.

    1. ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如applic*.xm ...

  9. 一天搞定HTML----列表标签03

    1.细说列表标签 2.代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  10. mysql之 mysql 5.6不停机主从搭建（一主一从基于GTID复制）

    环境说明:版本 version 5.6.25-log 主库ip: 10.219.24.25从库ip:10.219.24.22os 版本: centos 6.7已安装热备软件:xtrabackup 防火 ...