【笔记】AngularJs学习笔记[01] 数据绑定

编程轨迹_

已于 2022-06-29 08:14:56 修改

阅读量990

点赞数

分类专栏： javascript 文章标签： angularjs javascript 教程 ng

于 2015-11-16 22:57:02 首次发布

本文链接：https://blog.csdn.net/ImagineCode/article/details/49873521

版权

javascript 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

⭐️ 本文首发自前端修罗场(点击即可加入)，一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。现在加入，即可参与打卡挑战，和一群人一起努力。挑战成功即可获取一次免费的模拟面试机会，进而评估知识点的掌握程度，获得更全面的学习指导意见，不走弯路，不吃亏！

今天开始，我将陆续将 ng 的学习笔记整理出来，还是像在写 backboneJs 时一样，每篇一语o_o.

1、数据绑定

在ng中，数据绑定是指仅声明界面的某一部分映射到js的属性，让他们自动同步。

语法：
ng-model="name" //声明一个叫name的变量，然后可以引用 name

引用：
｛｛name｝｝
例如：
<div ng-model="name">{{name}}</div> //这个字符串会被name的值替换

注意：

ng将模版进行了动态实时创建，用于代替视图，这也区别于在backbonejs中是将数据模版组合在一起来形成view。

这也是ng中最重要的功能之一 ——“动态、实时更新“。

现在我们来说说实现步骤：
1、在html中引用angular.js

<script type="text/javascript" src="js/angular.js"></scrtpt>

2、在某个DOM元素上设置ng-app属性（ng-app属性声明所有被其包含的内容都属于这个angularjs应用——即，只有被具有ng-app属性的DOM元素包含的元素才会受angularjs的影响。

<html ng-app="myapp">

ng 中的数据绑定是一种“双向绑定“，数据模型和视图之间的关系是：数据模型变化能够引起视图的变化。这样一来数据模型无需与视图交互，只需要包含数据和操作视图的方法，而二者的业务逻辑则由控制器 Controller 来完成。

数据模型对象——$scope

$scope 对象是简单的 js 对象，其中属性可被视图访问，也可通控制器交互。

例如：
我们在 PhoneListCtrl 控制器里面初始化了数据模型：

function PhoneListCtrl($scope) {
//$scope是一个作用域
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S."},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet."},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet."}
  ];
}
//那么我们就可以在这个作用下使用上面的phones对象里的属性

AngularJs 数据绑定的最佳实践

用一个例子来说明：

<html ng-app>
<head>
	<title></title>
	<script type="text/javascript" src="js/angular.js"></script>

</head>
<body>
	<div ng-controller="myController">
		<h1>Hello {{clock.now}}</h1>
	</div>
<script type="text/javascript">
	function myController ($scope) {
		$scope.clock={
			now:new Date()
		};
		var updateClock=function(){
			$scope.clock.now=new Date()
		};
		setInterval(function(){
			$scope.$apply(updateClock)
		},1000);
		updateClock();
	};
	//注释：$apply()接收一个function作为参数，会执行该function并触发一轮$disgest循环手动调用$apply(),在Angularjs上下文之外的任何地方修改model就需要通过手动调用$apply()来通知angularjs——即告诉angularjs，你修改了一些model，希望angularjs帮你触发function来作出正确的响应。
</script>
</body>
</html>

这下我们就实现了数据的绑定并实现实时更新。

好吧，今天就到这里吧～状态不是很好。。

每篇一语：

有一段时间没有用ng了，突然觉得知识需要回顾才能保留，所以现在开始写ng的学习笔记。我想这也只是一个开头，一起努力吧～Good Night

这里写图片描述

编程轨迹_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【笔记】AngularJs学习笔记[01] 数据绑定

数据绑定是指仅声明界面的某一部分映射到js的属性，让他们自动同步。语法： //声明一个叫name的变量，然后可以引用 name引用：例如： //这个字符串会被name的值替换注意：ng将模版进行了动态实时创建，用于代替视图，这也区别于在backbonejs中是将数据模版组合在一起来形成view。这也是ng中最重要的功能之一 ——“动态、实时更新“。现在我们来说说实现步骤：1、在ht...
复制链接

扫一扫