
(1)一种是重定向跳转,超连<a>就是一种重定向跳转,这样的跳转request对象是传不到下一个页面的,下一个页面得到的request对象是一个新的对象,而不是上一个页面传过来的就得不到上一个页面的数据如果你想通过这种方法跳转的话,那就要用<a href="ajsp参数名=参数值">,在下一个页面用requestgetParameter("参数名")得到值
(2)另一种跳转是转发,这种跳转request对象就被传往下一个页面,可以用<jsp:forward page="/ajsp"/>,这样你可以把参数用requestsetAttribute()方法存进request对象里,再到下一个页面用requestgetAttribute()得到参数
两种方法最明显的区别是,重定向跳转当你从ajsp到bjsp页面的时候,地址栏的地址已经由ajsp变为bjsp;相反,转发跳转当你从ajsp到bjsp页面的时候,地址栏仍然是ajsp的地址
如何利用AngularJS服务接入外部API
除了对HTML进行扩展的能力之外,AngularJS还提供一套简便途径、帮助我们与外部API实现交互。利用其服务与GitHub的API相对接,进而创建一套简单的库浏览器。
现在用这套基础HTML模板为起点
一、准备工作
现在将AngularJS脚本添加到该文档的<head>当中:
在此之后,可以在将这套CCS样式添加到行内或者独立的文件当中:
其中不存在任何多余的内容、只保留最基础的布局方案——将搜索栏置于右侧、库信息位于中央、用户库同样置于右侧。还需要将对应代码行打包至<pre>标签当中,此后还要利用它显示README文件内容——因为这些内容通常来自GitHub Flavored Markdown、而且其中一部分代码行与用户库列表存在重叠。
可以向其中添加更多样式以提升成果的视觉效果——但以上截图都采取最基本的外观设计。
在未来需要编写的JavaScript代码置于本文档的<head>当中或者为其建立独立文件,但独立文件仍然需要处于AngularJS脚本之下
二、模块
现在可以为自己的应用程序创建一个模块:
接下来利用ngApp指令将其添加到<body>标签当中:
三、控制器
需要为自己的应用程序准备一套控制器。为了简化创建流程,将只为应用准备一套控制器,这样就不必考虑如何在不同控制器之间进行信息传递了
四、基础服务
需要对自己的GitHub服务进行定义:
将使用appfactory()方法,这样就能保证返回对象附带几个以后将会用到的方法。将使用$>
五、搜索库
服务中的第一项方法负责利用GitHub API对库进行搜索。使用服务非常简单(这项函数能够进入由制造函数返回的对象):
$>
$>
六、搜索栏
为了使用之前几步中定义完成的函数,需要在自己的HTML当中添加搜索栏。相关代码非常简单,如下所示:
使用ngModel指令将该输入栏中的值指向至Scope query变量,并在用户按下回车键后利用ngKeyup调用executeSearch()函数(这样$eventkeyCode == 13就会进行比较)。无法在AngularJS表达式中使用条件语句,但一条简单的逻辑运算符(AND)足以很好地完成这项任务。
在输入域下面,使用ngRepeat来显示搜索结果。将显示该库的完整名称与描述(如果需要显示其它不同内容,可以点击此处查看GitHub API说明文档中的可用域)。
还使用ngClick通过该库的完整名称来调用openRepo()函数,这样就能显示与之相关的信息,稍后再对该函数进行定义。
七、使用搜索功能
现在可以使用自己创建完成的服务了。首先,将GitHub参数添加至控制器函数(这样该服务就能被注入到AngularJS当中):
现在定义executeSearch()函数:
利用来自$scopequery的搜索字符串从当中调用GitHubsearchRepos(),而后在回调中将搜索结果(来自dataitems)加入$scoperepos变量。
只要执行以上步骤,就能顺利显示出搜索结果。在浏览器中打开HTML文件并尝试进行搜索:
八、获取库中的数据
被传递至此函数的名称必须为完整名称(结构为:作者名称、斜杠、库名称——例如angular/angularjs),这是因为需要将其传递至GitHub API。
九、获取库中的README文件
README文件中的内容并未被包含在我利用以上函数获取到的数据当中。相反,需要利用另一个API进行调用及获取,因此需要创建以下函数:
这条函数与之前我们创建完毕的两条基本相同,只不过对URL进行了变更。还要利用atob()函数解码README文件的内容,因为它采用base64编码机制。可以点击此处查看GitHub API说明文档中与获取README文件内容相关的信息。
之所以没有将这两条请求塞进同一个函数当中,是因为某些库根本不具备 README文件。如果将二者强行结合,应用程序可能因此发生故障。
十、显示库信息
将在另一个元素<div>当中显示库的完整名称、查看过该库的人数以及README文件:
将把该信息保存在控制器Scope内的activeRepo变量当中。只要存在可以显示的数据,ngShow就会将该元素显示出来(如果不存在可以显示的数据,将只能看到‘Watched by people’文本,而且没有任何库被选中)。
十一、更新控制器
还需要对控制器进行更新,从而保证其切实获取到库数据并将其纳入Scope当中。下面创建之前附加至ngClick指令的openRepo()函数:
在这里,首先使用GitHubgetRepo()方法、检查错误而后将该数据引入activeRepo变量。接下来,获取README文件——如果该文件不存在,需要向用户提示该情况。
现在可以再次运行自己的应用程序并查看其实际效果:
十二、获取用户的库
为了将更多功能引入到应用程序当中,将为屏幕右方已被选定库的持有者显示其所有可用库。这要求向服务中引入另一个方法:
十三、显示用户的库
这基本上相当于重现HTML中的搜索栏机制,不过实际需要显示的是用户名称与user对象中的库,而非输入域或者Scope本身:
到了这一步,应该已经拥有了一套能够切实运作的AngularJS应用程序——它可以根据搜索字符串获取GitHub库。
AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法。但有一个例外:在directive中使用scope: { },这种方式创建的作用域是一个独立的"Isolate"作用域,它也有父作用域,但父作用域不在其原型链上,不会对父作用域进行原型继承。这种方式定义作用域通常用于构造可复用的directive组件。
作用域的原型继承是非常简单普遍的,甚至你不必关心它的运作。直到你在子作用域中向父作用域的原始类型属性使用双向数据绑定2-way data binding,比如Form表单的ng-model为父作用域中的属性,且为原始类型,输入数据后,它不会如你期望的那样运行——AngularJS不会把输入数据写到你期望的父作用域属性中去,而是直接在子作用域创建同名属性并写入数据。这个行为符合JavaScript原型继承机制的行为。AngularJS新手通常没有认识到ng-repeat、 ng-switch、ng-view和ng-include 都会创建子作用域, 所以经常出问题。 (见 示例)
可以
and
<span ng-if="checked && checked2">
I'm removed when the checkbox is unchecked
</span>
or
<span ng-if="checked || checked2">
I'm removed when the checkbox is unchecked
</span>
以上就是关于AngularJS怎么获取到上一个页面的两个参数值全部的内容,包括:AngularJS怎么获取到上一个页面的两个参数值、如何利用AngularJS服务接入外部API、angularjs ng-if会创建新的作用域吗等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)