脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Bootstrap+angular豆瓣电影app

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

 更新时间：2017年06月26日 08:40:04   作者：不懂代码的攻城师  
本篇文章主要介绍了基于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>

最后展示的效果为

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

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

您可能感兴趣的文章:

相关文章

  • 在 Angular6 中使用 HTTP 请求服务端数据的步骤详解

    在 Angular6 中使用 HTTP 请求服务端数据的步骤详解

    本文分步骤给大家介绍了在 Angular6 中使用 HTTP 请求服务端数据的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-08-08
  • Angular 13+开发模式慢的原因及构建性能优化解析

    Angular 13+开发模式慢的原因及构建性能优化解析

    这篇文章主要为大家介绍了Angular 13+开发模式慢的原因及构建性能优化解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 在 Angular2 中实现自定义校验指令（确认密码）的方法

    在 Angular2 中实现自定义校验指令（确认密码）的方法

    这篇文章给大家探索 Angular 2 内建的自定义验证，非常不错，具有参考借鉴价值，需要的朋友参考下
    2017-01-01
  • AngularJS入门教程之ng-checked 指令详解

    AngularJS入门教程之ng-checked 指令详解

    本文主要讲解AngularJS ng-checked 指令,在这整理ng-checked 指令的基础知识,并附代码实例,有需要的小伙伴可以参考下
    2016-08-08
  • 浅谈angularjs $http提交数据探索

    浅谈angularjs $http提交数据探索

    这篇文章主要介绍了浅谈angularjs $http提交数据探索，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-01-01
  • 深入理解Angularjs中的$resource服务

    深入理解Angularjs中的$resource服务

    大家可以知道在Angularjs中可以用$http同服务器进行通信，功能上比较简单，AngularJS还提供了另外一个可选的服务$resource,使用它可以非常方便的同支持restful的服务单进行数据交互。这篇文章主要给大家深入的介绍了Angularjs中的$resource服务。
    2016-12-12
  • 详解Angular依赖注入

    详解Angular依赖注入

    依赖注入(DI -- Dependency Injection)是一种重要的应用设计模式。Angular里面也有自己的DI框架，在设计应用时经常会用到它，它可以我们的开发效率和模块化程度。&#160;Angular系统中通过在类上添加@Injectable装饰器来告诉系统这个类(服务)是可注入的。
    2021-05-05
  • 浅谈angular2子组件的事件传递(任意组件事件传递)

    浅谈angular2子组件的事件传递(任意组件事件传递)

    今天小编就为大家分享一篇浅谈angular2子组件的事件传递(任意组件事件传递)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • angular+bootstrap的双向数据绑定实例

    angular+bootstrap的双向数据绑定实例

    本篇文章主要介绍angular+bootstrap的双向数据绑定的实例，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • Angular2学习教程之TemplateRef和ViewContainerRef详解

    Angular2学习教程之TemplateRef和ViewContainerRef详解

    这篇文章主要给大家介绍了Angular2中TemplateRef和ViewContainerRef的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-05-05

最新评论