Douban 영화 앱 예제의 Bootstrap+angular 구현 공유
- 零下一度원래의
- 2017-06-27 10:51:541853검색
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 태그에 명령어를 추가하세요
Quote app.js
(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">
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" ng-view> </div>
마지막으로 index.html
4.
여기서는 jsonp를 사용하여 데이터를 얻습니다.
Angular의 jsonp 메소드는 Douban에서 지원되지 않으므로 여기에 jsonp 구성 요소를 캡슐화했습니다.
새 구성 요소 폴더를 만들고 폴더에 http.js 파일을 만들고
라고 씁니다.
로 변경합니다. 해당 view.html에서
<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);
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：프런트엔드 UI 구성요소 재사용 도구 소개다음 기사：프런트엔드 UI 구성요소 재사용 도구 소개