2023年AngularJS笔记.doc
《2023年AngularJS笔记.doc》由会员分享,可在线阅读,更多相关《2023年AngularJS笔记.doc(13页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、什么是 AngularJS?AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。AngularJS 把应用程序数据绑定到 HTML 元素。AngularJS 可以克隆和反复 HTML 元素。AngularJS 可以隐藏和显示 HTML 元素。AngularJS 可以在 HTML 元素背后添加代码。AngularJS 支持输入验证。引入文献:指令:AngularJS 通过ng-directives扩展了 HTML。指令描述ng-app定义应用程序的根元素。指令定义一个 AngularJS 应用程序的根元素。ng-bind绑
2、定 HTML 元素到应用程序数据(HTML 视图)ng-bind-html绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符ng-bind-template规定要使用模板替换的文本内容ng-blur规定 blur 事件的行为ng-change规定在内容改变时要执行的表达式ng-checked规定元素是否被选中ng-class指定 HTML 元素使用的 CSS 类ng-class-even类似 ng-class,但只在偶数行起作用ng-class-odd类似 ng-class,但只在奇数行起作用ng-click定义元素被点击时的行为ng-cloak在应
3、用正要加载时防止其闪烁ng-controller定义应用的控制器对象ng-copy规定拷贝事件的行为ng-csp修改内容的安全策略ng-cut规定剪切事件的行为ng-dblclick规定双击事件的行为ng-disabled规定一个元素是否被禁用ng-focus规定聚焦事件的行为ng-form指定 HTML 表单继承控制器表单ng-hide隐藏或显示 HTML 元素ng-href为 the 元素指定链接ng-if假如条件为 false 移除 HTML 元素ng-include在应用中包含 HTML 文献ng-init定义应用的初始化值 指令初始化 AngularJS 应用程序变量。可以是表达式也
4、可以是数组也可以是对象ng-jq定义应用必须使用到的库,如:jQueryng-keydown规定按下按键事件的行为ng-keypress规定按下按键事件的行为ng-keyup规定松开按键事件的行为ng-list将文本转换为列表 (数组)ng-model绑定 HTML 控制器的值到应用数据(指令把元素值(比如输入域的值)绑定到应用程序)。ng-model-options规定如何更新模型ng-mousedown规定按下鼠标按键时的行为ng-mouseenter规定鼠标指针穿过元素时的行为ng-mouseleave规定鼠标指针离开元素时的行为ng-mousemove规定鼠标指针在指定的元素中移动时的
5、行为ng-mouseover规定鼠标指针位于元素上方时的行为ng-mouseup规定当在元素上松开鼠标按钮时的行为ng-non-bindable规定元素或子元素不能绑定数据ng-open指定元素的 open 属性ng-options在 列表中指定 ng-paste规定粘贴事件的行为ng-pluralize根据本地化规则显示信息ng-readonly指定元素的 readonly 属性ng-repeat定义集合中每项数据的模板ng-repeat指令对于集合中(数组中)的每个项会克隆一次 HTML 元素。ng-selected指定元素的 selected 属性ng-show显示或隐藏 HTML 元素
6、ng-src指定 元素的 src 属性ng-srcset指定 元素的 srcset 属性ng-style指定元素的 style 属性ng-submit规定 onsubmit 事件发生时执行的表达式ng-switch规定显示或隐藏子元素的条件ng-transclude规定填充的目的位置ng-value规定 input 元素的值使用方法:名字 : Helloname在input中输入值后,下面 获取相应的值实例讲解: 当网页加载完毕,AngularJS 自动启动。ng-app指令告诉 AngularJS, 元素是 AngularJS应用程序的所有者。ng-model指令把输入域的值绑定到应用程序变
7、量name。ng-bind指令把应用程序变量 name 绑定到某个段落的 innerHTML。注意:假如您移除了ng-app指令,HTML 将直接把表达式显示出来,不会去计算表达式的结果。AngularJS 实例HTML5 允许扩展的(自制的)属性,以data-开头。AngularJS 属性以ng-开头,但是您可以使用data-ng-来让网页对 HTML5 有效。姓名为 span中的显示结果为: John前面不加data 结果同样AngularJS 应用 .controller 名: 姓: 姓名: firstName + + lastName var app = angular.module(
8、myApp, );/AngularJS 模块 app.controller(myCtrl, function($scope) $scope.firstName= John; $scope.lastName= Doe; ); / AngularJS 控制器控制应用$scope 相称于 js的var 定义$scope.firstName相称于 var firstName;运营结果:表单填什么,下面获取到什么。AngularJS 表达式AngularJS 表达式写在双大括号内: expression 。AngularJS 表达式很像JavaScript 表达式:它们可以包含文字、运算符和变量。实例
9、5 + 5 或 firstName + + lastName 数组、对象、数字、字符串总价: quantity * cost 总价: 用ng-bind 和 的效果是同样的总价: quantity * cost 姓为 第三个值为 ng-init 里面可以是表达式也可以是数组也可以是对象数据绑定在输入框中尝试输入:姓名: 你输入的为: firstName 实例中的 firstName 表达式是一个 AngularJS 数据绑定表达式。AngularJS 中的数据绑定,同步了AngularJS 表达式与AngularJS数据。 firstName 是通过ng-model=firstName进行同步价
10、格计算器数量:价格: 总价: quantity * price 实例中,两个文本域是通过两个 ng-model 指令同步的反复 HTML 元素 (循环) 使用 ng-repeat 来循环数组 x ng-repeat指令会反复一个 HTML 元素循环对象: x.name + , + x.country ng-repeat指令用在一个对象数组上ng-init指令为 AngularJS 应用程序定义了初始值创建自定义的指令 .directive以下是几种使用方法: 第1种 第2种 第3种 第4种var app = angular.module(myApp, );app.directive(runoo
11、bDirective, function() return template : 自定义指令! ;);除了 AngularJS 内置的指令外,我们还可以创建自定义指令。你可以使用.directive函数来添加自定义的指令。要调用自定义指令,HTMl 元素上需要添加自定义指令名。使用驼峰法来命名一个指令,runoobDirective, 但在使用它时需要以-分割,runoob-directive:你可以通过以下方式来调用指令:元素名属性类名注释注意:不能几种方法同时使用varapp = angular.module(myApp, );app.directive(runoobDirective,f
12、unction() return restrict :A, template :自定义指令! ;);限制使用:你可以限制你的指令只能通过特定的方式来调用。通过添加restrict属性,并设立只值为A, 来设立指令只能通过属性的方式来调用:restrict值可以是以下几种:E只限元素名使用A只限属性使用C只限类名使用M只限注释使用restrict默认值为EA, 即可以通过元素名和属性名来调用指令。验证用户输入 Email: 不是一个合法的邮箱地址提醒信息会在ng-show属性返回true的情况下显示。假如输入的邮箱不对的,就会显示ng-showspan的中的值 Email:状态myForm.my
13、Address.$valid (假如输入的值是合法的则为 true)myForm.myAddress.$dirty (假如值改变则为 true)myForm.myAddress.$touched (假如通过触屏点击则为 true)ng-model指令可认为应用数据提供状态值(invalid, dirty, touched, error):属性描述$dirty表单有填写记录$valid字段内容合法的$invalid字段内容是非法的$pristine表单没有填写记录API描述angular.lowercase()转换字符串为小写angular.uppercase()转换字符串为大写angular.
14、isString()判断给定的对象是否为字符串,假如是返回 true。angular.isNumber()判断给定的对象是否为数字,假如是返回 true。CSS类input.ng-invalidbackground-color:red; 输入你的名字:ng-model指令基于它们的状态为 HTML 元素提供了 CSS 类编辑文本域,不同状态背景颜色会发送变化。文本域添加了 required 属性,该值是必须的,假如为空则是不合法的。ng-model指令根据表单域的状态添加/移除以下类:ng-empty ng-not-emptyng-touched ng-untouchedng-valid ng
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 2023 AngularJS 笔记
限制150内