詳解基于Bootstrap+angular的一個(gè)豆瓣電影app
更新時(shí)間：2017年06月26日 08:40:04 作者：不懂代碼的攻城師
本篇文章主要介紹了基于Bootstrap+angular的一個(gè)豆瓣電影app ，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
1、搭建項(xiàng)目框架
npm初始化項(xiàng)目
npm init -y //按默認(rèn)配置初始化項(xiàng)目
安裝需要的第三方庫
npm install bootstrap angular angular-route --save
新建一個(gè)index.html頁面 引用 這三個(gè)依賴庫
新建兩個(gè)文件夾coming_soon in_theaters
然后在這兩個(gè)文件夾里分別創(chuàng)建一個(gè)controller.js 文件和view.html文件
最后項(xiàng)目文件的結(jié)構(gòu)是這樣
2、搭建首頁樣式
采用bootstrap
http://v3.bootcss.com/examples/dashboard/
該頁面的樣式
然后還需要引用這一個(gè)css文件
http://v3.bootcss.com/examples/dashboard/dashboard.css
然后刪掉一些不需要的標(biāo)簽
最后形成的界面
到這邊后，項(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寫上
<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文件夾中新建一個(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頁面 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
說明一切配置正常
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添加對movie.http模塊的依賴，并通過jsonp請求數(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);
然后在對應(yīng)的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>導(dǎo)演：<span ng-repeat="d in item.casts">{{d.name +($last?'':'、')}}</span></p>
</div>
</div>
</a>
</div>
對應(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);
對應(yīng)的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>導(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>
最后展示的效果為
項(xiàng)目到這邊已經(jīng)完成的差不多了
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)表格分頁代碼
- angularJS與bootstrap結(jié)合實(shí)現(xiàn)動態(tài)加載彈出提示內(nèi)容
- BootStrap+Angularjs+NgDialog實(shí)現(xiàn)模式對話框
- Angular2中Bootstrap界面庫ng-bootstrap詳解
- 自定義Angular指令與jQuery實(shí)現(xiàn)的Bootstrap風(fēng)格數(shù)據(jù)雙向綁定的單選與多選下拉框
- 利用Angularjs和bootstrap實(shí)現(xiàn)購物車功能
- Bootstrap和Angularjs配合自制彈框的實(shí)例代碼
- AngularJs中Bootstrap3 datetimepicker使用實(shí)例
- AngularJS 與Bootstrap實(shí)現(xiàn)表格分頁實(shí)例代碼
- AngularJS Bootstrap詳細(xì)介紹及實(shí)例代碼
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Angularjs使用過濾器完成排序功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
Angular.js中$resource高大上的數(shù)據(jù)交互詳解
這篇文章主要給大家介紹了關(guān)于Angular.js中$resource高大上的數(shù)據(jù)交互的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用angular.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起看看吧。2017-07-07
這篇文章主要給大家介紹了關(guān)于Angular框架詳解之視圖抽象定義的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
AngularJS API之copy深拷貝詳解及實(shí)例
這篇文章主要介紹了AngularJS API之copy深拷貝詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-09-09
Angular事件之不同組件間傳遞數(shù)據(jù)的方法
這篇文章主要介紹了Angular事件之不同組件間傳遞數(shù)據(jù)的方法，利用Angular Event在不同組件之間傳遞數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
快速解決angularJS中用post方法時(shí)后臺拿不到值的問題
今天小編就為大家分享一篇快速解決angularJS中用post方法時(shí)后臺拿不到值的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了簡述Angular 5 快速入門，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
Angular之toDoList的實(shí)現(xiàn)代碼示例
本篇文章主要介紹了Angular之toDoList的實(shí)現(xiàn)代碼示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
詳解AngularJS中$http緩存以及處理多個(gè)$http請求的方法
$http 是 AngularJS 中的一個(gè)核心服務(wù)，用于讀取遠(yuǎn)程服務(wù)器的數(shù)據(jù)，通過本文給大家介紹AngularJS中$http緩存以及處理多個(gè)$http請求的方法，希望的朋友一起學(xué)習(xí)吧2016-02-02
這篇文章主要為大家介紹了Angular本地存儲安全分析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03