Угловой JS: метод контроллера маршрутного маршрута не называется?

Я только начал изучать Угловое, и когда я попытался с помощью провайдера маршрута:Угловой JS: метод контроллера маршрутного маршрута не называется?

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

App1.config(function($routeProvider){ 
    //alert("pre-config"); 
    $routeProvider. 
     when('/', { 
      template: '<h1>main page</h1>', 
      controller: 'heroCtrl' 
     }). 
     when('/:heroName', { 
      template: '<h1>Hello!</h1>', 
      controller: 'detailCtrl' 
     }).otherwise({ 
      redirectTo: '/' 
     }); 
    //alert("post-config"); 
}); 

App1.controller('heroCtrl',function($scope){ 
    $scope.heroes = [ 
    {"name":"Yan Xu", "Role":"Ranger", "Metamorphosis":"Ancient Dragon","desc":"Main Hero"}, 
    {"name":"Sandria Dettorox", "Role":"Mage", "Metamorphosis":"Diviner","desc":"Main Heroine"}, 
    {"name":"Schneider Lain", "Role":"Necromancer","Metamorphosis":"None","desc":"Main Villain"} 
    ]; 

    $scope.sortField = 'name'; 
}); 

App1.controller('detailCtrl',function($scope, $routeParams){ 
    console.log("called"); 
    console.log($routeParams); 
});

Я реализовал некоторые список сортировки с первым контроллером он правильно работал. Однако, когда я попытался получить доступ к маршруту из index.html #/heroName, он не отобразил шаблон, не предупредил и не зарегистрировал информацию в консоли. Может ли кто-нибудь сказать мне, что здесь может быть неправильно? Моя угловая версия - 1.4.7.

Edit: HTML-код:

<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js" ></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></</script> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
</head> 
<body ng-view> 
    <h1>Angular Test</h1> 

    <div id="Module1" ng-app="App1" class="col-sm-12"> 
     <form action=""> 
      <div ng-controller="heroCtrl"> 
       <table class="table"> 
        <thead> 
         <tr> 
          <th>Name</th> 
          <th>Role</th> 
          <th>Metamorphosis</th> 
          <th>Character</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr ng-repeat="hero in heroes | filter:filter | orderBy:sortField"> 
          <td>{{hero.name}}</td> 
          <td>{{hero.Role}}</td> 
          <td>{{hero.Metamorphosis}}</td> 
          <td>{{hero.desc}}</td> 
         </tr> 

        </tbody> 
       </table> 
       <input name="filter" ng-model="filter"></input><br/> 
       <a class="btn" ng-click="sortField='name'">Sort By Name</a> 
       <a class="btn" ng-click="sortField='Metamorphosis'">Sort By Morph</a> 
       <p>Current sort field: {{sortField}}</p> 
      </div> 
     </form> 

    </div> 


    <div id="Module2"> 


    </div> 
    <script src="Angular/frontPage.js"></script> 
</body> 
</html>

источник

2015-10-24 Rui Chen

Можете ли вы точный * ", когда я попытался получить доступ к маршруту из index.htm # /имя героя"*? Вы пробовали из адресной строки браузера, добавив точную строку '#/heroName' в адрес? –

Показать код HTML. – Griffith

@ MichaelP.Bazos Да, это то, что я сделал. Я набрал в адресной строке браузера и напечатал: index.html #/heroName –

Может быть неправильно, потому что страница не в описании, но я предполагаю, что на домашней странице, вы упускаете ng-view директиву.

Таким образом, шаблон не может быть введен. Вы должны иметь что-то вроде этого:

<body ng-view></body>

или, если у вас есть какие-то элементы, которые уже под body тег:

<body> 
    <div ng-view></div> 
    ... 
</body>

источник

2015-10-24 00:35:24

Спасибо, оказалось, что отсутствует ng-view. :) –

Видел редактирование, вы должны удалить все под 'ng-view'. В любом случае он будет заменен маршрутизатором. –

Спасибо, просто изменил его. –

Угловой JS: метод контроллера маршрутного маршрута не называется?

ответ

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