收藏

下载资源加入VIP,免费下载

angularjs笔记.docx

上传人：b****3 文档编号：12898169 上传时间：2023-04-22 格式：DOCX 页数：14 大小：37.65KB

下载相关举报

angularjs笔记.docx_第1页

第1页 / 共14页

angularjs笔记.docx_第2页

第2页 / 共14页

angularjs笔记.docx_第3页

第3页 / 共14页

angularjs笔记.docx_第4页

第4页 / 共14页

angularjs笔记.docx_第5页

第5页 / 共14页

点击查看更多>>

资源描述

angularjs笔记.docx

《angularjs笔记.docx》由会员分享，可在线阅读，更多相关《angularjs笔记.docx（14页珍藏版）》请在冰豆网上搜索。

angularjs笔记.docx

angularjs笔记

AngularJS扩展了HTML

AngularJS通过 ng-directives 扩展了HTML。

ng-app 指令定义一个AngularJS应用程序。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到HTML视图。

AngularJS实例

DOCTYPE html>

名字:

Hello {{name}}

创建自定义的指令

除了AngularJS内置的指令外，我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTMl元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， runoobDirective,但在使用它时需要以 - 分割, runoob-directive:

AngularJS实例

验证用户输入

AngularJS实例

Email:

不是一个合法的邮箱地址

DOCTYPEhtml>

Email:

不是一个合法的邮箱地址

在输入框中输入你的游戏地址，如果不是一个合法的邮箱地址，会弹出提示信息。

应用状态

ng-model 指令可以为应用数据提供状态值（invalid,dirty,touched,error）:

AngularJS实例

Email:

状态

{{myForm.myAddress.$valid}}

{{myForm.myAddress.$dirty}}

{{myForm.myAddress.$touched}}

DOCTYPEhtml>

Email:

编辑邮箱地址，查看状态的改变。

状态

Valid:

{{myForm.myAddress.$valid}}（如果输入的值是合法的则为true）。

Dirty:

{{myForm.myAddress.$dirty}}（如果值改变则为true）。

Touched:

{{myForm.myAddress.$touched}}（如果通过触屏点击则为true）。

根作用域

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有HTML元素中。

$rootScope 可作用于整个应用中。

是各个controller中scope的桥梁。

用rootscope定义的值，可以在各个controller中使用。

AngularJS实例

创建控制器时，将$rootScope作为参数传递，可在应用中使用：

{{lastname}} 家族成员:

{{x}} {{lastname}}

显示效果

AngularJS Filters

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS过滤器

AngularJS过滤器可用于转换数据：

过滤器

描述

currency

格式化数字为货币格式。

filter

从数组项中选择一个子集。

lowercase

格式化字符串为小写。

orderBy

根据某个表达式排列数组。

uppercase

格式化字符串为大写。

表达式中添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。

.

（（下面的两个实例，我们将使用前面章节中提到的person控制器））

uppercase 过滤器将字符串格式化为大写：

AngularJS实例

姓名为 {{lastName|uppercase}}

AngularJS$http

AngularJS$http是一个用于读取web服务器上数据的服务。

$http.get（url）是用于读取服务器数据的函数。

AngularJS实例

{{x.Name+','+x.Country}}

1.ng-show指令

ng-show指令隐藏或显示一个HTML元素。

AngularJS实例

我是可见的。

我是不可见的。

2．ng-hide指令

ng-hide指令用于隐藏或显示HTML元素。

AngularJS实例

我是不可见的。

我是可见的。

AngularJS全局API

AngularJS全局API用于执行常见任务的JavaScript函数集合，如：

∙比较对象

∙迭代对象

∙转换对象

全局API函数使用angular对象进行访问。

以下列出了一些通用的API函数：

API

描述

angular.lowercase（）

转换字符串为小写

angular.uppercase（）

转换字符串为大写

angular.isString（）

判断给定的对象是否为字符串，如果是返回true。

angular.isNumber（）

判断给定的对象是否为数字，如果是返回true。

angular.lowercase（）

实例

{{x1}}

{{x2}}

实例解析

AngularJSng-model指令用于绑定输入元素到模型中。

模型对象有两个属性：

user和email。

我们使用了ng-show指令，color:

red在邮件是$dirty或$invalid才显示。

属性

描述

$dirty

表单有填写记录

$valid

字段内容合法的

$invalid

字段内容是非法的

$pristine

表单没有填写记录

AngularJS参考手册

AngularJS指令

本教程用到的AngularJS指令:

指令

描述

ng-app

定义应用程序的根元素。

ng-bind

绑定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

在应用正要加载时防止其闪烁

ng-controller

定义应用的控制器对象

ng-copy

规定拷贝事件的行为

ng-csp

修改内容的安全策略

ng-cut

规定剪切事件的行为

ng-dblclick

规定双击事件的行为

ng-disabled

规定一个元素是否被禁用

ng-focus

规定聚焦事件的行为

ng-form

指定HTML表单继承控制器表单

ng-hide

隐藏或显示HTML元素

ng-href

为the元素指定链接

如果条件为true移除HTML元素

在应用中包含HTML文件

定义应用的初始化值

定义应用必须使用到的库，如：

规定按下按键事件的行为

规定按下按键事件的行为

规定松开按键事件的行为

将文本转换为列表（数组）

绑定HTML控制器的值到应用数据

ng-model-options

规定如何更新模型

规定按下鼠标按键时的行为

规定鼠标指针穿过元素时的行为

规定鼠标指针离开元素时的行为

规定鼠标指针在指定的元素中移动时的行为

规定鼠标指针位于元素上方时的行为

规定当在元素上松开鼠标按钮时的行为

ng-non-bindable

规定元素或子元素不能绑定数据

指定元素的open属性