使用ngRoute的角度路由不起作用

时间:2014-06-30 15:34:45

标签: angularjs angularjs-routing

我是Angular的新手,我正在尝试创建一个包含2个视图的单页应用程序。

当我加载应用程序时,总是向我显示2个视图中的第一个,无论我在浏览器中输入什么路径。 这是javascript代码:

  var appControllers = angular.module('appControllers', []);
  appControllers.controller('HomeController', function($scope, $http) {
    var promise = $http({
      method: 'GET',
      url: 'restaurant.json'
    });
    promise.then(function(obj) {

      $scope.data = obj.data;
    });
  });
  appControllers.controller('InformationController', function($scope, $http) {
    var promise = $http({
      method: 'GET',
      url: 'restaurant.json'
    });
    promise.then(function(obj) {

      $scope.data = obj.data;
    });
  });

  var app = angular.module('myApp', ['ngRoute', 'appControllers']);
  app.config(['$routeProvider',
    function($routeProvider) {
      $routeProvider.
        when('/', {
          templateUrl: 'partials/productlist.html',
          controller: 'HomeController'
        }).
        when('/info', {
          templateUrl: 'partials/information.html',
          controller: 'InformationController'  
        })
    }]);
  app.controller('HomeController', function($scope, $http) {
    var promise = $http({
      method: 'GET',
      url: 'restaurant.json'
    });
    promise.then(function(obj) {

      $scope.data = obj.data;
    });
  });
  app.controller('InformationController', function($scope, $http) {
    var promise = $http({
      method: 'GET',
      url: 'restaurant.json'
    });
    promise.then(function(obj) {

      $scope.data = obj.data;
    });
  });

我尝试更改为2个视图模板定义2条路线的顺序。 如果我首先定义信息模板,那么该模板将始终显示,而另一个模板将不会显示。 有人可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

这是一个功能齐全的ngRoute:

sampleApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/a', {
        templateUrl: 'templates/a.html',
        controller: 'a'
    }).
    when('/av2', {
        templateUrl: 'templates/av2.html',
        controller: 'av2',
    }).
      when('/a3', {
        templateUrl: 'templates/a3.html',
        controller: 'a3'
      }).

      otherwise({
        redirectTo: '/a'
      });
}]);

尝试将其与您的代码进行交叉比较,看看您是否发现任何差异。我认为这可能与您在脚本中很晚启动应用程序的方式有关:

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

通常,引导您的应用程序是最重要的事情之一,因此应该位于顶部。