建站
咨詢
售后
建站咨詢
新聞中心
1、搭建項(xiàng)目框架
我們注重客戶提出的每個(gè)要求，我們充分考慮每一個(gè)細(xì)節(jié)，我們積極的做好網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)服務(wù)，我們努力開(kāi)拓更好的視野，通過(guò)不懈的努力，創(chuàng)新互聯(lián)贏得了業(yè)內(nèi)的良好聲譽(yù)，這一切，也不斷的激勵(lì)著我們更好的服務(wù)客戶。 主要業(yè)務(wù)：網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計(jì),成都小程序開(kāi)發(fā),網(wǎng)站開(kāi)發(fā),技術(shù)開(kāi)發(fā)實(shí)力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫(kù)的技術(shù)開(kāi)發(fā)工程師。
npm初始化項(xiàng)目
npm init -y //按默認(rèn)配置初始化項(xiàng)目
安裝需要的第三方庫(kù)
npm install bootstrap angular angular-route --save
新建一個(gè)index.html頁(yè)面 引用 這三個(gè)依賴庫(kù)
新建兩個(gè)文件夾coming_soon in_theaters
然后在這兩個(gè)文件夾里分別創(chuàng)建一個(gè)controller.js 文件和view.html文件
最后項(xiàng)目文件的結(jié)構(gòu)是這樣
2、搭建首頁(yè)樣式
采用bootstrap
http://v3.bootcss.com/examples/dashboard/
該頁(yè)面的樣式
然后還需要引用這一個(gè)css文件
http://v3.bootcss.com/examples/dashboard/dashboard.css
然后刪掉一些不需要的標(biāo)簽
最后形成的界面
到這邊后，項(xiàng)目的基本結(jié)構(gòu)與樣式搭建完成
3、配置angular路由
到in_theaters下的controller.js文件中 寫(xiě)上
(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寫(xiě)上
正在熱映
到coming_soon下的controller.js 寫(xiě)上
(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寫(xiě)上
即將上映
然后在js文件夾中新建一個(gè)app.js 寫(xiě)上
(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)簽加上指令
在內(nèi)容顯示模塊中加上ng-view指令
引用app.js
最后瀏覽index.html
說(shuō)明一切配置正常
4、豆瓣API
豆瓣API開(kāi)發(fā)者文檔
https://developers.douban.com/wiki/?title=movie_v2
這邊采用jsonp方式獲取數(shù)據(jù)、
由于angular的jsonp方式豆瓣不支持、所以這邊自己封裝了一個(gè)jsonp組件
新建一個(gè)components文件夾、在該文件夾下創(chuàng)建http.js文件 寫(xiě)上
(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模塊的依賴，并通過(guò)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中修改成
{{data.title}}
對(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 修改成
{{data.title}}
最后別忘了在index.html最后引用
最后展示的效果為
項(xiàng)目到這邊已經(jīng)完成的差不多了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)頁(yè)名稱：詳解基于Bootstrap+angular的一個(gè)豆瓣電影app
文章URL：http://www.dlmjj.cn/article/godgds.html
