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

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

dans le fichier controller.js sous in_theaters

Écrivez

<h1 id="正在热映">正在热映</h1>

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

Écrivez

<h1 id="即将上映">即将上映</h1>

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

Enfin, ajoutez la commande

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

<div>
 </div>

pour référencer app.js

 <script></script>

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

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

Puis modifiez-le dans le view.html correspondant en

<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="Partager Bootstrap + implémentation angulaire de l'exemple d'application de film Douban" ></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>

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

en

<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="Partager Bootstrap + implémentation angulaire de l'exemple d'application de film Douban" ></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>

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

<script></script>

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!