溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

詳解基于Bootstrap+angular的一個(gè)豆瓣電影app

發(fā)布時(shí)間：2020-08-31 14:36:56 來(lái)源：腳本之家 閱讀：137 作者：不懂代碼的攻城師 欄目：web開發(fā)

1、搭建項(xiàng)目框架

npm初始化項(xiàng)目

npm init -y 　　//按默認(rèn)配置初始化項(xiàng)目

安裝需要的第三方庫(kù)

npm install bootstrap angular angular-route --save

新建一個(gè)index.html頁(yè)面 引用 這三個(gè)依賴庫(kù)

詳解基于Bootstrap+angular的一個(gè)豆瓣電影app

新建兩個(gè)文件夾coming_soon in_theaters

然后在這兩個(gè)文件夾里分別創(chuàng)建一個(gè)controller.js 文件和view.html文件

最后項(xiàng)目文件的結(jié)構(gòu)是這樣

 詳解基于Bootstrap+angular的一個(gè)豆瓣電影app

2、搭建首頁(yè)樣式

采用bootstrap

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

該頁(yè)面的樣式

然后還需要引用這一個(gè)css文件

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

然后刪掉一些不需要的標(biāo)簽

最后形成的界面

詳解基于Bootstrap+angular的一個(gè)豆瓣電影app 

到這邊后，項(xiàng)目的基本結(jié)構(gòu)與樣式搭建完成

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寫上

<h2 class="page-header">正在熱映</h2>

到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寫上

<h2 class="page-header">即將上映</h2>

然后在js文件夾中新建一個(gè)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頁(yè)面 body標(biāo)簽加上指令

<body ng-app="movie">

在內(nèi)容顯示模塊中加上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

詳解基于Bootstrap+angular的一個(gè)豆瓣電影app 

說明一切配置正常

4、豆瓣API

 豆瓣API開發(fā)者文檔

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

這邊采用jsonp方式獲取數(shù)據(jù)、

由于angular的jsonp方式豆瓣不支持、所以這邊自己封裝了一個(gè)jsonp組件

新建一個(gè)components文件夾、在該文件夾下創(chuàng)建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添加對(duì)movie.http模塊的依賴，并通過jsonp請(qǐng)求數(shù)據(jù)封裝到$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);

然后在對(duì)應(yīng)的view.html中修改成

<h2 class="page-header">{{data.title}}</h2>
<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}}" >
      </div>
      <div class="media-body">
        <h4 class="media-heading">{{item.title}}</h4>
        <p>類型：<span>{{item.genres.join('、')}}</span></p>
        <p>導(dǎo)演：<span ng-repeat="d in item.casts">{{d.name +($last?'':'、')}}</span></p>       
      </div>
    </div>
  </a>
</div>

對(duì)應(yīng)的也在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);

對(duì)應(yīng)的view.html 修改成

<h2 class="page-header">{{data.title}}</h2>
<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}}" >
      </div>
      <div class="media-body">
        <h4 class="media-heading">{{item.title}}</h4>
        <p>類型：<span>{{item.genres.join('、')}}</span></p>
        <p>導(dǎo)演：<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的一個(gè)豆瓣電影app

詳解基于Bootstrap+angular的一個(gè)豆瓣電影app

 項(xiàng)目到這邊已經(jīng)完成的差不多了

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手