zoukankan      html  css  js  c++  java
  • 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()包起来

  • 相关阅读:
    校园网认证原理
    使VS Code自带的Markdown支持mathjax
    图像处理实用资源
    第一周的python作业
    Python中关于turtle库的笔记
    软件测试入门篇
    如何设计一条好的测试用例打卡第二天
    根据用户登录浅谈软件测试打卡第一天
    Andorid源码系列:View的onTouchEvent()与performClick(),performLongClick()调用时机解析
    论Activity及启动模式,Fragment,Service的使用以及生命周期
  • 原文地址:https://www.cnblogs.com/future-ruby/p/5474906.html
Copyright © 2011-2022 走看看