I am trying use ngRoute to do the routing for a project I am doing in Visual Studio 2015. But as soon as I put ngRoute in angular.module, it breaks the binding with index.html page. Does anyone know how to resolve it?
My app.js:
var appMainModule = angular.module('appMain', ['ngRoute']);
appMainModule.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/Templates/home.html',
controller: 'homeViewModel'
});
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
});
appMainModule.controller("indexViewModel", function ($scope, $http, $location) {
$scope.headingCaption = 'Angular Routing Example';
});
appMainModule.controller("homeViewModel", function($scope, $http, $location){
$scope.headingCaption = 'This is a list of people:';
$scope.people = [
{firstName: 'A', lastName: 'N'}
];
$scope.showPerson = function(person){
alert('You selected ' + person.firstName + ' ' + person.lastName);
}
});
My index.html:
<!DOCTYPE html>
<html data-ng-app="appMain" data-ng-controller="indexViewModel">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<h2>{{headingCaption}}</h2>
<br />
<div ng-view></div>
<script src="scripts/angular.min.js"></script>
<script src="app/app.js"></script>
<script src="scripts/angular-route.min.js"></script>
</body>
</html>
When I only use: var appMainModule = angular.module('appMain', []); I get correct output.
index.html without ngRoute:
But when I put ngRoute and route Configuration, the page turns to this: index.html with ngRoute:
Thank you so much in advance!
