집 > 기사 > 웹 프론트엔드 > Douban 영화 앱 예제의 Bootstrap+angular 구현 공유

Douban 영화 앱 예제의 Bootstrap+angular 구현 공유

零下一度원래의: 2017-06-27 10:51:541907검색

1. 프로젝트 프레임워크 빌드

npm 프로젝트 초기화

npm init -y //기본 구성에 따라 프로젝트 초기화

필요한 타사 라이브러리 설치

npm install bootstrap angle angle-route --save

새 색인 만들기 .html 페이지는 이 세 가지 종속 라이브러리를 참조합니다

새 폴더 두 개를 만듭니다.coming_soon in_theaters

그런 다음 이 두 폴더에 Controller.js 파일과 view.html 파일을 만듭니다

구조 최종 프로젝트 파일은 이런 식으로

2. 부트스트랩을 사용하여 홈페이지 스타일

구축

페이지 스타일

그런 다음 이 CSS 파일을 참조

하고 불필요한 일부를 삭제해야 합니다. 태그

최종 결과가 생성됩니다. 인터페이스

가 완성된 후 프로젝트의 기본 구조와 스타일이 완성됩니다.

3. 각도 라우팅 구성

in_theaters 아래의 Controller.js 파일로 이동하여

를 작성합니다. 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);

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

Quote app.js

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

마지막으로 index.html

을 검색하면 모든 것이 정상적으로 구성되었음을 알 수 있습니다

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 폴더 아래의 Controller.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：프런트엔드 UI 구성요소 재사용 도구 소개다음 기사：프런트엔드 UI 구성요소 재사용 도구 소개