基於Bootstrap+angular的一個豆瓣電影app

時間  2019-11-14
標籤 基於 bootstrap+angular bootstrap angular 一個 豆瓣 app 欄目 Bootstarp 简体版
原文   原文鏈接

一、搭建項目框架

npm初始化項目

npm init -y 　　//按默認配置初始化項目

安裝須要的第三方庫

npm install bootstrap angular angular-route --save

新建一個index.html頁面 引用 這三個依賴庫

新建兩個文件夾coming_soon in_theaters
而後在這兩個文件夾裏分別建立一個controller.js 文件和view.html文件
最後項目文件的結構是這樣

 

二、搭建首頁樣式

採用bootstrap
該頁面的樣式
而後還須要引用這一個css文件
而後刪掉一些不須要的標籤
最後造成的界面
到這邊後，項目的基本結構與樣式搭建完成
 

三、配置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

 

說明一切配置正常

四、豆瓣API

 豆瓣API開發者文檔 css

這邊採用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>

最後展現的效果爲html

 

 項目到這邊已經完成的差很少了web

 

公衆號

歡迎關注個人公衆號「碼上開發」，天天分享最新技術資訊。關注獲取最新資源npm

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程