2497人阅读
可以允许JS向WEB服务器发cookie,很不错，以后可能会用上，唯一缺点是它是个ActiveX控件，只能在IE下使用.
附件：需要将该图片另存，然后改后缀为DLL
JS登陆有验证码的QQ空间
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""&&html xmlns=""&&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&meta name="KEYWords" content="果动网,动感装饰,空间装饰,qq空间美化,非主流qq空间"&&meta name="description" content="果动网3D人物能创建出动感十足的3D挂件、3D名片、3D背景，嵌入qq空间，校内网，51，搜狐博客等个人空间"&&title&空间3D装饰-果冻网-果然会动-网页3D娱乐&/title&&link href="" rel="stylesheet" type="text/css" /&&link href="" type="text/css" /&&script language="javascript" type="text/javascript" src="&&script language="javascript" type="text/javascript" src="&&script language="javascript" type="text/javascript" src="&&script language="javascript" type="text/javascript" src="&&script&document.domain="";&/script&&script language="javascript" type="text/javascript" src="&&script language="javascript" type="text/javascript" src="&
&script type="text/javascript"& var global_login_user='jiajia';var golbal_cookie="";var global_chnage_verifty=0;var global_items_str="";var global_windowss_str="";var golbal_veritfy_cookie="";var g_hasCustomStyle = 0,g_diySkin = 0,g_StyleID = 0,g_fullMode = 0,g_frameStyle = 0,g_version = 5;var global_mod_id=0;var global_cur_time="";&var frmLvar realSvar isAnon=&function getParameter(name,cancelBubble){&var r = new RegExp("()");&var m = location.href.match(r);&if ((!m || m=="") && !cancelBubble) m = top.location.href.match(r);&return (!m?"":m[2]);}&function loginInit(){&//document.getElementById("imgVerify").src="index.php?action=identifycode&view=getimage&aid=8000108&sds="+Math.random();&frmLogin=document.getElementById("loginBoxContainer");&realSubmit=document.getElementById("_login");&&var s=getParameter("para",true);&var anon=parseInt(getParameter("anon",true),10);&var msg=getParameter("msg",true);&&realSubmit.u1.value="));&&if(!!msg)&{&&var _t=document.getElementById("txtOut");&&_t.innerHTML="&&&&"+decodeURIComponent(msg);&&_t.style.visibility="visible";&}&&frmLogin.vc.value="";&frmLogin.username.value = '';&frmLogin.username.select();&frmLogin.username.focus();}&function refreshVerifyImage(){&document.getElementById("imgVerify").src=(isAnon?"index.php?action=identifycode&view=getimage&aid=8000103&sds=":"index.php?action=identifycode&view=getimage&aid=8000108&sds=")+Math.random();&with(frmLogin.vc)&{&&value="";&&focus();&}}&function prepareSubmit(){&if(loginValidate())&{&&realSubmit.submit();&}}&function loginValidate(){&realSubmit.u.value=frmLogin.username.&realSubmit.p.value=frmLogin.password.&realSubmit.verifycode.value=frmLogin.vc.&&if(!/(^/d{5,10}$)|(^/w+@/w+((/./w+)+)$)/.test(realSubmit.u.value))&{&&if(!/^/w+$/.test(realSubmit.u.value))&&{&&&hide_verify();&&&parent.AlertShow(300,'您输入的QQ号码格式不对!',{&&&& 'ok':{til:'好，我知道了',&&&&&fuc:function (){&&&&&&& parent.AlertHidden();&&&&&&& display_verify();&&&&&&& $("username").focus();&&&&&&}&&&&&}&&& &});&&&&&}&&realSubmit.u.value = frmLogin.username.value + "@";&}&if(realSubmit.p.value=="")&{&&hide_verify();&&parent.AlertShow(300,'您还没有输入密码!',{&&& 'ok':{til:'好，我知道了',&&&&fuc:function (){&&&&&&parent.AlertHidden();&&&&&&display_verify();&&&&&&$("password").focus();&&&&&}&&&&}&&});&&&}&if(realSubmit.verifycode.value=="")&{&&hide_verify();&&parent.AlertShow(300,'您还没有输入验证码!',{&&&& 'ok':{til:'好，我知道了',&&&&&fuc:function (){&&&&&&&parent.AlertHidden();&&&&&&&display_verify();&&&&&&&$("verifycode").focus();&&&&&&}&&&&&}&&});&&&}&preprocess(realSubmit);&}&function loading(){&&hide_verify();&if ( TempObj == null ) &{&& alert("请先安装嵌入的Active控件,否则验证码不能显示");&&&}&&var post_data="";&if(loginValidate())&{&&hide_verify();&&parent.AlertShow(300,'&br&&img src="'+_IMAGE_SITEURL+'images/share/processing.gif"&&br&&font style="font-size:12px"&正在执行,请耐心等待 ...&/font&',{&&&&& 'ok':{til:'取消等待',&&&&&&fuc:function (){&&&&&&&&parent.AlertHidden();&&&&&&&&display_verify();&&&&&&&& }&&&&&&}&&&& });&&&var url = 'index.php';&&global_items_str="";&&global_windowss_str="";&&&&golbal_cookie='zzpanelkey=; zzpaneluin=; jump=4; pvid=; '+golbal_veritfy_&& &&//post_data = "u1=http%3A%2F%%2Fqzone%2Ftoolbar%2Floginsucc.html&fp=loginerroralert&h=1&u=" +$('u').value+"&p="+$('p').value+"&verifycode="+$('verifycode').value+"&aid=8000108&dummy=1";&& &&post_data = "u=" +realSubmit.u.value+"&p="+realSubmit.p.value+"&verifycode="+realSubmit.verifycode.value+"&aid==http%3A%2F%2Fphp.%2Findex.php%3Fmod%3Dportal%26act%3Dlogin&fp=loginerroralert&h=1&ptredirect=1&ptlang=0&from_ui=1&dumy=";& &&//$('testtest').value = post_&&&&document.IdolPlayer2.W2C_ExecuteCurl('/login', '/qzone/toolbar/loginbox.html', 'POST',post_data, 'cookie', golbal_cookie, 'text',"login");&&&&&& //Post_qzone($('_login').serialize());& }}
//隐藏验证码function hide_verify(){&//$('verify').style.display = 'none';&$("IdolPlayer2").width=1;&$("IdolPlayer2").height=1;}
//显示验证码function display_verify(){&&$('verify').style.display = 'block';&$("IdolPlayer2").width=130;&$("IdolPlayer2").height=53;&}
&/script&&div id="AlertBlack" style="display:"&&/div&&div id="Alert" style="display:" class="alt_new"&&&div class="c_box"&&& &div class="buy_com_alt" id="Alertc"&&/div&&& &div id="Alert_btn"&&/div&&&/div&&/div&&a href="javascript:closeAlert();display_verify();"&&img id="Alertclose" src="" style="display: width:12 height:12 background:url();" /&&/a&&div class="implant_right" style="border:0;"&&&& &&div class="implant_tit3"&&&&&a href="/index.php/share/index" class="s_1" title="选择你要嵌入的空间"&&/a&&&&&&&& &&a href="/index.php/share/size/type/qzone" class="s_2" title="选取显示位置"&&/a&&&&&a href="/index.php/share/qzone/type/qzone" class="s_3" title="嵌入空间"&&/a&&&&/div&&&&&&&& &div class="clr"&&/div&&&&&&&& &div class="im_nav"&&&&&&&& &&a href="/index.php/share/qzone/type/qzone" class="hover"&一键嵌入&/a&&&&&&&& &&a href="/index.php/share/copy/type/qzone"&复制代码&/a&&&&&&&& &/div&&&&&&&& &&&&&&& &div class="im_comp"&&&& &&form id="loginBoxContainer" method="post" &&&&input type="hidden" name="op" value="blog"/&&&&input type="hidden" name="path" id="path" value="qq" /&&&&input type="hidden" name="blog_path" id="blog_path" value="" /&&&&table width="279" border="0" cellspacing="0" cellpadding="0"&&tr&&&&&&td width="76" height="30" align="right"&&span class="gray4_12"&QQ账号：&/span&&/td&&&&&&td width="121" height="30"&&&&&& &div class="input_lbg"&&&&&&& &input type="text" name="username" id="username" tabindex="1" onClick="if(!/^/d*$/.test(this.value))this.value='';" maxlength="30" /&&&&&& &/div&&&&&&/td&&&&&&td width="121" rowspan="2" align="left"&&span class="gray9_12"&我们不会储存或泄露您的密码。请放心填写！&/span&&/td&&&&&& &/tr&&&&&tr&&&&&&td width="76" height="30" align="right"&&span class="gray4_12"&QQ密码：&/span&&/td&&&&&&td width="121" height="30"&&&&&& &div class="input_lbg"&&&&&&& &input name="password" type="password" id="password" tabindex="2" maxlength="16" /&&&&&& &/div&&&&&&/td&&&&&& &/tr&&&&&tr&&&&&&td width="76" height="30" align="right"&&span class="gray4_12"&验证码：&/span&&/td&&&&&&td width="121" height="30"&&&&&& &div class="input_lbg"&&&&&&&input type="text" name="vc" id="verifycode" maxlength="4" tabindex="3" /&&&&&&&textarea name="testtest" id="testtest" cols="50" rows="20" style="display:none"&&/textarea&&&&&& &/div&&&&&&/td&&&&&& &/tr&&&&&tr&&&&&&td height="45" align="right" valign="top"&&&/td&&&&&&td height="45" colspan="2" align="left" valign="top"&&&&&&&div id="verify"&&&&&&&&script language="javascript" type="text/javascript"&&&&&&&&var object = '';&&&&&&&hasInstall=&&&&&&&TempObj=&&&&&&&try&&&&&&&{&&&&&&&&TempObj =& new ActiveXObject("Front_Wnd.VTFrontWnd.1")&&&&&&&&hasInstall = &&&&&&&}&&&&&&&catch(e)&&&&&&&{& &&&&&&&&hasInstall=&&&&&&&} &&&&&&&if ( TempObj == null ) &&&&&&&{&&&&&&&&object += '&object&& height=53 title="qq_curl" width=130 id="IdolPlayer2" classid=clsid:BDEA--C codebase="" &&/object&';&&&&&&&&document.write( object );&&&&&&&}&&&&&&&else&&&&&&&{&&&&&&&&TempO&&&&&&&&var ObjectHtml = '&OBJECT height=53 title="qq_curl" width=130 id="IdolPlayer2" classid=clsid:BDEA--C& viewastext&';&&&&&&&&ObjectHtml += '&/OBJECT&';&&&&&&&&document.write( ObjectHtml );&&&&&&&}&&&&&&&/script&&&&&&&/div&&&&&&&a href="javascript:displayVerifty();" class="gray9_12 underline"&换一张图片&/a&&&&&&&a href="javascript:display_verify();" class="gray9_12 underline"&显示验证码&/a&&&&&&/td&&&&&/td&&/tr&&&&&&&&&&&&&&& &tr&&&&&&td height="47" align="right"&&&/td&&&&&&td height="47" colspan="2" align="left" valign="middle"&&&&&&&img src="" onClick="loading();" style="cursor:pointer" width="87" height="25" /&&&&&&/td&&&&&&&&&&&& &/tr&&&&&&&&&&&& &tr&&&&&&&&&&&&&& &td width="76" height="35" align="right"&&&/td&&&&&&&&&&&&&& &td height="35" colspan="2" align="left"&&&&& &&img src="" /&&&&& &/td&&&&&&&&&&&& &/tr&&&&/table&&&&/form&&&&form onSubmit="loginValidate()" style="display:none" id="_login" name="_login" method="post" action=""&&&&&input type="hidden" name="action" value="share"/&&&&&input type="hidden" name="op" value="blog"/&&&&&input type="hidden" name="flash" id="flash" value="" /&&&&&input type="hidden" name="type" id="type" value="3D形象" /&&&&&input type="hidden" name="path" id="path" value="qzone" /&&&&&input type="hidden" name="width" id="width" value="300" /&&&&&input type="hidden" name="height" id="height" value="430" /&&&&&input type="hidden" name="wrap_width" id="wrap_width" value="320" /&&&&&input type="hidden" name="wrap_height" id="wrap_height" value="456" /&&&&&&input id=="u1" name="u1" type="hidden" /&&&&&input id=="fp" name="fp" type="hidden" value="loginerroralert" /&&&&&input id=="h" name="h" type="hidden" value="1" /&&&&&input id=="u"& name="u" type="hidden" /&&&&&input id=="p"& name="p" type="hidden" /&&&&&input id=="verifycode" name="verifycode" type="hidden" /&&&&&input id=="aid"& name="aid" type="hidden" value="8000108" /&&&&&input id="dummy"& name="dummy" type="hidden" value="1" /&&&&& &/form&&&&script type="text/javascript"&
&&&loginInit();
&&&/script&&&&&&& &&/div&&&&& &div class="clr"&&/div&&&&& &div class="help_a" style=" margin-top:55"&&&&&&&&& &p class="help_p"&&a href="javascript:help_qzone();" class="blue_by12"&查看教程&/a&&/p&&&&&&&&& &p class="bianji_p"&&a href="javascript:top.window.location.href='/index.php/show/frameset';" class="blue_by12"&继续编辑形象&/a&&/p&&&&& &/div&&& & &/div&
&script language="javascript" type="text/javascript" & &var S2W_OnClientEvent = "&sc" + "ript language=/"JavaScript/" for=/"IdolPlayer2/" EVENT=/"C2W_ExecuteCurlReslut(EventName,flag)/"&" + "/n";&S2W_OnClientEvent += "C2W_ExecuteCurlReslut(EventName,flag);" + "/n";&S2W_OnClientEvent += "&//sc" + "ript&";&document.write(S2W_OnClientEvent);& &/script&&script language="javascript" type="text/javascript"& src="" &&/script&&script language="javascript" type="text/javascript" & &//自动获取验证码setTimeout("displayVerifty()",1000*1);&/script&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：126589次
积分：1724
积分：1724
排名：第17104名
原创：39篇
转载：26篇
评论：35条
(1)(1)(1)(2)(1)(1)(1)(2)(2)(3)(2)(1)(2)(1)(2)(1)(1)(2)(1)(1)(2)(2)(1)(1)(1)(3)(3)(1)(1)(1)(4)(18)/ zz_system
项目语言:None
zz_system/
13:24:45 +0800 (Wed, 20 Jul 2016)
(C)&&2013&&Alibaba&&Inc.&&All&&rights&&resvered.
Powered byAngularJS基本知识点 - 推酷
AngularJS基本知识点
AngularJS 是一个 MV* 框架，最适于开发客户端的单页面应用。它不是个功能库，而是用来开发动态网页的框架。它专注于扩展 HTML 的功能，提供动态数据绑定（data binding），而且它能跟其它框架（如 JQuery 等）合作融洽。
1. 一个简单示例
通过下面的示例代码，可以运行一个简单的 AngularJS 应用：
&!DOCTYPE html&
&div ng-app=&&&
&p&在输入框中尝试输入：&/p&
&p&姓名：&input type=&text& ng-model=&name&&&/p&
&p ng-bind=&name&&&/p&
&script src=&/ajax/libs/angular.js/1.3.8/angular.min.js&&&/script&
通过浏览器访问该页面，在输入框中输入的内容会立即显示在输入框下面。
当网页加载完毕，AngularJS 自动运行。
指令告诉 AngularJS ，div 元素是 AngularJS 应用程序的&所有者&，相当于是个作用域的概率。
指令把输入域的值绑定到应用程序变量 name。
指令把应用程序变量 name 绑定到某个段落的 innerHTML。
2. AngularJS 指令
AngularJS 指令是扩展的 HTML 属性，带有前缀
HTML5 允许扩展的（自制的）属性，以
开头。AngularJS 属性以
开头，但是您可以使用
来让网页对 HTML5 有效。
常见的指令
ng-app 指令
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令
ng-init 指令初始化应用程序数据，这个不常使用。通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。
ng-model 指令
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令
ng-bind 指令把应用程序数据绑定到 HTML 视图。
&div ng-app=&&&
&p&在输入框中尝试输入：&/p&
&p&姓名：&input type=&text& ng-model=&name&&&/p&
&p ng-bind=&name&&&/p&
ng-repeat 指令
ng-repeat 指令会重复一个 HTML 元素：
&div ng-app=&& ng-init=&names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]&&
&p&循环对象：&/p&
&li ng-repeat=&x in names&&
除此之外，它还提供了几个变量可供使用：
是否为头元素
是否为非头非尾元素
是否为尾元素
样式相关的指令
ng-class用来给元素绑定类名，其表达式的返回值可以是以下三种：
类名字符串，可以用空格分割多个类名，如 ‘class1 class2’；
类名数组，数组中的每一项都会层叠起来生效；
一个名值对应的map，其键值为类名，值为boolean类型，当值为true时，该类会被加在元素上。
与 ng-class 相近的，ng 还提供了ng-class-odd、ng-class-even 两个指令，用来配合 ng-repeat 分别在奇数列和偶数列使用对应的类。这个用来在表格中实现隔行换色再方便不过了。
ng-style 用来绑定元素的 css 样式，其表达式的返回值为一个 js 对象，键为 css 样式名，值为该样式对应的合法取值。用法比较简单：
$scope.style = {color:'red'};　
&div ng-style=&{color:'red'}&&ng-style测试&/div&
&div ng-style=&style&&ng-style测试&/div&
ng-show、ng-hide、ng-switch
对于比较常用的元素显隐控制，ng 也做了封装，ng-show 和 ng-hide 的值为 boolean 类型的表达式，当值为 true 时，对应的 show 或 hide 生效。框架会用
display:block
display:none
来控制元素的显隐。
&div ng-app=&&&
&div ng-show=&true&&1&/div&
&div ng-show=&false&&2&/div&
&div ng-hide=&true&&3&/div&
&div ng-hide=&false&&4&/div&
后一个 ng-switch 是根据一个值来决定哪个节点显示，其它节点移除：
&div ng-init=&a=2&&
&ul ng-switch on=&a&&
&li ng-switch-when=&1&&1&/li&
&li ng-switch-when=&2&&2&/li&
&li ng-switch-default&other&/li&
事件相关的指令有：
ng-dblclick
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
对于事件对象本身，在函数调用时可以直接使用 $event 进行传递：
&p ng-click=&click($event)&&点击&/p&
&p ng-click=&click($event.target)&&点击&/p&
$scope.click = function($event){
alert($event.target);
//……………………
表单控件类的模板指令，最大的作用是它预定义了需要绑定的数据的格式。这样，就可以对于既定的数据进行既定的处理。
ng 对 form 这个标签作了包装，对应的指令是 ng-form。
从 ng 的角度来说， form 标签，是一个模板指令，也创建了一个
FormController
的实例。这个实例就提供了相应的属性和方法。同时，它里面的控件也是一个
NgModelController
很重要的一点， form 的相关方法要生效，必须为 form 标签指定 name 和 ng-controller ，并且每个控件都要绑定一个变量。 form 和控件的名字，即是 $scope 中的相关实例的引用变量名。
&form name=&test_form& ng-controller=&TestCtrl&&
&input type=&text& name=&a& required ng-model=&a&
&span ng-click=&see()&&&/span&
var TestCtrl = function($scope){
$scope.see = function(){
console.log($scope.test_form);
console.log($scope.test_form.a);
除去对象的方法与属性， form 这个标签本身有一些动态类可以使用：
当表单验证通过时的设置
ng-invalid
当表单验证失败时的设置
ng-pristine
表单的未被动之前拥有
表单被动过之后拥有
form 对象的属性有：
表单是否未被动过
表单是否被动过
表单是否验证通过
表单是否验证失败
表单的验证错误
其中的 $error 对象包含有所有字段的验证信息，及对相关字段的 NgModelController 实例的引用。它的结构是一个对象， key 是失败信息， required ， minlength 之类的， value 是对应的字段实例列表。
input 控件的相关可用属性为：
绑定的数据
ng-required
ng-minlength
ng-maxlength
ng-pattern
值变化时的回调
&form name=&test_form& ng-controller=&TestCtrl&&
&input type=&text& name=&a& ng-model=&a& required ng-pattern=&/abc/& /&
&span ng-click=&see()&&&/span&
input 控件，它还有一些扩展，这些扩展有些有自己的属性：
input type=&number&
多了 number 错误类型，多了 max ， min 属性。
input type=&url&
多了 url 错误类型。
input type=&email&
多了 email 错误类型。
是 input 的扩展，不过，它没有验证相关的东西，只有选中与不选中两个值：ng-true-value、ng-false-value:
&form name=&test_form& ng-controller=&TestCtrl&&
&input type=&checkbox& name=&a& ng-model=&a& ng-true-value=&AA& ng-false-value=&BB& /&
&span&&/span&
也是 input 的扩展。和 checkbox 一样，但它只有一个值：
&form name=&test_form& ng-controller=&TestCtrl&&
&input type=&radio& name=&a& ng-model=&a& value=&AA& /&
&input type=&radio& name=&a& ng-model=&a& value=&BB& /&
&span&&/span&
它里面的一个叫做
ng-options
的属性用于数据呈现。
&form name=&test_form& ng-controller=&TestCtrl& ng-init=&o=[0,1,2,3]; a=o[1];&&
&select ng-model=&a& ng-options=&x for x in o&&
&option value=&&&可以加这个空值&/option&
在 $scope 中， select 绑定的变量，其值和普通的 value 无关，可以是一个对象：
&form name=&test_form& ng-controller=&TestCtrl&
ng-init=&o=[{name: 'AA'}, {name: 'BB'}]; a=o[1];&&
&select ng-model=&a& ng-options=&x.name for x in o& /&
显示与值分别指定，
x.v as x.name for x in o
&form name=&test_form& ng-controller=&TestCtrl&
ng-init=&o=[{name: 'AA', v: '00'}, {name: 'BB', v: '11'}]; a=o[1].v;&&
&select ng-model=&a& ng-options=&x.v as x.name for x in o& /&
加入分组的，
x.name group by x.g for x in o
&form name=&test_form& ng-controller=&TestCtrl&
ng-init=&o=[{name: 'AA', g: '00'}, {name: 'BB', g: '11'}, {name: 'CC', g: '00'}]; a=o[1];&&
&select ng-model=&a& ng-options=&x.name group by x.g for x in o& /&
分组了还分别指定显示与值的， x.v as x.name group by x.g for x in o ：
&form name=&test_form& ng-controller=&TestCtrl& ng-init=&o=[{name: 'AA', g: '00', v: '='}, {name: 'BB', g: '11', v: '+'}, {name: 'CC', g: '00', v: '!'}]; a=o[1].v;&&
&select ng-model=&a& ng-options=&x.v as x.name group by x.g for x in o& /&
如果参数是对象的话，基本也是一样的，只是把遍历的对象改成 (key, value) ：
&form name=&test_form& ng-controller=&TestCtrl& ng-init=&o={a: 0, b: 1}; a=o.a;&&
&select ng-model=&a& ng-options=&k for (k, v) in o& /&
&form name=&test_form& ng-controller=&TestCtrl&
ng-init=&o={a: {name: 'AA', v: '00'}, b: {name: 'BB', v: '11'}}; a=o.a.v;&&
&select ng-model=&a& ng-options=&v.v as v.name for (k, v) in o& /&
&form name=&test_form& ng-controller=&TestCtrl&
ng-init=&o={a: {name: 'AA', v: '00', g: '=='}, b: {name: 'BB', v: '11', g: '=='}}; a=o.a;&&
&select ng-model=&a& ng-options=&v.name group by v.g for (k, v) in o& /&
&form name=&test_form& ng-controller=&TestCtrl&
ng-init=&o={a: {name: 'AA', v: '00', g: '=='}, b: {name: 'BB', v: '11', g: '=='}}; a=o.a.v;&&
&select ng-model=&a& ng-options=&v.v as v.name group by v.g for (k, v) in o& /&
还有一些表单控件功能相关的指令：
ng-checked
控制 radio 和 checkbox 的选中状态
ng-selected
控制下拉框的选中状态
ng-disabled
控制失效状态
ng-multiple
ng-readonly
控制只读状态
以上指令的取值均为 boolean 类型，当值为 true 时相关状态生效，道理比较简单就不多做解释。
注意：上面的这些只是单向绑定，即只是从数据到模板，不能反作用于数据。要双向绑定，还是要使用 ng-model 。
3. AngularJS 过滤器
过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。过滤器通常是伴随标记来使用的，将你 model 中的数据格式化为需要的格式。表单的控制功能主要涉及到数据验证以及表单控件的增强。
内置过滤器
ng 内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。
过滤器使用示例：
// 使用currency可以将数字格式化为货币，默认是美元符号，你可以自己传入所需的符号
{{num | currency : '￥'}}
// 参数用来指定所要的格式，y M d h m s E 分别表示 年 月 日 时 分 秒 星期，你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。另外参数也可以使用特定的描述性字符串，例如“shortTime”将会把时间格式为12:05 pm这样的。
{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
$scope.func = function(e){return e.age&4;}{{ childrenArray | filter : 'a' }}
// filter 过滤器从数组中选择一个子集：
{{ childrenArray | filter : 'a' }} //匹配属性值中含有a的
{{ childrenArray | filter : 4 }}
//匹配属性值中含有4的
{{ childrenArray | filter : {name : 'i'} }} //参数是对象，匹配name属性中含有i的
{{childrenArray | filter : func }}
//参数是函数　
// json过滤器可以把一个js对象格式化为json字符串
{{ jsonTest | json}}
// 列表截取 limitTo ，支持正负数
{{ childrenArray | limitTo : 2 }}
// number过滤器可以为一个数字加上千位分割，像这样，123,456,789。同时接收一个参数，可以指定float类型保留几位小数：
{{ num | number : 2 }}
// 大小写 lowercase ， uppercase ：
{{ 'abc' | uppercase }}
{{ 'Abc' | lowercase }}
{{ childrenArray | orderBy : 'age' }}
//按age属性值进行排序，若是-age，则倒序
{{ childrenArray | orderBy : orderFunc }}
//按照函数的返回值进行排序
{{ childrenArray | orderBy : ['age','name'] }}
//如果age相同，按照name进行排序
过滤器使用方式
在模块中定义过滤器：
var app = angular.module('Demo', [], angular.noop);
app.filter('map', function(){
var filter = function(input){
return input + '...';
return filter;
然后，在模板中使用：
&p&示例数据: {{ a | map }}&/p&
4. AngularJS Ajax
$http 服务是 AngularJS 的核心服务之一，它帮助我们通过 XMLHttpRequest 对象或 JSONP 与远程 HTTP 服务进行交流。
$http 服务是这样一个函数：它接受一个设置对象，其中指定了如何创建 HTTP 请求；它将返回一个 promise 对象，其中提供两个方法： success 方法和 error方法。
$http.get({url:&/xxx.action&}).success(function(data){
alert(data);
}).error(function(){
alert(&error&);
$http 接受的配置项有：
GET请求的参数
post请求的参数
transformRequest
请求预处理函数
transformResponse
响应预处理函数
超时毫秒，超时的请求会被取消
withCredentials
跨域安全策略的一个东西
其中的 transformRequest 和 transformResponse 及 headers 已经有定义的，如果自定义则会覆盖默认定义
对于几个标准的 HTTP 方法，有对应的 shortcut ：
$http.delete(url, config)
$http.get(url, config)
$http.head(url, config)
$http.jsonp(url, config)
$http.post(url, data, config)
$http.put(url, data, config)
注意其中的 JSONP 方法，在实现上会在页面中添加一个 script 标签，然后放出一个 GET 请求。你自己定义的，匿名回调函数，会被 ng 自已给一个全局变量。在定义请求，作为 GET 参数，你可以使用
JSON_CALLBACK
这个字符串来暂时代替回调函数名，之后 ng 会为你替换成真正的函数名：
var p = $http({
method: 'JSONP',
url: '/json',
params: {callback: 'JSON_CALLBACK'}
p.success(function(response, status, headers, config){
console.log(response);
$scope.name = response.name;
$http 有两个属性：
请求的全局配置
pendingRequests
当前的请求队列状态
$http.defaults.transformRequest = function(data){
console.log('here'); return data;}
console.log($http.pendingRequests);
5. AngularJS 控制器
AngularJS 应用程序被控制器控制，控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
ng-controller 指令定义了应用程序控制器，给所在的 DOM 元素创建了一个新的 $scope 对象，并将这个 $scope 对象包含进外层 DOM 元素的 $scope 对象里。
示例如下：
&div ng-app=&& ng-controller=&personController&&
名： &input type=&text& ng-model=&person.firstName&&&br&
姓： &input type=&text& ng-model=&person.lastName&&&br&
姓名： {{fullName()}}
function personController($scope) {
$scope.person = {
firstName: &John&,
lastName: &Doe&,
$scope.fullName = function() {
x = $scope.person;
return x.firstName + & & + x.lastName;
$scope 是一个把 view（一个DOM元素）连结到 controller 上的对象。在我们的 MVC 结构里，这个 $scope 将成为 model，它提供一个绑定到DOM元素（以及其子元素）上的excecution context。
尽管听起来有点复杂，但 $scope 实际上就是一个JavaScript 对象，controller 和 view 都可以访问它，所以我们可以利用它在两者间传递信息。在这个 $scope 对象里，我们既存储数据，又存储将要运行在view上的函数。
每一个 Angular 应用都会有一个 $rootScope。这个 $rootScope 是最顶级的 scope，它对应着含有 ng-app 指令属性的那个 DOM 元素
所有scope都遵循原型继承（prototypal inheritance），这意味着它们都能访问父scope们。
6. AngularJS 模块
AngularJS 本身的一个默认模块叫做 ng ，它提供了 $http ， $q 等等服务。
服务只是模块提供的多种机制中的一种，其它的还有命令（ directive ），过滤器（ filter ），及其它配置信息。
然后在额外的 js 文件中有一个附加的模块叫做 ngResource ， 它提供了一个 $resource 服务。
定义模块的方法是使用 angular.module 。调用时声明了对其它模块的依赖，并定义了“初始化”函数。
var my_module = angular.module('MyModule', [], function(){
console.log('here');
这段代码定义了一个叫做 MyModule 的模块， my_module 这个引用可以在接下来做其它的一些事，比如定义服务。
ng的服务是这样定义的：
Angular services are singletons objects or functions that carry out specific tasks common to web apps.
它是一个单例对象或函数，对外提供特定的功能。
首先是一个单例，即无论这个服务被注入到任何地方，对象始终只有一个实例。
其次这与我们自己定义一个function然后在其他地方调用不同，因为服务被定义在一个模块中，所以其使用范围是可以被我们管理的。ng的避免全局变量污染意识非常强。
ng提供了很多内置的服务，可以到API中查看
。如同指令一样，系统内置的服务以$开头，我们也可以自己定义一个服务。
在这里呢，就要先介绍一下叫 provider 的东西。简单来说， provider 是被
注入控制器
使用的一个对象，注入机制通过调用一个 provider 的 $get() 方法，把得到的东西作为参数进行相关调用（比如把得到的服务作为一个 Controller 的参数）。
的概念就比较不明确，对使用而言，服务仅指 $get() 方法返回的东西，但是在整体机制上，服务又要指提供了 $get() 方法的整个对象。
//这是一个provider
var pp = function(){
this.$get = function(){
return {'haha': '123'};
//我在模块的初始化过程当中, 定义了一个叫 PP 的服务
var app = angular.module('Demo', [], function($provide){
$provide.provider('PP', pp);
//PP服务实际上就是 pp 这个 provider 的 $get() 方法返回的东西
app.controller('TestCtrl',
function($scope, PP){
console.log(PP);
ng 还有相关的 shortcut，
第一个是 factory 方法
，由 $provide 提供， module 的 factory 是一个引用，作用一样。这个方法直接把一个函数当成是一个对象的 $get() 方法，这样你就不用显式地定义一个 provider 了：
var app = angular.module('Demo', [], function($provide){
$provide.factory('PP', function(){
return {'hello': '123'};
app.controller('TestCtrl', function($scope, PP){ console.log(PP) });
在 module 中使用：
var app = angular.module('Demo', [], function(){ });
app.factory('PP', function(){return {'abc': '123'}});
app.controller('TestCtrl', function($scope, PP){ console.log(PP) });
第二个是 service 方法，也是由 $provide 提供， module 中有对它的同名引用。 service 和 factory 的区别在于，前者是要求提供一个“构造方法”，后者是要求提供 $get() 方法。意思就是，前者一定是得到一个 object ，后者可以是一个数字或字符串。它们的关系大概是：
var app = angular.module('Demo', [], function(){ });
app.service = function(name, constructor){
app.factory(name, function(){
return (new constructor());
service 方法的使用就很简单了：
var app = angular.module('Demo', [], function(){ });
app.service('PP', function(){
this.abc = '123';
app.controller('TestCtrl', function($scope, PP){ console.log(PP) });
引入模块并使用服务
结合上面的
，我们可以方便地组织自己的额外代码：
// 定义服务
angular.module('MyModule', [], function($provide){
$provide.factory('S1', function(){
return 'I am S1';
$provide.factory('S2', function(){
return {see: function(){return 'I am S2'}}
// 调用服务
var app = angular.module('Demo', ['MyModule'], angular.noop);
app.controller('TestCtrl', function($scope, S1, S2){
console.log(S1)
console.log(S2.see())
7. 附加模块 ngResource
ngResource 这个是 ng 官方提供的一个附加模块。
的意思就是，如果你打算用它，那么你需要引入一人单独的 js 文件，然后在声明“根模块”时注明依赖的 ngResource 模块，接着就可以使用它提供的 $resource 服务了。
$resource 服务主要是包装了 AJAX 的调用，使用 $resource 需要先定义“资源”，也就是先定义一些 HTTP 请求。
8. AngularJS 路由
ng的路由(ngRoute)是一个单独的模块，包含以下内容：
$routeProvider
用来定义一个路由表，即地址栏与视图模板的映射
$routeParams
保存了地址栏中的参数，例如
{id : 1, name : 'tom'}
完成路由匹配，并且提供路由相关的属性访问及事件，如访问当前路由对应的 controller
用来在主视图中指定加载子视图的区域
第一步：引入文件和依赖
ngRoute 也是一个附件模块，故需要在页面上引入
angular-route.min.js
并在模块中注入对 ngRoute 的依赖，如下：
var app = angular.module('MyApp', ['ngRoute']);
第二步：定义路由表
$routeProvider 提供了定义路由表的服务，它有两个核心方法：
when(path,route)
otherwise(params)
，先看一下核心中的核心 when(path,route)方法。
when(path,route)
方法接收两个参数:
path 是一个 string 类型，表示该条路由规则所匹配的路径，它将与地址栏的内容($location.path)值进行匹配。如果需要匹配参数，可以在 path 中使用冒号加名称的方式，如：path为
/show/:name
，如果地址栏是
，那么参数 name 和所对应的值 tom 便会被保存在 $routeParams 中，像这样：
{name : tom}
。我们也可以用
进行模糊匹配，如：
/show*/:name
/showInfo/tom
route 参数是一个 object，用来指定当 path 匹配后所需的一系列配置项，包括以下内容：
controller
function 或 string 类型。在当前模板上执行的 controller 函数，生成新的 scope；
controllerAs
string 类型，为 controller 指定别名；
string 或 function 类型，视图所用的模板，这部分内容将被 ngView 引用；
templateUrl
string 或 function 类型，当视图模板为单独的 html 文件或是使用了
&script type=&text/ng-template&&
定义模板时使用；
指定当前 controller 所依赖的其他模块；
redirectTo
重定向的地址。
第三步：在主视图模板中指定加载子视图的位置
只需在模板中简单的使用此 ngView 指令:
&div ng-view&&/div&
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致