Search code examples
javascriptangularjsurl-routing

Angular route not working


I'm attempting to setup some basic routes in my Angular app but cannot seem to get ngView to work correctly. Below is my relevant index.html code, module, and config:

index.html:

<body ng-app="myApp">
  <h3>Testing is live</h3>
  <div ng-view></div>
</body>

app.module.js:

angular.module('myApp', ['ngRoute', 'ngResource']);

app.config.js:

angular.module('myApp')
  .config(function($routeProvider, $locationProvider) {
    $routeProvider.when('/player/:playerId',
      {
        template: '<h1>testing...</h1>',
        controller: 'PlayerInfoController',
        controllerAs: 'playerInfo'  
      }
    );

    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false,
      rewriteLinks: false
    });
  });

When I visit /player/56 for example, I see 'Testing is live', but not 'testing...' as I would expect. Instead there's simply <!-- ngView: --> in that section.


Solution

  • I made two changes to the above code to get it working, but I do not fully understand why this was necessary; it seems like a "hacky" fix to me.

    In my config file:

    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false,
      rewriteLinks: false
    });
    

    was replaced with:

    $locationProvider.html5Mode(true);
    

    and I added the following to the head of my index.html file:

    <base href="/player">