AngularJS入门基础——作用域

作用域$scope是构成AngularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它是非常重要的。

$scope对像是定义应用业务逻辑,控制器方法和视图属性的地方。作用域是视图和控制器之间的胶水。

作用域是应用状态的基础,基于动态绑定。我们可以依赖视图在修改数据时立刻更新$scope,也可以依赖$scope在起发生变化时立刻重新渲染视图。

将应用的业务逻辑都放在控制器中,而将相关的数据都放在控制器的作用域中,这是非常完美的架构。

$scope对象在AngularJS中充当数据模型,但与传统的数据模型不一样。它并不负责处理和操作数据,它只是视图和HTML之间的桥梁,它是视图和控制器之间的胶水。

<div ng-app="myApp">

<h2>Hello {{} name }</h2>

</div>

<script type="text/javascript">

angular.module("myApp", [])

.run(function($rootScope) {

$rootScope.name = "lin";

});

</script>

作用域能做什么:

第一:提供观察者以监视数据模型的变化。

第二:可以将数据模型的变化通知给整个应用,甚至是系统外的组件。

第三:可以进行嵌套,隔离业务功能和数据。

第四:给表达式提供运算时所需的执行环境。

$scope的生命周期的四个不同阶段:

第一:创建-在创建控制器或指令的时候,AngularJS会用$injector创建一个新的作用域,并在这个新建的控制器或指令运行时将作用域传递进去。

第二:链接-当AngularJS开始运行时,所有的$scope对象都会附加或者链接到视图中,所有创建$scope对象的函数也会将自身附加到视图中。这些作用域将会注册当AngularJS应用上下文中发生变化时需要运行的函数。

第三:当事件循环运行时,它通常执行在顶层$scope对象上(被称作$rootScope),每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化,$scope对象就会触发指定的回调函数。

第四:当一个$scope在视图中不再需要时,这个作用域将会清理和撤销自己。尽管永远不会需要清理作用域(因为AngularJS会为你处理),但是知道是谁创建了这个作用域还是有用的,因为你可以使用这个$scope上叫做$destroy()的方法来清理这个作用域。

时间: 2024-10-14 16:12:16

AngularJS入门基础——作用域的相关文章

AngularJS入门基础PPT(附下载链接)

学习了Angularjs有段时间,自己写了一个PPT,个人认为总结的非常全面,对于入门基础够了. 大致模块有:Angularjs简单介绍,Angularjs特性,hello world,Controller,Directive,service,Filter,Route,form表单验证,Angularjs实现的一些功能组件,新手容易碰到的坑 PPT总共59张,相信看完你便对ng了解很多了~ 下载链接:点此下载 一下只节选了几张,先睹为快吧~

AngularJS入门基础——控制器

AngularJS中的控制器是一个函数,用来向视图的作用域添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. AngularJS同其他JavaScript框架最主要的一个区别就是,控制器并不适合用来执行DOM操作,格式化或数据操作,以及除存储数据模型之外的状态维护操作.它只是视图和$scope之间的桥梁. AngularJS应用的任何的一个部分,无论它渲染在哪个上下文,都有父级作用域存在.对ng-app所处的层级来讲,它的父级作用域就是$rootScope. 有一个例外,在指

AngularJS入门基础系列—目录索引

AngularJS 特性 单页Web应用(SinglePage) 模板(template) Controller(控制器) Route(路由) Directive(指令) Filter(过滤器) AngularJS实现的一些小功能 演示AngularJS简单的双向绑定功能示例 菜单切换示例 TODOLIST的示例 冒泡排序算法视觉化 AngularJS介绍 我对AngularJS框架的理解

AngularJS入门基础——表单验证

<form name="form" novalidata> <label name="email">your email</label> <input type="email" name="email" ng-model="email" placeholder="Email Address"> </form> /*如下是朋友空间

AngularJS入门基础——$provide.decorator 实例讲解

<body ng-controller="OneController"> <script>  var Foobar = function() {      return {        "name": "lin"      }    };    angular.module('myApp', [])    .controller('OneController', function($scope, emailService

AngularJS入门基础——过滤器

在HTML中的模板绑定符号{{ }}内通过 | 符号来调用过滤器 {{ name | uppercase }} 以HTML的形式使用过滤器时,如果需要传递参数给过滤器,只要在过滤器名字后面加冒号即可.如果有多个参数,可以在每个参数后面都加入冒号. 内置的过滤暂时就不记录笔记了,那么接下来我们自己做一个自定义的过滤器 //HTML <div ng-controller="FilterController"> {{ "abkjlsjdljfljsilnsldlkmfl

AngularJS实用基础知识---入门必备

前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. 一.AngularJS指令与表达式 [AngularJS常用指令]1.ng-app:声明Angular所管辖的区域,一般写在body或HTML上,原则上一个页面只有一个.2.ng-model:把元素值(比如输入域的值)绑定到应用程序的变量中.eg:<input type="text"

Angular JS从入门基础 mvc三层架构 常用指令

Angular JS从入门基础  mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 1.常用指令 AngularJS 通过指令扩展了HTML,且通过表达式绑定数据到 HTML.下面我们看一下AngularJS中的常用指令. (1).基本概念 指令:AngularJS中,通过扩展HTML的属性提供功能.所以,ng-

angularjs入门学习【应用剖析中篇】

在上一节讲完了关于应用开发中如数据绑定,添加样式一类的基础操作后,接下来,将在应用中,与控制其有关的一些事件... 一.UI和控制器的分离 我们需要明确控制器在应用中的三个作用: [1]在应用模型中设置初始状态 [2]通过$scope对象向视图(UI模版)暴露函数和模型 [3]监视模型发生变化的其他部分并做出相应的动作 二.发布scope中的数据模型 传递给控制器的$scope对象是一种用来向视图暴露模型数据的机制.在我们构建的应用中可能有其他数据,但是通过scope传递这些属性时,angula