AngularJS：路由
Posted
技术标签:
【中文标题】AngularJS：路由【英文标题】：AngularJS : Routing 【发布时间】：2017-08-29 12:22:01 【问题描述】：所以我在看一个角度教程，那个人正在解释“ngRoute”以及如何使用它，使用这个例子：
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider)
$routeProvider
.when('/',
templateUrl: 'pages/home.html',
controller: 'mainController'
)
.when('/second',
templateUrl: 'pages/second.html',
controller: 'secondController'
)
);
myApp.controller('mainController', ['$scope', '$route', function ($scope, $route)
])
.controller('secondController', ['$scope', '$route', function ($scope, $route)
]);<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Angular</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#/second">Second</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div ng-view class="jumbotron"></div>
</div> <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>它对他有用，但对我来说，只有主页链接有效，而第二个链接无效，直到我将 <a href="#/second">Second</a> 更改为 <a href="#!/second">Second</a>
并且成功了，但我不明白为什么？
【问题讨论】：
这是因为您使用的版本。您观看的视频可能是 angular 1.4 或 1.5。不要用ngRoute，试试比ngRoute灵活的ui-router 是的，我的一个朋友也这么说！谢谢 【参考方案1】：您可能使用的是 1.6 版，对吧？ .在这个 1.6 Angular 团队中，决定将默认的 $location 哈希前缀更改为“！” .您可以阅读
https://docs.angularjs.org/guide/migration#migrating-from-1-5-to-1-6
【讨论】：
所以它与版本有关：/谢谢，谢谢你的帮助 @damer 很高兴得到帮助。如果对你有帮助，别忘了采纳哦^^【参考方案2】：你能确保你的路由文件中没有下面的代码在配置中...
$locationProvider.hashPrefix('!');
【讨论】：
是的，我认为这就是原因，它与我正在使用的 Angular 版本有关，谢谢您的帮助【参考方案3】：var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider)
$routeProvider
.when('/',
templateUrl: 'pages/home.html',
controller: 'mainController'
)
.when('/second',
templateUrl: 'pages/second.html',
controller: 'secondController'
)
);
myApp.controller('mainController', ['$scope', '$route', function ($scope, $route)
])
.controller('secondController', ['$scope', '$route', function ($scope, $route)
]);<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Angular</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
<li><a href="#/second">Second</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div ng-view class="jumbotron"></div>
</div> <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>【讨论】：
虽然此代码可能会为问题提供解决方案，但最好添加有关其工作原理/方式的上下文。这可以帮助未来的用户学习并将这些知识应用到他们自己的代码中。在解释代码时，您也可能会以赞成票的形式从用户那里获得积极的反馈。以上是关于AngularJS：路由的主要内容，如果未能解决你的问题，请参考以下文章