AngularJS学习笔记-2

最新推荐文章于 2025-09-10 18:00:18 发布

转载最新推荐文章于 2025-09-10 18:00:18 发布 · 202 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kakaren/p/8586389.html

文章标签：

#测试 #javascript #前端 #ViewUI

本文介绍了AngularJS中的关键概念，包括$scope的作用与使用、Controller的设计原则、AngularJS提供的各种模块及其功能，还涉及了动画和过滤器的基本用法。

1.$scope

$scope是一个POJO(Plain Old JavaScript Object)
$scope提供了一些工具方法$watch()/$apply()
$scope是表达式的执行环境（即作用域）
$scope是一个树形结构，与DOM标签平行
子$scope对象会继承父$scope上的属性和方法
每一个angular应用只有一个根$scope对象（一般位于ng-app上）
$scope可以不仅是MVC的基础，也是后面实现双向数据绑定的基础
可以用angular.element($0).scope()进行调试

2.Controller使用过程中的注意点
不要试图去复用Controller，一个控制器一般只负责一小块视图
不要在Controller中操作DOM,这不是控制器的职责
不要在Controller里面做数据过滤操作，ng有$filter服务
不要在Controller里面做数据格式化，ng有很好用的表单控件
一般来说，Controller是不会互相调用的，控制器之间的交互会通过事件进行

3.模块

ng
AngularJS的默认模块，包含AngularJS的所有核心组件。
ngRoute

AngularJS是一套前端的MVC框架。那么，为了实现视图的中转，肯定会涉及到路由的概念。ngRoute即是AngularJS的路由模块。

ngAnimate
AngularJS的动画模块，使用ngAnimate各种核心指令能为你的应用程序提供动画效果。动画可使用css或者JavaScript回调函数。

ngAria
使用ngaria为指令注入共同的可达性属性和提高残疾人用户体验。

ngResource
当查询和发送数据到一个REST 服务器时，使用ngResource模块。

ngCookies
ngCookies模块提供了一个方便的包用于读取和写入浏览器的cookies。

ngTouch
ngRoute模块提供触摸事件，方便的应用于移动触摸设备。它的实现是实现是基于jQuery移动触摸事件处理。

ngSanitize
ngSanitize模块可安全地在你的应用程序中解析和操作HTML数据。

ngMessages
AngularJS表单验证模块。ngMessages模块完美的实现了很多表单验证的常用功能，简化你的开发流程。

4.AngularJS 动画

需在应用中使用模型 ngAnimate：
<body ng-app="ngAnimate">
如果我们应用已经设置了应用名，可以把 ngAnimate 直接添加在模型中：

ngAnimate 模型可以添加或移除 class 。
ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件
，类似隐藏显示 HTML 元素，如果事件发生 ngAnimate 就会使用预定义的 class 来
设置 HTML 元素的动画。
AngularJS 添加/移除 class 的指令:
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch

ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。
其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。
当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类。

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