AngularJS 1.6 routing not working

Question

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?

Do all resources resolve properly? Do you see your template when you request you http://applicationurl/main.html? — Jeroen, Dec 16 '16 at 13:27

score 30 · Accepted Answer · edited May 23 '17 at 10:31

30

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.

edited May 23 '17 at 10:31

Community

1
1

answered Jan 25 '17 at 13:02

Mistalis

17,793
13
73
97

@John Sparwasser: Thanks. Worked for me too for 1.6.4/angular.min.js... – Thulasiram Jun 12 '17 at 11:23
1

Perfect answer !! @Mistalis great solution. – Harshal Yelpale Jan 10 '18 at 10:27

score 5 · Answer 2 · answered Feb 13 '17 at 14:01

5

Try adding $locationProvider to your script

app.config(['$locationProvider', function($locationProvider) {
        $locationProvider.hashPrefix('');
        }]);

answered Feb 13 '17 at 14:01

Ravi Teja Vattem

341
1
7

score 1 · Answer 3 · answered Dec 16 '16 at 13:28

1

I've found out that you didn't include the $routeProvider properly, Here's the working routing code:

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
  .when("/", {
      templateUrl : "main.html"
  })
  .when("/sec", {
      templateUrl : "sec.html"
  })
  .when("/th", {
      templateUrl : "th.html"
  });
}]);

answered Dec 16 '16 at 13:28

Emad Salah

815
1
8
19

is the website hosted on a local server? If not, then that's the reason why it's not working – Emad Salah Dec 16 '16 at 13:34
Yes, it is hosted on local server. – Petrus Dec 16 '16 at 13:45
Try posting a jsFiddle with your website so that I can check why this problem is occurring – Emad Salah Dec 16 '16 at 15:32

score 1 · Answer 4 · answered Apr 22 '17 at 10:52

Try this code it is working

app.config(['$routeProvider','$locationProvider',function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
    .when('/', {
        templateUrl: 'index.html'
    })
    .when('/about', {
        templateUrl: 'about.html'
    })
    .when('/service', {
        templateUrl: 'service.html'
    });}]);

score -3 · Answer 5 · answered Dec 16 '16 at 13:40

-3

You need to fix your href attributes:

The correct way is:

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

answered Dec 16 '16 at 13:40

salix

846
6
13

AngularJS 1.6 routing not working

5 Answers5