AngularJs最佳实践二----数据绑定

在我们传统的web框架中,如Rails,Controller混合了来自model的数据并且糅合在模板里成为一个view呈现给用户。这种混合风格会导致single-way-view。视图只能反映在视图呈现的时候的model数据。当然也有写框架有望实现视图和模型的自动数据绑定。

AngularJs 采用了一种不同方式,即不是将数据混入模板然后替换Dom元素。AngularJs创建live模板作为视图。视图的独立组件被动态内插值替换,这个特征可能是AngularJs最重要的一个使得我们不用写一行JavaScript就完成了Hello world应用。

只需要包括Angularjs源到我们的html文件并且在Dom元素上设置一个ng-app特性就完成了一个应用。ng-app特性表面包含在特性之内的所有东西都属于这个Angularjs应用,这就是我们为什么能够嵌入一个Angular应用到另一个web app的缘由。

视图被修改就是变量被值替换,比如有一个name变量的值是soderberg,那么视图上“Hello {{name}}” 就返回“ Hello soderberg”。

数据的自动绑定机制给了我们映射视图和模型状态的能力,任何时候模型修改会直接反映到视图上无需写任何自定义js代码即能工作。是不是很神奇?

在MVC的世界里,控制器不必关注视图的混合呈现,这也本质上消除了分离view和controller逻辑的关注,使得代码可测试并令人愉快。

视图不需要知道如何保存对象-它只需要知道如何显示对象,同时,模型也不需要跟视图交互-它只需要包含处理视图的方法和数据,控制器的职责则是放置处理逻辑将视图和模型绑定。一旦Angularjs值可能发生改变,它就会调用$digest(),并且有一个dirty checking的过程,dirty checking是一种针对model发生变化检测的有效手机,每当值有变化,Angularjs就会在内部循环事件进行dirty check以保持所有的model状态一致。

简单数据绑定

回顾我们刚才写的代码,我们将name特性绑定到输入字段使用的是AngularJs的指令ng-model,它被包含在模型的对象里即$scope。这也就是说无论输入任何值都能直接反映到模型对象中。$scope对象就是一个javascript对象,有一些可用的属性用于视图和控制器的交互。

<!DOCTYPE html>
<html ng-app>
<head lang="en">
    <meta charset="UTF-8">
    <title>Simple app</title>
    <script src="https://cdn.bootcss.com/angular.js/1.2.6/angular.js"></script>
   <script src="HelloWorld.js"></script>
</head>
<body ng-controller="myController">
<input ng-model="person.name" type="text" placeholder="Your name">
<h1>{{clock}}</h1>
</body>
</html>
function myController($scope){
    var updateClock=function()
    {
        $scope.clock=new Date();
    }
    setInterval(function(){
        $scope.$apply(updateClock);
    },1000);
    updateClock();
};

  

最好的数据绑定是我们能够使用javascript引用而非原始对象。clock改为clock.now,控制器代码如下:

function myController($scope){
    $scope.clock={now:new Date()};
    var updateClock=function()
    {
        $scope.clock.now=new Date();
    }
    setInterval(function(){
        $scope.$apply(updateClock);
    },1000);
    updateClock();
};

  

时间: 2024-10-06 10:13:25

AngularJs最佳实践二----数据绑定的相关文章

AngularJS 最佳实践

AngularJS 最佳实践 转载:http://www.lovelucy.info/angularjs-best-practices.html

Asp.NetCore程序发布到CentOs(含安装部署netcore)--最佳实践(二)

原文:Asp.NetCore程序发布到CentOs(含安装部署netcore)--最佳实践(二) Asp.NetCore程序发布到CentOs(含安装部署netcore)--最佳实践(一) 接上一篇 3. Nginx配置反向代理 3.1 cnetos 安装nginx 首先,我们需要在服务器上安装Nginx.参考网址 3.1.1:添加Nginx存储库 要添加CentOS 7 EPEL仓库,请打开终端并使用以下命令: sudo yum install epel-release EPEL的全称叫 Ex

领域驱动设计之单元测试最佳实践(二)

