Angularjs1.6.0(最新版本)路线不工作

我期待在 Stackoverflow 上看到这个问题，但是没有。显然我是唯一一个有这种问题的人在我看来这很常见。

我有一个基本的项目，我正在工作，但路线似乎不工作，即使我所做的一切似乎到目前为止是正确的。

在我的 index.html文件中有这段 html:

<html>
<head ng-app="myApp">
<title>New project</title>
<script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script>


<script src="app.js"></script>
</head>
<body>
<a href="#/add-quote">Add Quote</a>
<div ng-view ></div>
</body>
</html>

这是我的 app.js:

var app = angular.module('myApp', ['ngRoute']);




app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/add-quote', {
templateUrl: 'views/add_quote.html',
controller: 'QuoteCtrl'
})
.otherwise({ redirectTo: '/' });
}]);

现在，当我访问这个页面时，这是我在网址中看到的:

Http://localhost:8000/admin#!/

当我点击 Add quote按钮时，我得到了这个:

Http://localhost:8000/admin#!/#%2fadd-quote

有什么问题吗？ 谢谢你的帮助

42927 次浏览
小开
最佳答案

Simply use hashbang #! in the href:

 <a href="#!/add-quote">Add Quote</a>

Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!').

If you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to your application:

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

For more information, see

Sorry to get on my high horse but... How did this get released? This is massive, breaking bug. — @MiloTheGreat

The breaking change as by #14202 should be reverted as the reference specification was already officially deprecated #15715

I'm going to close this issue because we haven't got any feedback. Feel free to reopen this issue if you can provide new feedback.

— https://github.com/angular/angular.js/issues/15715#issuecomment-281785369

小开

I couldn't get routing to work in 1.6.4 so I decided to use angular 1.5.11 and routing works fine although I needed to define all my routings in when(..) functions with trailing "/"

If sticking to an older version of angular is an option for you then consider it since it may save your nerves...

var app = angular.module("myApp", ["ngRoute"]);


app.config(function($routeProvider) {
$routeProvider
.when("/layoutandviewbox", {
templateUrl : "views/layout-and-viewbox.html"
})
.when("/basicshapes", {
templateUrl : "views/basic-shapes.html"
})
.when("/advancedshapes", {
templateUrl : "views/advanced-shapes.html"
})
.when("/groups", {
templateUrl : "views/groups.html"
})
.when("/transformations", {
templateUrl : "views/transformations.html"
})
.when("/effects", {
templateUrl : "views/effects.html"
})
.when("/", {
templateUrl : "views/basic-shapes.html"
});
});
小开

Simply include the ! into the href:

<body>
<a href="#!/add-quote">Add Quote</a>
<div ng-view ></div>
</body>
小开 
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when('/add-quote', {
templateUrl: 'views/add_quote.html',
controller: 'QuoteCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
小开

Try this one might Help...

In html or view Page

 <body>
<a href="#/Home.html">Home</a>
<div ng-view></div>
</body>

In Script Page 

var app=angular
.module('myModule',['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Home', {
templateUrl: 'FolderName/Home.html',
controller: 'homeCtr'
})
$locationProvider.hashPrefix('');
});

提交答案