Angular数据绑定的核心:脏检查(通过事件循环检查数据模型的变化)
双向数据绑定:意味着如果视图改变了某个值,数据模型会通过脏检查观察到这个变化,而如果数据模型改变了某个值,视图也会依据变化重新渲染。
模块:
- 模块声明:
angular.module(‘myApp‘, [‘m1‘]);
第一个参数是模块名称,第二个参数是依赖的模块名称。
- 模块获取:
angular.module(‘myApp‘)
scope:$scope对象是定义应用业务逻辑、控制器和视图属性的地方。AngularJS启动并生成视图时,会将根ng-app元素同$rootScope绑定。$rootScope是所有$scope对象的最上层。不要在$rootScope上附加太多业务逻辑。
$rootScope和$scope以及其子$scope有继承关系,所以从最底层的$scope也能获取到父$scope的属性,就好像是自己的一样。
AngularJs应用的模板中使用多种标记,包括:
指令:将DOM元素增强为可复用的DOM组件的属性或元素。
值绑定:模板语法{{}}可以将表达式绑定到视图上。
过滤器:可以在视图中使用的函数,用来进行格式化。
表单控件:用来检验用户输入的控件。
$scope.$watch:监听指定属性的变化
angular.module("myApp", []).controller(‘MyController‘, function($scope, $parse)) { $scope.$watch(‘expr‘ , function(newVal, oldVal, scope){ if(newVal !== oldVal){...} }); }
- ng-app:只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响。
- ng-model:用来做数据双向绑定。
<input ng-model="person.name" type="text"/> <h1>Hello {{person.name}}</h1>
- ng-controller:声明所有被它包含的元素都属于某个控制器。
<div ng-controller="MyController"> <h5>{{clock}}</h5> </div>
function MyController($scope, $timeout){var updateClock = function(){ $scope.clock = new Date(); $timeout(function(){ updateClock(); }, 1000) } updateClock(); }
代码会定时修改界面上的时间。
时间: 2024-10-13 11:30:19