AngularJS 1.6 routing not working

javascript angularjs routing angularjs-1.6

Petrus · Dec 16, 2016 · Viewed 12.1k times · Source

I am trying to create my first angular app. But its not working at all. I have no idea what's the problem. I checked the console, but there's no erros.

<head>
 <meta charset="utf-8">
 <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.js"></script>
</head>
<body ng-app="myApp">
  <h1>Test angular</h1>
  <a href="#/">Main</a>
  <a href="#sec">Second</a>
  <a href="#th">Third</a>
  <div ng-view></div>
</body>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
      templateUrl : "main.html"
  })
  .when("/sec", {
      templateUrl : "sec.html"
  })
  .when("/th", {
      templateUrl : "th.html"
  });
});
</script>

Can anyone help me?

Answer

Routes in Angular 1.6 changed from #/myUrl to #!/myUrl

You should change your ref to:

<a href="#!/">Main</a>
<a href="#!/sec">Second</a>
<a href="#!/th">Third</a>

See this answer if you want to remove this prefix.

AngularJS 1.6 routing not working

Answer

Related questions