AngularJS 讲解,一数据绑定

时间 2019-11-26

原文原文链接

AngularJS 彻底使用javascript 编写的客户端技术。经过原生的Model-View-Controller（MVC，模型视图控制器）功能加强了HTML。这个选择能够快捷和愉悦地构建出使人印象深入而且极富表现力的客户端应用。javascript

AngularJS的源码托管在GitHub上，能够免费获取。html

数据模型对象（model object）是指$scope对象。java

数据绑定:app

例子:时钟的实现函数

 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.jsatom

 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 })();

数据绑定的最佳实践:spa

因为JavaScript自身的特色，以及它在传递值和引用时的不一样处理方式，一般认为，在视图中
经过对象的属性而非对象自己来进行引用绑定，是Angular中的最佳实践。code

修改成：xml

 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.jshtm

 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的变化

对于检查绑定的数据到底有没有发生变化，其实是由$

AngularJS 讲解,一 数据绑定

AngularJS 讲解,一数据绑定