Teilen Sie das Beispiel einer Bootstrap+Angular-Implementierung der Douban-Film-App

零下一度

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

Original

1909 Leute haben es durchsucht

1. Erstellen Sie das Projekt-Framework

npm initialisiert das Projekt

npm init -y //Initialisieren Sie das Projekt gemäß der Standardkonfiguration

Installieren Sie die erforderliche dritte -party-Bibliotheken

npm install bootstrap Angular Angular-Route --save

Erstellen Sie eine neue index.html-Seite, um auf diese drei abhängigen Bibliotheken zu verweisen

Erstellen Sie in Kürze zwei neue Ordner in_theaters

Erstellen Sie dann in diesen beiden Ordnern eine Datei „controller.js“ und eine Datei „view.html“

Die Struktur der endgültigen Projektdatei sieht folgendermaßen aus

2. Erstellen Sie den Homepage-Stil

Verwenden Sie Bootstrap

Der Stil der Seite

Dann müssen Sie auf diese CSS-Datei verweisen

Dann löschen Sie einige unnötige Tags

Die endgültige Schnittstelle wird gebildet

Nach dem Erhalten Hier die Grundstruktur des Projekts. Abgeschlossen mit der Stilkonstruktion

3. Konfigurieren Sie die Winkelführung

und schreiben Sie

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

Nach dem Login kopieren

ein die Datei „controller.js“ unter „in_theaters“

Schreiben Sie

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

Nach dem Login kopieren

in view.html und schreiben Sie

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

Nach dem Login kopieren

Schreiben Sie

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

Nach dem Login kopieren

in view.html und erstellen Sie dann eine neue app.js im js-Ordner und schreiben Sie

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

Nach dem Login kopieren

Fügen Sie abschließend den Befehl

<body ng-app="movie">

Nach dem Login kopieren

zum Inhaltsanzeigemodul im Hauptteil hinzu Tag der index.html-Seite Verwenden Sie die ng-view-Direktive

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

Nach dem Login kopieren

, um app.js

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

Nach dem Login kopieren

Last browse index.html

Es bedeutet, dass alles normal konfiguriert ist

4. Douban API

Douban API Developer Documentation

Hier verwenden wir JSONP, um Daten zu erhalten.

Da die JSONP-Methode von Angular von Douban nicht unterstützt wird, haben wir hier eine JSONP-Komponente gekapselt.

Erstellen Sie einen Komponentenordner und erstellen Sie eine http.js Datei im Ordner und schreiben Sie

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

Nach dem Login kopieren

Fügen Sie dann eine Abhängigkeit vom Modul movie.http in controller.js unter dem Ordner in_theaters hinzu und kapseln Sie die Anforderungsdaten in $scope .data über 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);

Nach dem Login kopieren

Ändern Sie es dann in der entsprechenden view.html in

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

Nach dem Login kopieren

Das entsprechende befindet sich auch im Ordner „coming_soon“. Ändern Sie die entsprechende view.html in controller.js von

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Am Ende nicht vergessen: Zitieren Sie am Ende von index.html

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

Nach dem Login kopieren

. Der endgültige angezeigte Effekt ist

Das Projekt ist hier fast abgeschlossen

Das obige ist der detaillierte Inhalt vonTeilen Sie das Beispiel einer Bootstrap+Angular-Implementierung der Douban-Film-App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!