1、搭建項目框架
npm初始化項目
npm init -y //按默認配置初始化項目
安裝需要的第三方庫
npm install bootstrap angular angular-route --save
新建一個index.html頁面 引用 這三個依賴庫
新建兩個文件夾coming_soon in_theaters
然后在這兩個文件夾里分別創建一個controller.js 文件和view.html文件
最后項目文件的結構是這樣
2、搭建首頁樣式
采用bootstrap
該頁面的樣式
然后還需要引用這一個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開發者文檔
這邊采用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"></script>
最后展示的效果為
項目到這邊已經完成的差不多了
公眾號
歡迎關注我的公眾號“碼上開發”，每天分享最新技術資訊。關注獲取最新資源
