最近新学习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}} 作者:{{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"后，成功跳转
为什么一定要加上这个“!”符号才能成功跳转，是什么样的原理，希望有高手能详细解答
