0

I have just begun trying to integrate ngRoute into an application I am building, but am having trouble getting ngRoute to work.

I have created a simple app to describe my attempt.

index.html:

<!DOCTYPE html>
<html ng-app="tester">

  <head>
    <meta charset="utf-8" />
    <title>ngRoute Test</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular-route.js"></script>
    <script src="app.js"></script>
  </head>

  <p>Here is a link to switch views:</p>
  <a href="/tests">Test</a>
  <div ng-view></div>

</html>

app.js

var app = angular.module('tester', ['ngRoute']).config(function($routeProvider) {
  $routeProvider
      .when('/tests', {
          templateUrl: 'tests.html',
          controller: 'TestCtrl'
      });
});


app.controller('TestCtrl', ['$scope', function($scope){
    $scope.title = "This is a Test Page";
}]);

tests.html

<p>{{ title }}</p>

Here is a plunkr that shows my attempt: http://plnkr.co/edit/ntgV5xFTl46tBugEnCVe?p=preview. Any help on this issue would be much appreciated!

mmedal
  • 75
  • 11
  • Check the link http://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewriting – Shohel Sep 09 '14 at 03:34

1 Answers1

2

Since you don't have the Html5 Mode enabled you need to make the link to the view like this:

  <a href="#/tests">Test</a>

Check this plunker: http://plnkr.co/edit/Pn4rzbFSxcjyfeojJyF1?p=preview

Josep
  • 12,926
  • 2
  • 42
  • 45