单页面webApp和路由(ng-route)

我会带着你远行 2022-04-06 10:56 202阅读 0赞

路由($route)这个东西(也许可以加上$location)可以说是ng最重要的东西了，因为angular目前最重要的作用就是做单页面webApp，而路由这个东西是能做到页面跳转的关键。

**一.单页面webApp**

为什么叫单页面webApp？因为它是单页面的。额，关键在于我们看到的不少webApp是多页面的啊，可以从一页跳到另一页。嗯，看起来是这样，不过实际上这几页实际还是一个页面，因为它们是一次性加载进来的，至于为啥会有跳转效果呢？嗯，有点儿像选项卡，嗯。其实现原理在html5之前是通过hashbang，H5是History。这篇文章主要讨论的是hashbang。为什么要用\#呢？当然我们可以直接多页面，就跟做网站一样。但是这么做最大的问题是:每次切换都需要重新加载页面。我们可以接受进入一个app的时候多花几秒加载，而在使用App的时候切换页面的时候多等个一两秒就会给用户一种这app好卡的感觉。

另外webApp另外一个好处就是可以减轻服务器压力，后台只管给数据。嗯，其实我不是很懂这一点。。以后再补充吧。

**二.路由(ng-route)**

那么怎么把单页面webapp(SPA)做成多页面的样子呢？就是怎么来管理这些页面呢？就要靠路由了。

来个案例，这是一个信息管理系统，管用户注册，注销，用户列表，用户详情之类的东西。

<!DOCTYPE html>
    <html lang="en" ng-controller="userlist">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
    <div>
        <table>
            <tr ng-repeat="x in data" ng-click="detail($index)">
                <td>{
        { x.name }}:{
        { x.password }}<a href="#ddd/{
        {$index}}">查看详情</a></td>
            </tr>
        </table>
    </div>
    </body>
    </html>

html我就粘一部分，这一部分是显示用户列表的，点击对应用户需要显示它们的对应信息。为什么选这一部分，是因为这里需要做地址传参。

再看看对应的管路由跳转的js代码

m1.config(["$routeProvider",function($routeProvider){
            $routeProvider.when("/aaa",{
                templateUrl:"register.html",
                controller:"register"
            }).when("/bbb",{
                templateUrl:"cancel.html",
                controller:"cancel"
            }).when("/ccc",{
                        templateUrl:"userlist.html",
                        controller:"userlist"
                    })
                    .when("/ddd/:index",{
                templateUrl:"detail.html",
                controller:"detail"
            })
                    .otherwise({redirectTo:"/aaa"});
        }])

其中

.when("/ddd/:index",{
          templateUrl:"detail.html",
          controller:"detail"
    })

对应着用户列表页面。

首先，m1.config(\["$routeProvider",function($routeProvider)\])是注入模块的过程，因为ng-route是一个独立于ng之外的模块，是一个独立的js文件。

然后，when函数的参数，第一个是url地址(后面接的:index待会讲地址传参的时候再说）。templateUrl是转到的页面地址(内容少的话可以用template)，controller写跳转到的页面的控制器。

跳转之后的页面url大概是长这样的：http://localhost:63342/%E8%B7%AF%E7%94%B1/index.html\#/ddd

最后说说地址传参的问题，在详细页中，我们只需要显示对应的一个人的信息，就是说不管你点谁的详情显示的一个页面，但是你需要告诉详情页点击的究竟是哪个按钮，我该渲染哪个。代码里的:index代表着你点击的用户的列表索引（就是你点击的是第几个用户），传索引是因为用户信息数据是用数组存的。在列表页中，这个变量叫index或者啥的都无所谓，因为这只是占了个坑，代表这里传的值可以用这个变量来取(当然这个名字在跳转过去的详情页是有用的)。

再看看对应的html怎么写的：

<tr ng-repeat="x in data" ng-click="detail($index)">
           <td>{
        { x.name }}:{
        { x.password }}<a href="#ddd/{
        {$index}}">查看详情</a></td>
    </tr>

这里的$index对应的就是点击的这个tr在这个表格中的索引，确切的来说是x是data中的第几项。index就对应了\{ \{$index\}\}。

如果加上了参数的话，跳转页的url长这样：http://localhost:63342/%E8%B7%AF%E7%94%B1/index.html\#/ddd/0

后面多加的这个0就是传的参数了，想要在跳转页取到这个参数，可以用$routeParams

m1.controller("detail",["$scope","$routeParams",function($scope,$routeParams){
        $scope.index=$routeParams.index;
    }]);

就是说，这里$routeParams.index中的index对应着在when函数中写的那个。

说句题外话，之前我不用地址传参的时候，实现”多页面"通信的方式是在$rootScope里写个属性存上要传的数据，毕竟ng只有一个$rootScope。虽然没想出这么做有什么不妥，但是内心当中总觉得好别扭。

文章来源：[http://www.cnblogs.com/zhangdongming/p/5397180.html][http_www.cnblogs.com_zhangdongming_p_5397180.html]

[http_www.cnblogs.com_zhangdongming_p_5397180.html]: http://www.cnblogs.com/zhangdongming/p/5397180.html