详解基于Bootstrap+angular的一个豆瓣电影app(2)

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

对应的view.html 修改成

<h1>{{data.title}}</h1> <div> <a href="https://www.jb51.net/{{item.alt}}" ng-repeat="item in data.subjects"> <span>{{item.rating.average}}</span> <div> <div> <img ng-src="{{item.images.small}}" alt=""> </div> <div> <h3>{{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最后引用

<script src="https://www.jb51.net/components/http.js"></script>

最后展示的效果为

项目到这边已经完成的差不多了