分享Bootstrap+angular實作豆瓣電影app實例

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 id="正在热映">正在热映</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 id="即将上映">即将上映</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標籤加上指令

#在內容顯示模組中加上ng-view指令

#

<div>
 </div>

引用app.js

 <script></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 id="data-title">{{data.title}}</h1><div><a><span>{{item.rating.average}}</span><div>
<div><img  class="media-object lazy" src="/static/imghwm/default1.png" data-src="{{item.images.small}}" alt="分享Bootstrap+angular實作豆瓣電影app實例" ></div>
<div>
<h3 id="item-title">{{item.title}}</h3>
<p>类型：<span>{{item.genres.join('、')}}</span></p>
<p>导演：<span>{{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 id="data-title">{{data.title}}</h1><div><a><span>{{item.rating.average}}</span><div>
<div><img  class="media-object lazy" src="/static/imghwm/default1.png" data-src="{{item.images.small}}" alt="分享Bootstrap+angular實作豆瓣電影app實例" ></div>
<div>
<h3 id="item-title">{{item.title}}</h3>
<p>类型：<span>{{item.genres.join('、')}}</span></p>
<p>导演：<span>{{d.name +($last?'':'、')}}</span></p>              </div>
</div></a></div>

最後別忘了在index.html最後引用

<script></script>

最後展示的效果為

 

# 專案到這邊已經完成的差不多了

 

##

以上是分享Bootstrap+angular實作豆瓣電影app實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！