ホームページ  >  記事  >  ウェブフロントエンド  >  Douban ムービー アプリの例の Bootstrap + Angular 実装を共有する

Douban ムービー アプリの例の Bootstrap + Angular 実装を共有する

零下一度
零下一度オリジナル
2017-06-27 10:51:541891ブラウズ

1. プロジェクトフレームワークを構築します

npm プロジェクトを初期化します

npm init -y //デフォルト設定に従ってプロジェクトを初期化します

必要なサードパーティライブラリをインストールします

npm install bootstrap angular angular-route --save

新しいインデックスを作成します。.html ページは、これら 3 つの依存ライブラリを参照します

近々劇場に 2 つの新しいフォルダーを作成します
次に、これらの 2 つのフォルダーに、controller.js ファイルと view.html ファイルを作成します
の構造最終的なプロジェクト ファイルは次のようになります

2. ブートストラップを使用してホームページ スタイル

を構築します
ページのスタイル
次に、この CSS ファイルを参照する必要があります
そして、不要な部分を削除する必要がありますタグ
最終的な結果は次のとおりです。 インターフェイス
が完成すると、プロジェクトの基本的な構造とスタイルが完成します

3. 角度ルーティング

を設定し、view.html に
(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);
を書き込みますin_theatersの下のcontroller.jsファイル coming_soonの下のcontroller.jsに移動し、view.htmlに
<h1 class="page-header">正在热映</h1>
と書き、
(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);
と書きます。 次に、jsフォルダーに新しいapp.jsを作成し、
と書きます
<h1 class="page-header">即将上映</h1>
最後に、index.html ページの body タグに命令を追加します
(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);
コンテンツ表示モジュールに ng-view 命令を追加します
<body ng-app="movie">
app.js を引用
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" ng-view>
 </div>
最後に、index.html を参照します
4. Douban API

Douban API 開発者ドキュメント

ここにありますjsonpを使用してデータを取得します

AngularのjsonpメソッドはDoubanではサポートされていないため、ここでjsonpコンポーネントをカプセル化しました

新しいコンポーネントフォルダーを作成し、フォルダー内にhttp.jsファイルを作成し、
 <script src="/js/app.js?1.1.11"></script>
と書き込みます
次に、フォルダー内の in_theaters Controller.js が movie.http モジュールへの依存関係を追加し、jsonp
(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);
を介してリクエストデータを $scope.data にカプセル化し、それを
(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);
に変更します。対応する view.html 同様に、
<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>
の対応する view.html も、coming_soon フォルダーの下のコントローラー.js で
(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);
に変更されます。最後に、
<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>
を引用符で囲むことを忘れないでください。最終表示用のindex.htmlの最後にその効果は

この時点でプロジェクトはほぼ完成です

以上がDouban ムービー アプリの例の Bootstrap + Angular 実装を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。