Partager Bootstrap + implémentation angulaire de l'exemple d'application de film Douban

零下一度

Libérer： 2017-06-27 10:51:54

original

1898 Les gens l'ont consulté

1. Construire le framework du projet

npm initialiser le projet

npm init -y //Initialiser le projet selon la configuration par défaut

Installer le troisième requis -party library

npm install bootstrap angulaire angulaire-route --save

Créer une nouvelle page index.html pour référencer ces trois bibliothèques dépendantes

Créez deux nouveaux dossiers à venir dans_theaters

Créez ensuite un fichier contrôleur.js et un fichier view.html dans ces deux dossiers

La structure du fichier de projet final est comme ceci

2. Construire le style de la page d'accueil

Utiliser bootstrap

Le style de la page

Ensuite, vous devez référencer ce fichier CSS

Puis supprimez quelques balises inutiles

L'interface finale formée

Après avoir obtenu ici, la structure de base du projet Complété avec la construction de style

3. Configurez le routage angulaire

et écrivez

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

Copier après la connexion

dans le fichier controller.js sous in_theaters

Écrivez

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

Copier après la connexion

dans view.html et écrivez

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

Copier après la connexion

Écrivez

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

Copier après la connexion

dans view.html puis créez un nouveau app.js dans le dossier js et écrivez

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

Copier après la connexion

Enfin, ajoutez la commande

<body ng-app="movie">

Copier après la connexion

au module d'affichage de contenu dans le corps balise de la page index.html Utilisez la directive ng-view

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

Copier après la connexion

pour référencer app.js

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

Copier après la connexion

Dernier parcours index.html

Cela signifie que tout est configuré normalement

4. API Douban

Documentation du développeur de l'API Douban

Ici, nous utilisons jsonp pour obtenir des données,

La méthode jsonp d'Angular n'étant pas prise en charge par Douban, nous avons encapsulé un composant jsonp ici

Créez un dossier de composants, créez un http.js fichier dans le dossier et écrivez

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

Copier après la connexion

Puis ajoutez une dépendance sur le module movie.http dans controller.js sous le dossier in_theaters et encapsulez les données de la demande dans $scope .data via 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);

Copier après la connexion

Puis modifiez-le dans le view.html correspondant en

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

Copier après la connexion

Celui correspondant se trouve également dans le dossier coming_soon. Modifiez le view.html correspondant dans controller.js de

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

Copier après la connexion

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

Copier après la connexion

N'oubliez pas à la fin À la fin de index.html, citez

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

Copier après la connexion

L'effet final affiché est

Le projet est presque terminé ici

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!