Угловой шаблон без загрузки с параметрами

Question

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

Шаблон главной страницы имеет неупорядоченный список, такой как, который должен направляться на соответствующий маршрут «factorDetails». Если я создал основной шаблон, как это, используя путь без параметров

main.html

<ul> 
    <li ng-repeat="factor in factors"> 
     <span class="result-list-name"> 
      <a ng-href="/factorDetails"> 
       {{factor.FactorName}} 
      </a> 
     </span> 
    </li> 
</ul> 

и мой угловом файл, например так

main.js 
var app = angular.module('mainApp',['ngRoute']) 

.config(
    function($routeProvider, $locationProvider) { 
    $routeProvider. 
     when('/', { 
     templateUrl: 'partials/main.html', 
     controller: 'totalListCtrl' 
     }). 
     when('/factorDetails', { 
     templateUrl: 'partials/details.html', 
     controller: 'detailsCtrl' 
     }); 
    $locationProvider.html5Mode(true); 
}); 

app.controller('totalListCtrl', function($scope, $http){ 

    $http({method: 'get', url: '/api/allfactors'}) 
     .success(function(data, status, headers, config){ 
      $scope.factors = data; 
      $scope.factorCount = Object.keys(data).length; 
     }) 
     .error(function(data, status, headers, config){ 
      $scope.factors = {dummyfactor:{"factorname":"there was an error loading data"}}; 

     }); 
}); 

app.controller('detailsCtrl', function($scope, $routeParams){ 

     $scope.displayID = $routeParams; 
}); 

Я могу видеть испытание и и пустой displayID (потому что я не поставил никаких параметров в свой URL), когда мой шаблон details.html загружен, так что все здесь хорошо.

<div> 
    <h1>{{displayID}}</h1> 
    <h1>test</h1> 
</div> 

Выход в браузере:

{} 
test 

Однако, если я теперь сделать следующие изменения:

main.html

<ul> 
    <li ng-repeat="factor in factors"> 
     <span class="result-list-name"> 
     <a ng-href="/factorDetails/{{factor.FactorID}}"> 
      {{factor.FactorName}} 
     </a> 
     </span> 
    </li> 
</ul> 

main.js

var app = angular.module('mainApp',['ngRoute']) 

.config(
    function($routeProvider, $locationProvider) { 
    $routeProvider. 
     when('/', { 
     templateUrl: 'partials/main.html', 
     controller: 'totalListCtrl' 
     }). 
     when('/factorDetails/:FactorID', { 
     templateUrl: 'partials/details.html', 
     controller: 'detailsCtrl' 
     }); 
    $locationProvider.html5Mode(true); 
}); 

...etc. 

Теперь мой результат заключается в том, что шаблон details.html даже не загружен, страница остается на main.html. Но URL-адрес меняется на localhost/factorDetails/1 и factorDetails/2 в окне браузера, в зависимости от того, на какую ссылку я нажимаю.

Любая помощь будет принята с благодарностью, определенно чувствуя себя застрявшей здесь. Или чувствую, что загружаю AngularUI в надежды, которые будут работать.

Answer 1

Ну, я не понял, почему $ locationProvider не работал, но я действительно работал с AngularUI. Существует хороший учебник здесь:

http://www.ng-newsletter.com/posts/angular-ui-router.html

Для тех, кто, возможно, был этот вопрос, соответствующие изменения были следующие

main.html

<ul > 
    <li ng-repeat="factor in factors"> 
     <span class="result-list-name"> 
      <a ui-sref="factorDetails({FactorID: {{factor.FactorID}}})"> 
      {{factor.FactorName}} 
       </a> 
     </span> 
    </li> 
</ul> 

main.js

var app = angular.module('mainApp',['ui.router']) 

.config(function($stateProvider, $urlRouterProvider) { 
    //$urlRouterProvider.when('', '/'); 
    $stateProvider 
     .state('main', { 
     url: '', 
     templateUrl: 'partials/main.html', 
     controller: 'totalListCtrl' 
     }) 
     .state('factorDetails', { 
     url: 'factorDetails/:FactorID', 
     templateUrl: 'partials/details.html', 
     controller: 'detailsCtrl' 
     }) 
}); 

app.controller('totalListCtrl', function($scope, $http){ 

    $http({method: 'get', url: '/api/factorsMainPage'}) 
     .success(function(data, status, headers, config){ 
      $scope.factors = data; 
      $scope.factorCount = Object.keys(data).length; 
     }) 
     .error(function(data, status, headers, config){ 
      $scope.factors = {dummyfactor:{"factorname":"there was an error loading data"}}; 

     }); 
}); 

app.controller('detailsCtrl', function($scope, $stateParams, $http){ 

    $http({method: 'get', url: ('/api/factorDetails/' + $stateParams.FactorID) }) 
     .success(function(data, status, headers, config){ 
      $scope.factor = data.factor1; 
     }) 
     .error(function(data, status, headers, config){ 
      $scope.factor = {dummyfactor:{"factorname":"there was an error loading data"}}; 
     }); 

    $scope.displayID = $stateParams.FactorID; 

});