Share Bootstrap+angular implementation of Douban movie app example

零下一度

Release： 2017-06-27 10:51:54

Original

1899 people have browsed it

1. Build the project framework

npm initialize the project

npm init -y //Initialize the project according to the default configuration

Install the required third-party libraries

npm install bootstrap angular angular-route --save

Create a new index.html page to reference these three dependent libraries

Create two folders coming_soon in_theaters

Then create a controller.js file and a view.html file in these two folders

The structure of the final project file is like this

2. Build the homepage style

Use bootstrap

The style of the page

Then you also need to reference this css file

Then delete some unnecessary tags

The final interface formed

After arriving here, the basic structure of the project Completed with style building

3. Configure angular routing

and write

(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);

Copy after login

## in the controller.js file under in_theaters #Write

<h1 class="page-header">正在热映</h1>

Copy after login

in view.html to controller.js under coming_soon and write

(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);

Copy after login

in view .html write

<h1 class="page-header">即将上映</h1>

Copy after login

and then create a new app.js in the js folder and write

(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);

Copy after login

Finally add the instruction to the body tag of the index.html page

<body ng-app="movie">

Copy after login

Add the ng-view instruction to the content display module

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" ng-view>
 </div>

Copy after login

Quote app.js

 <script src="/js/app.js?1.1.11"></script>

Copy after login

Last browse index.html

Indicates that everything is configured normally

4. Douban API

Douban API Developer Documentation

The jsonp method is used to obtain data.

Since angular’s jsonp method is not supported by Douban, this is I encapsulated a jsonp component myself

Create a new components folder, create the http.js file under the folder and write

(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);

Copy after login

and then in_theaters Controller.js in the folder adds dependency on the movie.http module, and encapsulates the request data into $scope.data through jsonp

(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);

Copy after login

Then in the corresponding The view.html is modified to

<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>

Copy after login

, and the corresponding view is also modified to the controller.js in the coming_soon folder.

(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);

Copy after login

.html modified to

<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>

Copy after login

Finally don’t forget to quote

<script src="/components/http.js?1.1.11"></script>

Copy after login

at the end of index.html for the final displayed effect For

The project is almost completed at this point

The above is the detailed content of Share Bootstrap+angular implementation of Douban movie app example. For more information, please follow other related articles on the PHP Chinese website!