一个关于AngularJs路由的问题,希望能解惑

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问