AngularJS模块之$scope

Angular中创建一个模块:

angular.module("myApp",[]).
controller("myController",function("$scope"){
   $scope.name="my name";
})
<div ng-app="myApp">
<div ng-controller="MyController">
<h1>Hello {{ name }}</h1>
</div>
</div>

ng-controller指令为DOM元素创建了一个新的$scope对象,并将它嵌套在$rootScope中,$rootScope相当于最顶层的全局变量。、

$scope的生命周期:

当Angular关心的事件发生在浏览器中时,比如用户在通过ng-model属性监控的输入字段中输入,或者带有ng-click属性的按钮被点击时,Angular的事件循环都会启动。这个事件将在Angular执行上下文中处理。

每当事件被处理时,$scope就会对定义的表达式求值。此时事件循环会启动,并且Angular应用会监控应用程序内的所有对象,脏值检测循环也会运行。

1.创建

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

2.链接

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

这些函数被称为$watch函数,Angular通过这些函数获知何时启动事件循环。

3.更新

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

4.销毁

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

时间: 2024-10-29 03:14:14

AngularJS模块之$scope的相关文章

Angularjs MVC 以及 $scope 作用域 Angularjs 模块 的 run 方法 以及依赖注入中代码压缩问题

Angularjs MVC 以及 $scope 作用域 Angularjs 模块的 run 方法 以及依赖注入中代码压缩问题 1. Angularjs MVCModel:数据模型层View:视图层,负责展示Controller:业务逻辑和控制逻辑优点: 代码模块化 代码逻辑比较清晰.可移值性高,后期维护方便.代码复用,代码规模越来越大的时候,切分职责是大势所趋缺点:运行效率稍微低一些2. Angularjs $scope 作用域1. $scope 多控制器单独作用域<!DOCTYPE html>

AngularJS 模块

模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 你可以通过 AngularJS 的 angular.module 函数来创建模块: <div ng-app="myApp">...</div> <script> var app = angular.module("myApp", []); </script> "myApp" 参数对应执行应

AngularJS 模块&amp; 表单

模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 应用("myApp") 带有控制器 ("myCtrl"): <div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script> var app

2.3了解AngularJS模块和依赖注入

1.模块和依赖注入概述 1.了解模块 AngularJS模块是一种容器,把代码隔离并组织成简洁,整齐,可复用的块. 模块本身不提供直接的功能:包含其他提供功能的对象的实例:控制器,过滤器,服务,动画 可通过定义其提供的对象构建模块.通过依赖注入将模块连接在一起,构建一个完整的应用程序. AngularJS建立在模块原理上.大部分AngularJS提供的功能都内置到ng-*模块中. 2.依赖注入 定义依赖对象并动态地把它注入另一个对象,使得所有的依赖对象所提供的功能都能使用.(提供器 注入器服务)

深入浅出理解AngularJS模块

AngularJS 模块 1.添加控制器 你可以使用 ng-controller 指令来添加应用的控制器: <div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br>姓: <input type="text" ng-model="la

angularjs 模块与控制器 (多个模块module?? 多个控制器controller??)

angularjs 中只能有一个模块module(ng-app=""),一个模块可以有多个控制器(ng-controller="") 自己试验的时候,js跟页面可以写在一块,但是大型项目开发中,最好做到html与js分离,便于以后维护. 下图所示:ng-app只能有一个,一个ng-app 中可以有多个controller ;定义多个ng-app时无意义. 运行效果图如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

1.AngularJS 模块

上一章讲的数据绑定,是把控制器的代码写到一个全局命名空间中定义的函数里: function MyController($scope) { var updateClock = function() { $scope.clock = new Date(); }; setInterval(function() { $scope.$apply(updateClock); }, 1000); updateClock(); }; 在AngularJS 中,模块是定义应用的主要方式,包含了主要的应用代码.一个

AngularJS 模块加载

AngularJS模块可以在被加载和执行之前对其自身进行配置.我们可以在应用的加载阶段应用不同的逻辑组.在模块的加载阶段, AngularJS会在提供者注册和配置的过程中对模块进行配置.在整个AngularJS的工作流中,这个阶段是唯一能够在应用启动前进行修改的部分. angular.module('myApp', []) .config(function($provide) {}); 使用config()函数的语法糖,并在配置阶段执行.例如,我们在某个模块之上创建一个服务或指令时: angul

AngularJS 深入理解 $scope 转载▼

AngularJS 深入理解 $scope 转载▼ (2015-04-07 14:09:50) $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope发生改变时也会立刻重新渲染视图. 有了 $scope 这样一个桥梁,应用的业务代码可以都在 controller 中,而数据都存放在controller 的 $sco