关于Angular路由的问题

最近新学习AngularJs，对于路由配置刚刚起步，遇到一个很迷的问题。

主页面代码如下

<!DOCTYPE html>
<html ng-app="index">
	<head>
		<meta charset="utf-8" />
		<title>imooc-angular</title>
		<script src="js/angular-1.6.4/angular.js"></script>
		<script src="js/angular-1.6.4/angular-route.js"></script>
		<script src="js/angular-1.6.4/angular-animate.js"></script>
		<script src="js/index.js"></script>
		<script src="js/controllers.js"></script>
		<script src="js/directives.js"></script>
		<script src="js/filters.js"></script>
		<script src="js/routes.js"></script>
		<script src="js/services.js"></script>
	</head>
	<body>
		<a href="#/hello">hello</a>
		<a href="#/list">list</a>
		<div ng-view></div>
	</body>
</html>

零件页面代码如下

hello.html

<div><span ng-bind="hello"></span>,angular</div>

list.html

<ul>
	<li ng-repeat="book in books">
		书名:{{book.title}}&nbsp;&nbsp;&nbsp;作者:{{book.author}}
	</li>
</ul>

各js代码如下，其中filter，routes,services,directives 为只声明了模块的空js

index.js

var index = angular.module("index",[
	'ngRoute','ngAnimate','indexControllers','indexServices','indexDirectives',
	'indexRoutes','indexFilters'
]);

index.config(function($routeProvider){
	$routeProvider.when('/hello',{
		templateUrl:'templates/hello.html',
		controller:'HelloCtrl'
	}).when('/list',{
		templateUrl:'templates/list.html',
		controller:'ListCtrl'
	}).otherwise({
		redirectTo:'/hello'
	})
});

controllers.js

var controllers = angular.module("indexControllers",[]);

controllers.controller("HelloCtrl",['$scope',function($scope){
	$scope.hello = "hello";
}]);

controllers.controller("ListCtrl",['$scope',function($scope){
	$scope.books=[
		{title:"book1",author:"author1"},
		{title:"book2",author:"author2"},
		{title:"book3",author:"author3"}
	]
}]);

问题一，直接访问index页面，游览器link为：http://127.0.0.1:8020/imooc-angularJs/index.html#!/hello

为什么地址是#!/hello

问题二，通过A标签互相跳转时不生效，点击跳转后新link为：

http://127.0.0.1:8020/imooc-angularJs/index.html#!/hello#%2Flist

或者

http://127.0.0.1:8020/imooc-angularJs/index.html#!/hello#%2Fhello

为什么地址中会有乱码

问题三，在修改A标签，将href="#/hello",hrel="#/list"修改成href="#!/hello",href="#!/list"后，成功跳转

为什么一定要加上这个“!”符号才能成功跳转，是什么样的原理，希望有高手能详细解答

ZaizhanShi

浏览 1920回答 1

1回答

随时随地看视频慕课网APP

关于Angular路由 的问题

1回答

关于Angular路由的问题