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.
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">