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

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

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

Schreiben Sie

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

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

Schreiben Sie

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

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

Fügen Sie abschließend den Befehl

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

<div>
 </div>

, um app.js

 <script></script>

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

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

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

<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="Teilen Sie das Beispiel einer Bootstrap+Angular-Implementierung der Douban-Film-App" ></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>

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

in

<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="Teilen Sie das Beispiel einer Bootstrap+Angular-Implementierung der Douban-Film-App" ></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>

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

<script></script>

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