Question

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

Plnkr链接：http://plnkr.co/edit/1s0PllXVnFHcV063srAt?p=preview

<input class="form-control" ng-model="demo.field1" name="field1" error-tooltip="errors" />

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;
  };

}]);

无论何时我使用内置的角度服务，我都会包含数组syntaxx ['$routeProvider', '$scope', function($routeProvider, $scope) {}];

Angularjs中的路由和视图

2 个答案: