101

我期待在 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: '/' });
}]);

现在，当我只是访问该页面时，这是我在 url 中得到的内容：

http://localhost:8000/admin#!/

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

http://localhost:8000/admin#!/#%2Fadd-quote

这里有什么问题？感谢帮助

4

5 回答 5

173

#!只需在 href 中使用 hashbang ：

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

由于aa077e8，用于 $location hash-bang URL 的默认哈希前缀已从空字符串 ( '') 更改为 bang ( '!')。

如果您真的不希望有哈希前缀，那么您可以通过向应用程序添加配置块来恢复以前的行为：

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

有关详细信息，请参阅

对不起，我的高马，但是......这是怎么被释放的？这是一个巨大的、破坏性的错误。— @MiloTheGreat

由于参考规范已被正式弃用 #15715，因此应恢复 #14202 的重大更改

我将关闭这个问题，因为我们没有收到任何反馈。如果您可以提供新的反馈，请随时重新打开此问题。

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

于 2016-12-18T21:21:35.263 回答
39

只需将 包含在!中href：

<body>
    <a href="#!/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>
于 2017-04-23T13:01:15.177 回答
6

我无法让路由在 1.6.4 中工作，所以我决定使用 angular 1.5.11 并且路由工作正常，尽管我需要在 when(..) 函数中定义我的所有路由，并带有尾随“/”

如果坚持使用旧版本的 angular 对您来说是一种选择，那么请考虑它，因为它可以节省您的神经......

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"
});
});
于 2017-04-18T06:55:47.763 回答
0 
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.hashPrefix('');
  $routeProvider
    .when('/add-quote', {
      templateUrl: 'views/add_quote.html',
      controller: 'QuoteCtrl'
    })
    .otherwise({ redirectTo: '/' });
}]);
于 2018-03-21T07:26:57.680 回答
0

试试这个可能会有所帮助...

在 html 或视图页面中

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

在脚本页面中

var app=angular
.module('myModule',['ngRoute'])
.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/Home', {
      templateUrl: 'FolderName/Home.html',
      controller: 'homeCtr'
    })
      $locationProvider.hashPrefix('');
     });
于 2019-04-29T12:25:55.633 回答