详解基于Bootstrap+angular的一个豆瓣电影app

1、搭建项目框架

npm初始化项目

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

安装需要的第三方库

npm install bootstrap angular angular-route --save

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

新建两个文件夹coming_soon in_theaters

然后在这两个文件夹里分别创建一个controller.js 文件和view.html文件

最后项目文件的结构是这样

2、搭建首页样式

采用bootstrap

http://v3.bootcss.com/examples/dashboard/

该页面的样式

然后还需要引用这一个css文件

http://v3.bootcss.com/examples/dashboard/dashboard.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开发者文档

https://developers.douban.com/wiki/?title=movie_v2

这边采用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}}" rel="external nofollow" rel="external nofollow" 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}}" rel="external nofollow" rel="external nofollow" 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>

最后展示的效果为

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • angularJS与bootstrap结合实现动态加载弹出提示内容

    angularjs是由Google团队开发的一款非常优秀web前端框架.在当前如此多的web框架下,angularjs能脱颖而出,从架构设计上就高人一等,双向数据绑定,依赖注入,指令,MVC,模板.Angular.js创新地把后台技术融入前端开发,扫去jQuery一度的光芒.用angularjs就像写后台代码,更规范,更结构化,更可控. 1.bootstrp的弹出提示 bootstrap已经帮我们封装了非常好用的弹出提示Popover. http://v3.bootcss.com/javascr

  • 自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴

  • Bootstrap和Angularjs配合自制弹框的实例代码

    指令 directive('bsPopup', function ($parse) { return { require: 'ngModel', restrict: 'A', link: function (scope, elem, attrs, ctrl) { scope.$watch(function () { return $parse(ctrl.$modelValue)(scope); }, function (newValue) { if (newValue ==0) { $(elem

  • BootStrap+Angularjs+NgDialog实现模式对话框

    BootStrap+Angularjs+NgDialog实现模式对话框

    本篇文章主要介绍了"angularjs+bootstrap+ngDialog实现模式对话框",对于Javascript教程感兴趣的同学可以参考一下: 在完成一个后台管理系统时,需要用表显示注册用户的信息.但是用户地址太长了,不好显示.所以想做一个模式对话框,点击详细地址按钮时,弹出对话框,显示地址. 效果如下图: 通过查阅资料,选择使用ngDialog来实现,ngDialog是一个用于Angular.js应用的模式对话框和弹出窗口.ngDialog非常小(?2K),拥有简约的API,通

  • AngularJs中Bootstrap3 datetimepicker使用实例

    AngularJs中Bootstrap3 datetimepicker使用实例

    关于datetimepicker的使用,参考:http://www.jb51.net/article/99896.htm 在AngularJs中使用实例: HTML代码: <div class="container" ng-app="myApp" ng-controller="myCtrl"> <div class="row"> <div class='col-sm-6'> <div

  • AngularJS Bootstrap详细介绍及实例代码

    AngularJS Bootstrap详细介绍及实例代码

    AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. 查看 Bootstrap教程. Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.

  • 利用Angularjs和bootstrap实现购物车功能

    利用Angularjs和bootstrap实现购物车功能

    先来看看效果图: 购物车 一.代码 如果看了这个效果有兴趣想知道怎么做出来的话,那就继续往下看吧.话不多少,直接上代码. html代码: <!DOCTYPE html> <html lang="en" ng-app="cart"> <head> <meta charset="UTF-8"> <title>购物车</title> <link rel="style

  • Angular.js与Bootstrap相结合实现表格分页代码

    Angular.js与Bootstrap相结合实现表格分页代码

    先给大家简单介绍angular.js和bootstrap基本概念. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 最近一直学习Angular.js,在学习过程

  • Angular2中Bootstrap界面库ng-bootstrap详解

    Angular2中Bootstrap界面库ng-bootstrap详解

    准备 Angular 2 环境 ng-bootstrap 是基于 Angular 2 的, 因此需要先准备 Angular 2 的环境. 使用 ng-bootstrap 下载 ng-bootstrap ng-bootstrap 使用 bootstrap 4.0 alpha2 , 因此需要先下载 bootstrap , 推荐使用 npm 包的形式: npm install bootstrap@4.0.0-alpha.2 --save 接着下载 ng-bootstrap , 同样使用 npm 包的形

  • AngularJS 与Bootstrap实现表格分页实例代码

    AngularJS 与Bootstrap实现表格分页实例代码

    AngularJS 从开始发布到现在使用的开发的者越来越多,也表明大多数做前端的朋友在往这边转,毕竟是Google 公司出品的产品啊,所以最近自己也在学习这部分知识. AngularJS  Bootstrap实现表格分页: 最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功能. 首先表格的数据源来自于,Server.js 点击下载.通过get取数后

随机推荐