1 / 5
文档名称:

AngularJS入门教程之AngularJS指令 AngularJS.doc

格式:doc   大小:76KB   页数:5页
下载后只包含 1 个 DOC 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

AngularJS入门教程之AngularJS指令 AngularJS.doc

上传人:sssmppp 2020/7/5 文件大小:76 KB

下载得到文件列表

AngularJS入门教程之AngularJS指令 AngularJS.doc

文档介绍

文档介绍:AngularJS入门教程之AngularJS指令熟悉HTML的朋友都知道,HTML有很多属性。比如3〉标签的href属性可以來指定链接的URL地址,<input>标签的type属性可以用来指定inpul的类型。AngularJS指令就是通过扩展HTML的属性來为AngularJS应用増加功能。AngularJS指令用于扩展HTML。这些都是先从ng-M缀的特殊屈性。我们将讨论以下指令:常用AngularJS指令ng-app指令初始化一个AngularJS应用程序。ng-init指令初始化应用程序数据。ng-model指令把元素值(比如输入域的值)绑定到应用程序。ng-app指令ng-app指令启动一个AngularJS应用。它定义根元素。它会自动初始化或启动加载包含AngularJS应用程序的Web页面的应用程序。它也被用来加载各种AngularJS模块AngularJS应用。在下面的例子中,我们定义默认AngularJS应用使用div元素的ng-app属性。<divng-app二〃〃>•••</div>ng-init指令ng-init指令初始化一个AngularJS应用程序的数据。它被用来把值在应用程序中使用的变量。在下面的例子中,我们将初始化countries数组。使用JSON语法来定义countries数组。<divng-app=/z/,ng-init二〃countrics=[{locale:?cn-US',namc:JUnitedStates'},{locale/en~GB,,name:,UnitedKingdom,},{locale:*en-FR',name:'Franee'}]〃>•••</div>ng-model指令ng-model指令定义在AngularJS应用屮使用的模型/变量。在下而的例子屮,我们定义了一个名为“name”的模型。<divng-app=zz,,>•••<p>EntcryourName:<inputtype二"text"ng-model=,zname,z></p></div>ng-repeat指令ng-repeat指令重复html素集合中的每个项目。在下面的例子中,我们已经迭代了数组countrieso<divng-app二〃〃>•••<p>ListofCountrieswithlocale:</p><ol><ling-rcpcat=,/countryincountries"〉{{'Country:'++Locale:'+}}</li></ol></div>AngularJS指令示例<divng-app二〃〃ng-init=zzfirstName=,John,/z>〈P>在输入框111尝试输入:</p>〈p>姓名:<inputtype二〃text"ng-model=,,firstName,,X/p>〈P>你输入的为:{{firstNamc}}</p></div>ng-app指令告诉AngularJS当前<div>元素是一个AngularJS的应用程序,ng-iniI指令用于初始化数据,相当于javascript中的定义变量oAngularJS中的数据绑定,同步了AngularJS表达式与AngularJS数据o{{firstName}}是通过ng-modcl二"f