angularjs 1.6.0（现在最新）路由不起作用

98

我期待在Stackoverflow上看到这个问题，但是没有。显然，我是唯一出现此问题的人，在我看来这很普遍。

我正在执行一个基本项目，但是即使到目前为止我所做的一切似乎都是正确的，但是路线似乎也没有用。

我的文件中有这段html index.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

这可能是什么问题？感谢帮助

— 阿瓦·梅尔文（Awa Melvine）
source

1

可能相关？github.com/angular/angular.js/commit/…–

— Claies

172

只需#!在href中使用hashbang ：

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

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

如果您实际上不希望使用哈希前缀，则可以通过向应用程序中添加配置块来恢复以前的行为：

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

有关更多信息，请参见

抱歉让我骑着马，但是...这是怎么被释放的？这是一个巨大的，令人头疼的错误。- @MiloTheGreat

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

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

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

— 乔治
source

16

抱歉让我骑着马，但是...这是怎么被释放的？这是一个巨大的，令人头疼的错误。

— MiloTheGreat

2

@MiloTheGreat随时将您的反馈留给AngularJS团队-github.com/angular/angular.js/issues/15715

— georgeawg

39

只需将包含在!中href：

<body>
    <a href="#!/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>

— 技术
source

7

哇，在弃用的路由教程上浪费了数小时。我所缺少的只是'！'。谢谢！

— 菲利普·梅斯

关于哈希和hashbang的所有Jumpo Mumpo，我从未想到过“！” 似乎是一个未经引用的非法字符。如果我接受并承认它的存在，问题将得到解决。

— 穆罕默德·乔拉德

我也是...这让我发疯了！

— VictorEspina

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"
});
});

— 利克森
source

停留在1.5上如何影响升级到Angular 2/3/4/5 / etc？ngUpgrade是否可以从1.5升级到2+？我有点觉得ngUpgrade对我们来说可能不可行。（是的，此评论大部分不会被看到，会

— 风起云涌

0

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

— Pranav VR
source

0

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

在html或View Page中

 <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('');
     });

— 曼尼坎丹
source