分享Bootstrap+angular實作豆瓣電影app實例
- 零下一度原創
- 2017-06-27 10:51:541891瀏覽
1、建立專案框架
npm初始化專案
npm init -y //依預設設定初始化專案
安裝所需的第三方函式庫
#npm install bootstrap angular angular-route --save
#新建一個index.html頁面引用這三個依賴函式庫
##新兩個資料夾coming_soon in_theaters然後在這兩個資料夾裡分別建立一個controller.js 檔案和view.html檔案最後一個專案檔案的結構是這樣 
到這邊後，專案的基本結構與樣式搭建完成
(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
最後瀏覽index.html
<script src="/js/app.js?1.1.11"></script>
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?1.1.11"></script>最後展示的效果為
以上是分享Bootstrap+angular實作豆瓣電影app實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：前端UI元件復用工具介紹下一篇：前端UI元件復用工具介紹