在 Angularjs 中路由和查看

Question

我是 angularjs.Am 的新手，尝试使用将页面路由到相应的视图。但是 page.Console 上没有显示任何内容，也没有显示任何错误。下面是控制器的代码。

Plnkr link : http://plnkr.co/edit/1s0PllXVnFHcV063srAt?p=preview

var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {

  $routeProvider.when('/', {
    controller: 'customersController',
    templateUrl: 'customers.html'
  }).when('/orders/:customerId', {
    controller: 'ordersController',
    templateUrl: 'orders.html'
  }).otherwise({
    'redirectTo': '/'
  });

});

app.controller('customersController', function($scope) {

  $scope.sortBy = 'name';
  $scope.reverse = false;

  $scope.customers = [{
    id:1,
    name: 'James',
    city: 'Seattle',
    orderTotal: 9.546,
    joined: '2012-02-05',
    orders:[{
      id:1,
      product:'Shoes',
      total:9.9665
    }]
  }, {
    id:2,
    name: 'Sarah',
    city: 'Dallas',
    orderTotal: 3.653,
    joined: '2010-08-07',
    orders:[{
      id:2,
      product:'Sandal',
      total:8.3465
    }]
  }, {
    id:3,
    name: 'Tom',
    city: 'Troy',
    orderTotal: 8.346,
    joined: '2011-04-09',
    orders:[{
      id:3,
      product:'Sneakers',
      total:6.3427
    }]
  }, {
    id:4,
    name: 'Ling',
    city: 'Columbus',
    orderTotal: 5.549,
    joined: '2014-03-10',
    orders:[{
      id:4,
      product:'belt',
      total:8.9674
    }]
  }];

  $scope.doSort = function(propName) {
    $scope.sortBy = propName;
    $scope.reverse = !$scope.reverse;
  };

});

Answer 1

像这样获取模块：

var app = angular.module('myApp');

并且只创建一次 myApp 模块：

var app = angular.module('myApp', ['ngRoute']);

http://plnkr.co/edit/LjN94ejEXVI2tktC86M1?p=preview

Answer 2

试试这个：

var app = angular.module('myApp', ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {

  $routeProvider.when('/', {
    controller: 'customersController',
    templateUrl: 'customers.html'
  }).when('/orders/:customerId', {
    controller: 'ordersController',
    templateUrl: 'orders.html'
  }).otherwise({
    'redirectTo': '/'
  });

}]);

app.controller('customersController', ['$scope', function($scope) {

  $scope.sortBy = 'name';
  $scope.reverse = false;

  $scope.customers = [{
    id:1,
    name: 'James',
    city: 'Seattle',
    orderTotal: 9.546,
    joined: '2012-02-05',
    orders:[{
      id:1,
      product:'Shoes',
      total:9.9665
    }]
  }, {
    id:2,
    name: 'Sarah',
    city: 'Dallas',
    orderTotal: 3.653,
    joined: '2010-08-07',
    orders:[{
      id:2,
      product:'Sandal',
      total:8.3465
    }]
  }, {
    id:3,
    name: 'Tom',
    city: 'Troy',
    orderTotal: 8.346,
    joined: '2011-04-09',
    orders:[{
      id:3,
      product:'Sneakers',
      total:6.3427
    }]
  }, {
    id:4,
    name: 'Ling',
    city: 'Columbus',
    orderTotal: 5.549,
    joined: '2014-03-10',
    orders:[{
      id:4,
      product:'belt',
      total:8.9674
    }]
  }];

  $scope.doSort = function(propName) {
    $scope.sortBy = propName;
    $scope.reverse = !$scope.reverse;
  };

}]);

每当我使用内置 angular 服务时，我都会包含数组语法 x ['$routeProvider', '$scope', function($routeProvider, $scope) {}];

在 Angularjs 中路由和查看

Routing and View in Angularjs

routing

angularjs