Angular.js视图返回的是空白页面


angular.js view is returning blank page

我是angular.js的新手。我写了控制器,服务等获取数据使用数据服务,但我的视图页面被显示为空白。我已经检查了每一件事,但仍无法解决这个问题,任何帮助都将是非常感激的。

//My app.js
'use strict';
angular.module('CricdomApp', [
  'CricdomApp.services',
  'CricdomApp.controllers',
  'ui.router'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when("/team", {templateUrl: "partials/list.html", controller: "teamController"}).
    otherwise({redirectTo: '/'});
}]);
//Controller
angular.module('CricdomApp.controllers', []).
controller('teamController', function($scope, cricAPIservice) {
    $scope.id = $routeParams.id;
    $scope.races = [];
    $scope.driver = null;
    $scope.driversList = [];
    cricAPIservice.getDrivers().success(function (response) {
        //Digging into the response to get the relevant data
        $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
    });
});
//Services
angular.module('CricdomApp.services', []).
  factory('cricAPIservice', function($http) {
    var cricAPI = {};
    cricAPI.getDrivers = function() {
      return $http({
        method: 'JSONP', 
        url: 'http://nobleislam.com/cricdom_backend/public/team/list?callback=JSON_CALLBACK'
      });
    }

    return cricAPI;
  });
//List html page.
<section id="main">
  <a href="./#/team"><- Back to drivers list</a>
  <nav id="secondary" class="main-nav">
    <!--<div class="driver-picture">
       <div class="avatar">
        <img ng-show="driver" src="img/drivers/{{driver.Driver.driverId}}.png" />
        <img ng-show="driver" src="img/flags/{{driver.Driver.nationality}}.png" /><br/>
        {{driver.Driver.givenName}} {{driver.Driver.familyName}}
       </div>
    </div>-->
    <div class="driver-status">
      Country: {{driver.Driver.country}}   <br/>
      Team: {{driver.Constructors[0].name}}<br/>
      <!-- Birth: {{driver.Driver.dateOfBirth}}<br/> -->
      <!-- <a href="{{driver.Driver.url}}" target="_blank">Biography</a> -->
    </div>
  </nav>
</section>
//Index page
<section id="main">
  <a href="./#/team"><- Back to drivers list</a>
  <nav id="secondary" class="main-nav">
    <div class="driver-status">
      Country: {{driver.Driver.country}}   <br/>
      Team: {{driver.Constructors[0].name}}<br/>
    </div>
  </nav>

</section>

您的服务代码

angular.module('CricdomApp.services', []).
  factory('cricAPIservice', function($http) {
    var cricAPI = {};
    cricAPI.getDrivers = function() {
      return $http({
        dataType: 'JSONP',
        method: 'POST', 
        url: 'http://nobleislam.com/cricdom_backend/public/team/list?callback=JSON_CALLBACK'
      });
    }

    return cricAPI;
  });

你的HTML代码中缺少App和Controller的引用

//ng-app="CricdomApp" ng-controller="teamController"
<div id="Container" ng-app="CricdomApp" ng-controller="teamController">
    <section id="main">
      <a href="./#/team"><- Back to drivers list</a>
      <nav id="secondary" class="main-nav">
        <!--<div class="driver-picture">
           <div class="avatar">
            <img ng-show="driver" src="img/drivers/{{driver.Driver.driverId}}.png" />
            <img ng-show="driver" src="img/flags/{{driver.Driver.nationality}}.png" /><br/>
            {{driver.Driver.givenName}} {{driver.Driver.familyName}}
           </div>
        </div>-->
        <div class="driver-status">
          Country: {{driver.Driver.country}}   <br/>
          Team: {{driver.Constructors[0].name}}<br/>
          <!-- Birth: {{driver.Driver.dateOfBirth}}<br/> -->
          <!-- <a href="{{driver.Driver.url}}" target="_blank">Biography</a> -->
        </div>
      </nav>
    </section>
    //Index page
    <section id="main">
      <a href="./#/team"><- Back to drivers list</a>
      <nav id="secondary" class="main-nav">
        <div class="driver-status">
          Country: {{driver.Driver.country}}   <br/>
          Team: {{driver.Constructors[0].name}}<br/>
        </div>
      </nav>

    </section>
</div>