Angular routing with ng-view is not working

Question

I don't understand why I can't get this to work.

I'll share the relevant code, let me know if you need to see more stuff.

Index.html

<div class="col-md-3"><a href="#/liberals">Liberals</a></div>

app.js

var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
    $routeProvider.
    when("/liberals", {
        templateUrl: "partials/liberals.html"
        , controller: "LiberalsController"
    });
});

app.controller('LiberalsController', function ($scope, $http) {
    var url = "workingURL"; /// changed function to a simple string message to test
    $scope.message = "Hello Liberals";
});

(partial view) liberals.html

    <h1>Hello</h1> 
     {{message}}

PS: I'm not working on a political hate website for or against liberals!

the console is empty, and I get no error messages when I click the link — JoSem
– JoSem, Commented Mar 15, 2017 at 17:05
I've loaded the angular.js and angular.route.js, if that's what you're asking(?) — JoSem
– JoSem, Commented Mar 15, 2017 at 17:17

Frederik Prijck · Accepted Answer · 2017-03-15 17:30:54Z

2

As of AngularJS 1.6, the default value of the hashPrefix has been changed to !.

There's two ways to get your routing to work with AngularJS 1.6+:

Add the hashprefix (!) to your href's:

<a href="#!/liberals">Liberals</a>

Change (remove) the hashPrefix value using $locationProvider:

$locationProvider.hashPrefix('');

I've created a working plunkr in which I used the second approach: https://plnkr.co/edit/oTB6OMNNe8kF5Drl75Wn?p=preview

The commit regarding this breaking change can be found here

answered Mar 15, 2017 at 17:30

Frederik Prijck

1,52910 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JoSem Over a year ago

There it is! Thank you so very much!

CodeWithCoffee Over a year ago

I am facing same issue but not working !! Is there any version issue I need to correct ?

Frederik Prijck Over a year ago

That's hard to tell. Create a plunkr and ping me at gitter.im/angular/angular.js so I can take a look at it.

Collectives™ on Stack Overflow

Angular routing with ng-view is not working

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related