zaizhan_shi 2017-05-22 13:27 采纳率: 0%
浏览 631

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

  • 写回答

1条回答 默认 最新

  • 你知我知皆知 2024-08-05 22:00
    关注

    以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

    这个问题涉及到几个方面，包括路由配置、链接处理以及HTML解析。以下是一个详细的回答：

    问题一：URL结构

    首先，我们需要澄清的是，#!/hello 和 #/hello 是两个不同的URL片段。在 AngularJS 中，! 表示当前路径的开始，而在其他地方（例如 HTML）则表示一个跳转到另一个页面或组件的位置。

    所以当你看到 /#!/hello 这个 URL 时，实际上是在指向一个名为 hello 的页面，而不是一个具体的路径。如果你想要导航到 hello 页面，你需要提供完整的 URL，即 /hello。

    问题二：乱码和特殊字符

    当使用 #!/hello 来跳转到特定页面时，浏览器会自动将所有非ASCII字符编码转换为UTF-8格式，并显示为正常的文本。这通常不会导致问题，除非你尝试在一个不支持 UTF-8 编码的地方操作这些字符串。

    问题三：跳转原因

    为了理解为何需要加一个特殊字符，让我们先了解一下 HTML 的 <a> 标签如何工作。在 HTML 中，<a> 标签用于创建指向其他页面的链接。当用户点击这个链接时，浏览器会发送一个 HTTP 请求，请求目标页面并返回给客户端。

    在 AngularJS 路由中，我们使用 $location 服务来处理这个请求。当一个页面被激活时，它会触发一个路由事件，从而引发一个新的 window.location 操作。在这个过程中，! 变量会被替换为实际的目标 URL，然后浏览器会根据这个新的 URL 发送一个请求。

    然而，如果用户尝试从一个带有特殊字符的页面链接到另一个页面，那么浏览器可能会遇到一些问题。在这种情况下，它可能会尝试将这些字符重新编码为 ASCII 字符，但这会导致错误的结果。因此，为了保持网页的一致性，我们总是必须确保所有的链接都以标准的格式存在。

    总结来说，#/hello 的 URL 是正确的，因为它指向了一个具有正常字符集的页面。而 #!/hello 是错误的，因为它的内容包含了非法字符，这会导致浏览器无法正确解析这个 URL 并导致问题。

    评论

报告相同问题？