Angularjs-щ-маршрутизатор не показывает содержимое шаблона в браузере

Я новичок Угловой и пытаюсь получить рабочий пример настройку для Углового UI маршрутизатораAngularjs-щ-маршрутизатор не показывает содержимое шаблона в браузере

Я исследовал некоторые вопросы по StackOverflow, но не видят проблему конкретно. Моя проблема заключается в том, что даже если при отладке браузера и сетевого анализе я вижу свой шаблон, что т HTML называется, до сих пор не видит какой-либо контента в ошибках browser.No в консоли

AngularJS ui-router - template not displaying

Использования Угловой 1.4.7 и corrosponding

Пожалуйста найти app.js ниже

(function(){ 
    angular.module('TestPrj',['ui.router']); 

    angular.module('TestPrj').config(function($stateProvider, $urlRouterProvider){ 
     $urlRouterProvider.otherwise('/ReportB'); 
     $stateProvider 
     .state('a', { 
      url: '', 
      abstract:true, 
      controller:'mainController', 
      controllerAs:'main', 
      templateUrl: 'partials/home.html' 
     }) 
     .state('a.b', { 
      url: '/ReportB', 
      controller:'B', 
      controllerAs:'B', 
      templateUrl: "partials/B.html" 
     }); 
    }); 

    angular.module('TestPrj').run(function($rootScope,$state){ 
      $rootScope.$on("$stateChangeError", console.log.bind(console)); 
     }); 

})();

контроллер b.js:

(function(){ 

angular.module('TestPrj').controller('B',B); 

    function B($state){ 
     this.pageName = "Report a B"; 
    } 

    B.$inject = ["$state","$stateParams","$scope"]; 

})(); 

Controller main.js 
(function(){ 

angular.module('TestPrj').controller('mainController',mainController); 

function mainController($state,$translate){ 

    } 

mainController.$inject = ["$state","$translate"]; 

})();

index.html

<!DOCTYPE html> 
<html> 
<head ng-app="TestPrj" lang="en"> 
     <script type="text/javascript" src="js/lib/angular.min.js"></script> 
     <script type="text/javascript" src="js/lib/angular-ui-router.min.js"></script> 
     <script type="text/javascript" src="js/lib/angular-translate.min.js"></script> 
     <script type="text/javascript" src="js/lib/angular-translate-loader-url.js"></script> 
     <script type="text/javascript" src="js/lib/ui-bootstrap-tpls-0.12.0.min.js"></script> 
     <script type="text/javascript" src="js/lib/ui-mask.min.js"></script> 
     <script type="text/javascript" src="js/app.js"></script> 

     <script type="text/javascript" src="js/controllers/claimTypeSelection.js"></script> 
     <script type="text/javascript" src="js/controllers/main.js"></script> 
</head> 
<body> 
<div ui-view=""></div> 
</body> 
</html>

Partials/home.html

<div class="container"> 
    <div ui-view=""></div> 
</div>

обертоны/B.html

<div> 
    <div ui-view=""></div> 
    <h1>This is a Heading</h1> 
    <p>This is a paragraph.</p> 
</div>

Кроме обмена скриншот моей установки проекта Angular Setup

источник

2016-01-04 Saurabh Sharma

Непонятно, почему вы используете абстрактное состояние. Абстрактное состояние может предоставлять данные и вводить/выходить в дочерние состояния. Но он не активирован. Ему нужен шаблон.

https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views#abstract-states

В вашем примере состояние ребенок не сделал из них и абстрактное состояние, очевидно, предназначен для использования.

Казалось бы, вы не намеревались сделать его абстрактным.

Обновление: абстрактный адрес не может быть пустым.Это пример кода с набором URL:

.state('a', { 
    url: '/a', 
    abstract: true, 
    controller: 'mainController', 
    controllerAs: 'main', 
    templateUrl: 'partials/home.html' 
})

http://plnkr.co/edit/11o6qF?p=preview

Чтобы увидеть использовать функции по этой ссылке: http://run.plnkr.co/CUN147Z4YdCKRxRw/#/a/b

источник

2016-01-05 09:32:56 DavidNJ

Привет, цель абстрактного состояния в моей базе кода состояла в том, чтобы добавить A к URL-адресу дочернего состояния. Эта часть на самом деле происходит, когда у меня состояние абстрактное. Когда я нахожусь в localhost: 8080/TestPrj, он изменяется на localhost: 8080/TestPrj/#/ReportB. С абстрактным комментарием, перенаправление не работает. Также этот URL-адрес не работает localhost: 8080/TestPrj/#/ReportB, который, как мне кажется, должен работать. Я вижу в сетевых журналах после того, как клонирует кеш браузера, что ответ возвращается с вызова, просто не отображается в шаблоне –

Основываясь на копании, я думал, что проблема в том, что вы сделали первый государственный реферат. Существует проблема, размещенная на github для ui-router, которую вы можете прочитать here. Кроме того, рассмотрим два plunkr примеры

without abstract

$stateProvider 
     .state('route1', { 
      url: "/route1", 
      templateUrl: "route1.html" 
     }) 
      .state('route1.list', { 
       url: "/list", 
       templateUrl: "route1.list.html", 
       controller: function($scope){ 
       $scope.items = ["A", "List", "Of", "Items"]; 
       } 
      }) 

     .state('route2', { 
      url: "/route2", 
      templateUrl: "route2.html" 
     }) 
      .state('route2.list', { 
       url: "/list", 
       templateUrl: "route2.list.html", 
       controller: function($scope){ 
       $scope.things = ["A", "Set", "Of", "Things"]; 
       } 
      }) 
    })

with abstract

$stateProvider 
     .state('route1', { 
      url: "/route1", 
      abstract: true, 
      templateUrl: "route1.html" 
     }) 
      .state('route1.list', { 
       url: "/list", 
       templateUrl: "route1.list.html", 
       controller: function($scope){ 
       $scope.items = ["A", "List", "Of", "Items"]; 
       } 
      }) 

     .state('route2', { 
      url: "/route2", 
      templateUrl: "route2.html" 
     }) 
      .state('route2.list', { 
       url: "/list", 
       templateUrl: "route2.list.html", 
       controller: function($scope){ 
       $scope.things = ["A", "Set", "Of", "Things"]; 
       } 
      }) 
    })

Второй plunkr является копией первой, за исключением того реферата: истина была добавлена к государству, и теперь это Безразлично Не работай.

Также убедитесь, что вы часто очищаете кеш браузера или отключите кеширование при использовании ui-router. Это очень плохо для обслуживания результатов кеширования.

источник

2016-01-04 23:28:02 DanielC

Здравствуйте намерение Аннотация государства в моей базе кода было предварять к URL-адресу дочернего состояния. Эта часть на самом деле происходит, когда у меня состояние абстрактное. Когда я нажимаю http: // localhost: 8080/TestPrj, он изменяется на http: // localhost: 8080/TestPrj/#/ReportB. С абстрактным комментарием, перенаправление не работает. Также этот URL-адрес не работает http: // localhost: 8080/TestPrj/#/ReportB, который, как мне кажется, должен работать. Я вижу в сетевых журналах после того, как клонирует кеш браузера, что ответ возвращается из вызова, просто не отображается в шаблоне –

Angularjs-щ-маршрутизатор не показывает содержимое шаблона в браузере

ответ

Смежные вопросы