suchen

Heim >Web-Frontend >js-Tutorial >Teilen Sie das Beispiel einer Bootstrap+Angular-Implementierung der Douban-Film-App

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

零下一度
零下一度Original
2017-06-27 10:51:541912Durchsuche

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 class="page-header">正在热映</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 class="page-header">即将上映</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 
<body ng-app="movie">
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>
, um app.js
 <script src="/js/app.js?1.1.11"></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 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>
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 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>
Am Ende nicht vergessen: Zitieren Sie am Ende von index.html 
<script src="/components/http.js?1.1.11"></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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einführung in Tools zur Wiederverwendung von Front-End-UI-KomponentenNächster Artikel：Einführung in Tools zur Wiederverwendung von Front-End-UI-Komponenten

In Verbindung stehende Artikel

Mehr sehen