Angular Template not loading with parameters

Question

I cannot get my template to load from angular when I include a parameter.

The main page template has an unordered list like so which should direct to the appropriate "factorDetails" route. If I set up the main template like so using a path with no parameters

main.html

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

and my angular file like so

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;
});

I can see the test and and an empty displayID (because I haven't put any params in my URL) when my details.html template is loaded, so all is well here.

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

Output in browser is:

{}
test

However if I now make the following changes:

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.

Now my result is that the details.html template is not even loaded, the page stays on the main.html. But the URL changes to localhost/factorDetails/1 and factorDetails/2 in the browser address window depending on which link I'm clicking on.

Any help would be greatly appreciated, definitely feeling stuck here. Or feeling like loading up AngularUI in the hopes that will work.

Answer 1

Well I didn't figure out why $locationProvider wasn't working, but I did get this working with AngularUI. There is a good tutorial here:

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

For those who might have had this issue, the relevant changes were the following

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;

});