AngularJS学习指南：从入门到深入

需积分: 9 101 浏览量更新于2024-07-22 5 收藏 2.49MB PDF 举报

本篇文章是一份详尽的AngularJS学习笔记，涵盖了AngularJS的多个核心概念和技术点，适合初学者和进阶开发者参考。以下是部分内容的详细解读： 1. **AngularJS介绍**：AngularJS是Google开发的一款强大的前端JavaScript框架，用于构建动态Web应用，其特点是采用了MVVM（Model-View-ViewModel）架构，强调双向数据绑定和依赖注入。 2. **依赖注入**：AngularJS的核心特性之一，它简化了模块之间的通信，使得代码更加模块化和可测试。依赖注入允许你声明需要的服务或函数，框架会自动处理这些依赖关系的创建和传递。 3. **作用域与数据绑定**：AngularJS有两层作用域——$rootScope和自定义作用域。数据绑定是Angular的核心，通过`ng-model`指令实现在视图和控制器之间实时的数据同步。 4. **模板功能**：包括定义模板内容、内容渲染控制、节点操作（如ng-show/hide）、事件绑定和表单处理。此外，还介绍了内置的过滤器，如排序和过滤列表，以及如何在模板中使用它们。 5. **路由管理**：Angular的路由功能支持锚点路由，包括定义路由、参数处理和业务逻辑的整合。 6. **模块和服务**：讲解了自定义模块和服务的概念、创建和使用，以及Angular的ngResource模块，提供更高级别的RESTful接口操作。 7. **指令开发**：自定义指令是Angular的强大功能，包括指令的定义、执行过程、属性值类型的处理以及指令内部方法的使用。 8. **与其他框架的集成**：文章也讨论了Angular与其他JavaScript库（如jQuery和Dojo）的配合使用，以便在实际项目中灵活应用。 9. **自定义过滤器和指令**：深入讲解了自定义过滤器的创建、指令的生命周期方法以及相关的API细节，提供实战示例以帮助理解。通过这份学习笔记，读者可以系统地了解AngularJS的基础结构、核心概念以及高级特性，对于提升AngularJS的开发技能具有较高的参考价值。随着笔记的深入，从基础到进阶，适合不同阶段的学习者进行逐步掌握和实践。

2015/2/27 AngularJS学习笔记 - 进出自由,我的分享

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

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/2/27 AngularJS学习笔记 - 进出自由,我的分享

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

$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/2/27 AngularJS学习笔记 - 进出自由,我的分享

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

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

剩余70页未读，继续阅读

king6603

粉丝: 12
资源: 11

AngularJS学习指南：从入门到深入

angularJs个人学习笔记及源码

angularjs学习笔记

angurlarjs学习笔记

算法个人学习笔记pdf

envi学习笔记pdf版

CAN 总线学习笔记

超星学习通怎么查看学习笔记？

机器学习学习笔记.pdf

pyton学习笔记 pdf

go 学习笔记 书签

最新资源

go 学习笔记书签