Angular routing with ng-view is not working

2019-07-11 03:37发布

问题:

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!

回答1:

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