AngularJS学习笔记

需积分: 0 15 浏览量更新于2024-01-03 收藏 1.22MB PDF 举报

AngularJS学习笔记 - 进出自由,我的分享本文是关于学习AngularJS的笔记总结，涵盖了以下几个方面的内容：关于AngularJS、关于本文档、开始的例子、依赖注入、作用域、数据绑定与模板、模板中的过滤器、锚点路由、定义模板变量标识标签、AJAX、工具函数和其他服务。首先，我们要了解什么是AngularJS。AngularJS是一个由Google开发的JavaScript框架，用于构建单页面应用程序。它采用了MVC(模型-视图-控制器)的架构模式，使得开发者可以更轻松地开发和维护复杂的Web应用。AngularJS具有依赖注入、双向数据绑定、模块化等特性，使得开发过程更加高效、简化了代码量。在本文档中，我们将介绍AngularJS的一些基本概念和用法。我们将从一个简单的例子开始，以帮助初学者快速理解AngularJS的基本原理。接下来，我们将详细介绍依赖注入的概念和用法，以及作用域的概念。依赖注入使得我们可以更加灵活地管理和使用依赖项，而作用域则确定了变量的可见范围。接下来，我们将学习数据绑定与模板的概念和用法。数据绑定是AngularJS中非常重要的特性，它使得模板能够自动反映数据的变化。我们将学习数据->模板、模板->数据、数据->模板->数据->模板这三种数据绑定方式。我们还将介绍模板的定义、内容渲染控制、节点控制、事件绑定和表单控件等概念和用法。在模板中，我们可以使用过滤器对数据进行排序和过滤。我们将学习排序过滤器orderBy和列表过滤器filter的使用方法，以及一些其他过滤器的用法。我们还将通过例子来演示表头排序和搜索的实现。接下来，我们将学习锚点路由的概念和用法。路由定义了URL与模板和控制器之间的映射关系，参数定义了路由所需的参数，业务处理则定义了在路由变化时需要执行的逻辑。在开发过程中，我们可以使用模板变量标识标签来定义模板中的变量，方便后续使用。同时，我们还可以通过AJAX来进行HTTP请求，以及使用广义回调管理来处理异步操作。我们还将介绍一些实用的工具函数，如上下文绑定、对象处理和类型判定。最后，我们将介绍一些其他服务，如日志和缓存等。总的来说，本文档详细介绍了AngularJS的一些基本概念和用法，帮助读者快速掌握并使用AngularJS开发单页面应用程序。通过学习本文档，读者将可以更加高效地开发和维护复杂的Web应用。

2015/7/24 AngularJS学习笔记进出自由,我的分享

http://www.zouyesheng.com/angular.html 12/72

ngmultiple多选状态

ngreadonly只读状态

注意：上面的这些只是单向绑定，即只是从数据到展示，不能反作用于数据。要双向绑定，还是要

使用 ng-model 。

7.4.事件绑定

事件绑定是模板指令中很好用的一部分。我们可以把相关事件的处理函数直接写在DOM中，这样

做的最大好处就是可以从DOM结构上看出业务处理的形式，你知道当你点击这个节点时哪个函数

被执行了。

ngchange

ngclick

ngdblclick

ngmousedown

ngmouseenter

ngmouseleave

ngmousemove

ngmouseover

ngmouseup

ngsubmit

对于事件对象本身，在函数调用时可以直接使用 $event 进行传递：

7.5.表单控件

表单控件类的模板指令，最大的作用是它预定义了需要绑定的数据的格式。这样，就可以对于既定

的数据进行既定的处理。

7. 5.1. form

form是核心的一个控件。ng对form这个标签作了包装。事实上，ng自己的指令是叫ngform

的，区别在于，form标签不能嵌套，而使用ngform指令就可以做嵌套的表单了。

form的行为中依赖它里面的各个输入控制的状态的，在这里，我们主要关心的是form自己的一些

方法和属性。从ng的角度来说，form标签，是一个模板指令，也创建了一个FormController的

实例。这个实例就提供了相应的属性和方法。同时，它里面的控件也是一个NgModelController实

例。

很重要的一点，form的相关方法要生效，必须为form标签指定name和ngcontroller，并且每

个控件都要绑定一个变量。form和控件的名字，即是$scope中的相关实例的引用变量名。

<span ng-click="see()">{{ test_form.$valid }}</span>

</form>

var TestCtrl = function($scope){

2015/7/24 AngularJS学习笔记进出自由,我的分享

http://www.zouyesheng.com/angular.html 13/72

$scope.see = function(){

console.log($scope.test_form);

console.log($scope.test_form.a);

}

除去对象的方法与属性，form这个标签本身有一些动态类可以使用：

ngvalid当表单验证通过时的设置

nginvalid当表单验证失败时的设置

ngpristine表单的未被动之前拥有

ngdirty表单被动过之后拥有

form对象的属性有：

$pristine表单是否未被动过

$dirty表单是否被动过

$valid表单是否验证通过

$invalid表单是否验证失败

$error表单的验证错误

其中的$error对象包含有所有字段的验证信息，及对相关字段的NgModelController实例的引用。

它的结构是一个对象， key 是失败信息，required，minlength之类的， value 是对应的字段实

例列表。

注意，这里的失败信息是按序列取的一个。比如，如果一个字段既要求required，也要求

minlength，那么当它为空时，$error中只有required的失败信息。只输入一个字符之后，

required条件满足了，才可能有minlength这个失败信息。

<span ng-click="see()">{{ test_form.$error }}</span>

</form>

var TestCtrl = function($scope){

$scope.see = function(){

console.log($scope.test_form.$error);

}

7. 5.2. input

input是数据的最主要入口。ng支持HTML5中的相关属性，同时对旧浏览器也做了兼容性处理。

最重要的，input的规则定义，是所属表单的相关行为的参照（比如表单是否验证成功）。

input控件的相关可用属性为：

name名字

ngmodel绑定的数据

required是否必填

ngrequired是否必填

ngminlength最小长度

2015/7/24 AngularJS学习笔记进出自由,我的分享

http://www.zouyesheng.com/angular.html 15/72

<option value="">可以加这个空值</option>

</select>

</form>

var TestCtrl = function($scope){

$scope.show = function(){

console.log($scope.a);

}

angular.bootstrap(document.documentElement);

</script>

在$scope中，select绑定的变量，其值和普通的value无关，可以是一个对象：

<form name="test_form" ng-controller="TestCtrl"

ng-init="o=[{name: 'AA'}, {name: 'BB'}]; a=o[1];">

</select>

</form>

显示与值分别指定， 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>

</form>

加入分组的， 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>

</form>

分组了还分别指定显示与值的， 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>

</form>

如果参数是对象的话，基本也是一样的，只是把遍历的对象改成 (key, value) ：

</select>

</form>

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

剩余71页未读，继续阅读

郑华滨

粉丝: 28
资源: 296

AngularJS学习笔记 - 进出自由,我的分享

邹业盛分享：AngularJS学习笔记与实战体验

AngularJs学习笔记：组件与工作原理详解

AngularJS学习笔记：基础入门与实践

angularJS-course-projects

AngularJS学习笔记之ng-options指令

angularjs-ts-seed:AngularJS TypeScript应用程序种子

angularjs-presentation--compile-directives:我于 2015 年 1 月 27 日在 Google 蒙特利尔所做的演示文稿的幻灯片和示例文件，由 GDG 蒙特利尔组织

angularjs-to-angular:AngularJS升级到Angular的路径

AngularJs学习笔记1

最新资源