AngularJS学习笔记(三) 单页面webApp和路由(ng-route)

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

1.单页面webApp

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

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

2.路由(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。虽然没想出这么做有什么不妥,但是内心当中总觉得好别扭。。

下一节说说自定义指令。

时间: 2024-10-15 00:45:47

AngularJS学习笔记(三) 单页面webApp和路由(ng-route)的相关文章

angularjs学习笔记三——directive

1.ng-app此指令声明angular的边界,也就是应用程序入口(当然没有ng—app指令的时候也不要奇怪,还有其他方法可以做入口,angular.bootstrap(element,[modules],config)) 2.ng-bind 就是绑定模板,其实和{{hash}}的效果是一样的,不过要注意的是{{hash}}在各种原因下可能会被用户看到,带来不好的用户体验 3.ng-model 它链接了页面可交互元素(input,textarea之类的)和位于$scope之上的model,这儿有

Android学习笔记三:Intent实现页面跳转

在主Activity的OnCreate()方法中,通过findViewById得到Activiity_main中已定义的组件,例如Button.EditText等,注意需要强制转型view到具体的类型. 给取得的组件btn添加监听器如OnClickListener(),在其中实例化Intent对象,参数为要跳转的出发类和目标类. 用putExtra()方法添加内容到intent对象中,内容为K-V对.K中可写标记,V中存要传输的内容. public void onClick(View arg0)

angularjs 学习笔记 -----结构定义

1.  Module使用方法 var APP =angular.module('fontApp',['ngResource', 'ngRoute', 'ngSanitize']); APP为定义的别名,之后的调用都应尽量使用该别名 'fontApp' ng-app="fontApp" 新版本angular中route被分离出来,各个被使用的Providerdou需要在此处声明. 大型应用应该拆分模块来做,先定义一个服务模块,然后再加载它 angular.module('xmpl.ser

Ajax学习笔记(三)

三.jQuery库详解 1.使用jQuery之后,javascript操作的不再是HTML元素对应的DOM对象,而是包装DOM对象的jQuery对象.js通过调用jQuery对象的方法来改变它所包装的DOM对象的属性,从而实现动态更新HTML页面. 由此可见,使用jQuery动态更新HTML页面只需以下两个步骤: (1)获取jQuery对象.jQuery对象通常是DOM对象的包装 (2)调用jQuery对象的方法来改变自身.当jQuery对象被改变时,jQuery包装的DOM对象随之改变,HTM

angular学习笔记(三十一)-$location(2)

之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍的是基于angular-1.3.2版本的,低版本的$location可能会有问题. hashbang模式和history api创建单页应用 首先,$location是用在单页应用里的...(废话,angular就是用在单页的)...所以,$location处理的是url改变,但是不刷新页面的情况.

Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle&lt;T&gt;

Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle<T> 今天 说一下Caliburn.Micro的IEventAggregator和IHandle<T>分成两篇去讲这一篇写一个简单的例子 看一它的的实现和源码 下一篇用它们做一个多语言的demo 这两个是事件的订阅和广播,很强大,但用的时候要小心发生不必要的冲突. 先看一下它的实现思想 在Caliburn.Micro里EventAggregator要以单例的形式出现这样可以

JavaScript--基于对象的脚本语言学习笔记(三)

事件处理器 1.一个数据校验表单的例程 <html> <head> <title>js练习</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> String.prototype.trim=function(){ r

Spring Batch学习笔记三:JobRepository

此系列博客皆为学习Spring Batch时的一些笔记: Spring Batch Job在运行时有很多元数据,这些元数据一般会被保存在内存或者数据库中,由于Spring Batch在默认配置是使用HSQLDB,也就是说在Job的运行过程中,所有的元数据都被储存在内存中,在Job结束后会随着进程的结束自动消失:在这里我们推荐配置JobRepository去使用MySQL. 在这种情况下,Spring Batch在单次执行或者从一个执行到另外一个执行的时候会使用数据库去维护状态,Job执行的信息包

公益图书馆-学习笔记三

1.脚手架页面布局--bootstrap 我们的整个页面分成了16个span,即16部分.在添加一个block时,要在里面设置一个div,然后div里面设置该模块所占的span数和内边距: <block name="content"> <div class="span12 p20"> <form ...> </div> </block> 该代码表示content模块占据12个span,内边距为20. 2.T