AngularJS 讲解,一 数据绑定

AngularJS 完全使用javascript 编写的客户端技术。通过原生的Model-View-Controller(MVC,模型?视图?控制器)功能增强了HTML。这个选择可以快捷和愉悦地构建出令人印象深刻并且极富表现力的客户端应用。

AngularJS的源码托管在GitHub上,可以免费获取。

数据模型对象(model object)是指$scope对象。

数据绑定:

例子:时钟的实现

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>tabs control</title>
 6     <script type="text/javascript" src="angular.min.js"></script>
 7 </head>
 8 <body>
 9     <div ng-controller="MyController">
10         <h1>clock:{{clock}}</h1>
11     </div>
12     <script type="text/javascript" src="clock.js"></script>
13 </body>
14 </html>

clock.js

 1 (function () {
 2     var app = angular.module("myApp", []);
 3     app.controller(‘MyController‘, function ($scope, $timeout) {
 4         var updateClock = function () {
 5             $scope.clock = new Date();
 6             $timeout(function () {
 7                 updateClock();
 8             }, 1000)
 9         }
10         updateClock();
11     })
12 })();

数据绑定的最佳实践:

由于JavaScript自身的特点,以及它在传递值和引用时的不同处理方式,通常认为,在视图中
通过对象的属性而非对象本身来进行引用绑定,是Angular中的最佳实践。

修改为:

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>tabs control</title>
 6     <script type="text/javascript" src="angular.min.js"></script>
 7 </head>
 8 <body>
 9     <div ng-controller="MyController">
10         <h1>clock:{{clock.now}}</h1>
11     </div>
12     <script type="text/javascript" src="clock.js"></script>
13 </body>
14 </html>

clock.js

 1 (function () {
 2     var app = angular.module("myApp", []);
 3     app.controller(‘MyController‘, function ($scope) {
 4         $scope.clock = {
 5             now: new Date()
 6         }
 7         var updateClock = function () {
 8             $scope.clock.now = new Date();
 9         }
10         setInterval(function () {
11             $scope.$apply(updateClock);
12         }, 1000);
13         updateClock();
14     })
15 })();

这里提到$scope.$apply(),相信大家不知道这个,怎么用和为什么这么用,我刚接触的时候也不明白为什么,然后去查了一下资料,下面大概讲解一个这个$scope.$apply()的用法

1.$scope提供$apply方法传播Model的变化

对于检查绑定的数据到底有没有发生变化,实际上是由$scope.$digest()完成的,但是我们几乎从来就没有直接调用过这个方法,而是调用$scope.$apply()方法,因为在$scope.$apply()方法里面,它会去调用$scope.$digest()方法。$scope.$apply()方法带一个函数或者一个表达式,然后执行它,最后调用$scope.$digest()方法去更新bindings或者watchers。

2.我们什么时候用$apply()

其实我们所有的代码都包在$scope.$apply()里面,像ng−click,controller的初始化,http的回调函数等。在这些情况下,我们不需要自己调用,实际上我们也不能自己调用,否则在apply()方法里面再调用apply()方法会抛出错误。如果我们需要在一个新的执行序列中运行代码时才真正需要用到它,而且当且仅当这个新的执行序列不是被angular JS的库的方法创建的,这个时候我们需要将代码用$scope.$apply()包起来。

时间: 2024-10-29 19:12:22

AngularJS 讲解,一 数据绑定的相关文章

AngularJS入门之数据绑定

本篇我们看一下AngularJS中的数据绑定.虽然我们直到这篇才提到数据绑定,但事实上在前面几篇中我们已经非常熟练的运用AngularJS的数据绑定功能了! ngBind(ng-bind)/ {{ expression }}: 1 <!DOCTYPE > 2 <html> 3 <head> 4 <script src="/Scripts/angular.js"></script> 5 </head> 6 <b

转帖:AngularJS中的数据绑定 post

原文作者:zhangzhaoaaa http://zhangzhaoaaa.iteye.com/blog/2185376 AngularJS中的数据绑定 AngularJS创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM.任何一个独立视图组件中的值都是动态替换的.      ng-app属性声明所有被其包含的内容都属于这个AngularJS应用,这也是我们可以在Web应用中嵌套AngularJS应用的原因.只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响.

AngularJS 讲解,四 Directive

AngularJS  Directive 自定义指令(我最喜欢AngularJs的功能之一) 一:什么时候我们会用到directive 1.使html更具语义化,不用深入了解研究代码的逻辑便可知道大致逻辑. 2.抽象出一个自定义组件,可以重复使用. 二:directive的定义及其使用方法   1.下面是一个directive参数详细模板 angular.module('app',[]);//申明一个调用angularjs块 angular.module('app').directive('di

AngularJS简单的数据绑定

引用angularjs脚本库,在DOM元素上声明ng-app属性.ng-controller控制器,标签上使用ng-model指令.声明"myApp"模块(module)以及"myController"控制器(controller) 例子如下代码: <!doctype html> <html ng-app="myApp"> <head> <meta charset="utf-8">

AngularJS 作用域与数据绑定机制

AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成).与同为 MVC 框架的 Dojo 的定位不同,AngularJS 在功能上更加轻量,而相比于 jQuery,AngularJS 又帮您省去了许多机械的绑定工作.在一些对开发速度要求高,功能模块不需要太丰富的非企业级 WEB 应用上,AngularJS 是一个非常好的选择.AngularJS 最为复杂同

AngularJs学习——实现数据绑定的三种方式

三种方式: 方式一:<h5>{{msg}}</h5>  此方式在页面刷新的时候会闪现{{}} 方式二:<h5 ng-bind="msg"></h5> 方式三:<h5 ng-clock class="ng-clock">{{msg}}</h5> 示例代码: <!DOCTYPE html> <html lang="en" ng-app="myapp&q

AngularJS 讲解,二 模块

AngularJS允许我们使用angular.module()方法来声明模块,这个方法能够接受两个参数,第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表. angular.module('myApp', []);//声明模块(这个方法相当于AngularJS模块的setter方法,是用来定义模块的.) 1)第一个参数:name是模块的名称,字符串变量. 2)第二个参数:  requires包含了一个字符串变量组成的列表,每个元素都是一个模块名称,本模块依赖于这些模块,依赖

AngularJS 讲解,三 过滤器

过滤器用来格式化需要展示给用户的数据.AngularJS有很多实用的内置过滤器,同时也提供了方便的途径可以自己创建过滤器. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器.例如:{{value|lowercase}}//将值转换成小写 在JavaScript代码中可以通过$filter来调用过滤器 例: app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.

AngularJS 数据绑定

AngularJS中的数据绑定,同步了AngularJS表达式和AngularJS数据. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge&q