领域驱动设计之单元测试最佳实践(一) 介绍完了DDD案例,我们终于可以进入主题了,本方案的测试代码基于Xunit编写,断言组件采用了FluentAssertions,类似的组件还有Shouldly.另外本案例使用了Code Contracts for .NET,如果不安装此插件,可能有个别测试不能正确Pass. 为了实现目标中的第二点:"尽量不Mock,包括数据库读取部分”,我尝试过3种方案: 1.测试代码连接真实数据库,只需要将测试数据库配置到测试项目中的web.config中,即可达到这一目

AngularJs最佳实践三----模块

在前面的代码里,我们将功能代码放在全局的命名空间里可不是个好主意,这可能会引起很难调试的冲突还会浪费宝贵的开发时间.你可能已经猜到了,有效的用于最终产品的代码会是封装我们的功能到一个单元这个概念被称为module(模块),模块是定义AngularJs应用的主要方式.app的模块里我们将包含所有的成许代码.一个应用keyi包含几个模块,每一个模块会包含特定功能的代码.使用模块带来的好处显而易见: 保持全局命名空间干净 测试更容易编写 程序之间容易共享代码 以任意顺序载入代码的不同部分 模块的声明格

AngularJS最佳实践: 请小心使用 ng-repeat 中的 $index

"有客户投诉,说在删除指定的某条记录时,结果删掉的却是另外一条记录!" 看起来是个很严重的BUG. 有一次我们在工作中碰到了这个问题. 要定位这个BUG非常麻烦, 因为客户也不清楚如何重现这个问题. 后来发现这个Bug是由于在 ng-repeat 中使用了 $index 引发的.下面一起来看看这个错误是如何引发的, 以及如何避免这种bug产生,然后说说我们从中得到的经验和教训. 一个简单动作(action)的列表 先来看看一个完整有效的ng-repeat示例. <ul ng-co

Angularjs最佳实践一----Angularjs基础

用这个客户端发布博客貌似没有摘要,困惑中. 浏览器是如何得到网页的呢? 让我们把因特网想象成一个邮局,当你要发信给你的朋友,首先你要在一张纸上写下文字,然后信封上写你朋友的地址,把信装入信封.再交给邮局,邮箱分检员会根据邮政编码和地址来寻找你朋友住的位置.如果他住在一个很大的社区,邮局服务人员会将信给前台由社区人员按照公寓分类. 因特网以类似的方式工作,只不过不再是一个个由街道连接的房子或公寓,而是通过路由和线缆连接的一群计算机,每台计算都有一个唯一的地址来告诉网络如何到它那儿. 就如同很多栋公

Zabbix最佳实践二:快速入门

一.登录与配置用户 1.1 登陆 这是Zabbix的"欢迎"界面.输入用户名 Admin 以及密码 zabbix 以作为 Zabbix超级用户登陆. 登陆后,你将会在页面右下角看到"以管理员连接(Connected as Admin)".同时会获得访问配置(Configuration) 和 管理(Administration) 菜单的权限. 点击右上角的用户头像,将显示语言设置为中文. 1.2 增加用户 可以在管理(Administration) → 用户(User

领域驱动设计之单元测试最佳实践(一)

领域驱动设计之单元测试最佳实践(二) 一直以来,我试图找到一种有效的单元测试模式,使得“单元测试”真正能够在团队中流行起来,让单元测试不再是走过场,而是让单元测试切切实实成为提高代码质量的途径. 本文将描述一种以EF Code First模式实现的领域驱动项目实施单元测试的方案. 在描述这一方案之前,让我们看看这一最佳实践源于何种考虑和最终实现的目标: 1.以MVC项目为例,如果将单元测试的重心放在如何测试一个Controller或Action将收效甚微,原因有二: 从原则上讲Controlle

memcache的最佳实践方案

1.memcached的基本设置 1)启动Memcache的服务器端 # /usr/local/bin/memcached -d -m 10 -u root -l 192.168.0.200 -p 12000 -c 256 -P /tmp/memcached.pid -d选项是启动一个守护进程, -m是分配给Memcache使用的内存数量,单位是MB,我这里是10MB, -u是运行Memcache的用户,我这里是root, -l是监听的服务器IP地址,如果有多个地址的话,我这里指定了服务器的IP