Блог

Я новичок в 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 шаблонов просмотра.
Если я сначала определю информационный шаблон, этот шаблон будет отображаться всегда, а другой не будет отображаться.
Может кто-нибудь помочь мне решить эту проблему?

Вот полностью функционирующий 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']);
  

Как правило, начальная загрузка вашего приложения является одной из самых важных задач и в результате должна быть на вершине.