AngularJS 1.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: '/' });
}]);

现在，当我访问页面时，这就是我在URL中得到的：

http：//localhost：8000/admin＃！/

当我单击Add quote按钮时，我得到了：

http：//localhost：8000/admin＃！/＃％2fadd-Quote

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

在HREF中只需使用Hashbang #!：

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

由于AA077E8，用于$ location $ location Hash-bang url的默认hash-prefix已从空字符串（''）更改为bang（'!'）。

如果您实际上不想没有hash-prefix，则可以通过在应用程序中添加配置块来还原以前的行为：

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

有关更多信息，请参见

angularjs github拉＃14202将默认的哈希普式更改为'！'
Angularjs指南 - 迁移-AA0077E8

很抱歉拿起我的高马，但是...这是如何被释放的？这是巨大的，破坏的错误。 - @milotegreat

＃14202的打破变化应被恢复，因为参考规范已经正式弃用＃15715
我将解决此问题，因为我们没有任何反馈。如果您可以提供新的反馈，请随时重新打开此问题。
- https://github.com/angular/angular.js/issues/15715#issuecomment-281785369

只需将!包括在href中：

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

我无法在1.6.4中工作，因此我决定使用Angular 1.5.11，而路由正常工作，尽管我需要在（..）中定义所有路由带有尾随的功能"/"

如果粘在较旧版本的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"
});
});

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

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

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

相关内容

最新更新

热门标签：