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

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

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

数据绑定:

例子:时钟的实现

 <!DOCTYPE html>

 <html ng-app="myApp">

 <head>

     <meta charset="utf-8" />

     <title>tabs control</title>

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

 </head>

 <body>

     <div ng-controller="MyController">

         <h1>clock:{{clock}}</h1>

     </div>

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

 </body>

 </html>

clock.js

 (function () {

     var app = angular.module("myApp", []);

     app.controller('MyController', function ($scope, $timeout) {

         var updateClock = function () {

             $scope.clock = new Date();

             $timeout(function () {

                 updateClock();

             }, )

         }

         updateClock();

     })

 })();

数据绑定的最佳实践:

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

修改为：

 <!DOCTYPE html>

 <html ng-app="myApp">

 <head>

     <meta charset="utf-8" />

     <title>tabs control</title>

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

 </head>

 <body>

     <div ng-controller="MyController">

         <h1>clock:{{clock.now}}</h1>

     </div>

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

 </body>

 </html>

clock.js

 (function () {

     var app = angular.module("myApp", []);

     app.controller('MyController', function ($scope) {

         $scope.clock = {

             now: new Date()

         }

         var updateClock = function () {

             $scope.clock.now = new Date();

         }

         setInterval(function () {

             $scope.$apply(updateClock);

         }, );

         updateClock();

     })

 })();

这里提到$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()包起来。

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

  1. AngularJS入门之数据绑定

    本篇我们看一下AngularJS中的数据绑定.虽然我们直到这篇才提到数据绑定,但事实上在前面几篇中我们已经非常熟练的运用AngularJS的数据绑定功能了! ngBind(ng-bind)/ {{ e ...

  2. angularJs的一次性数据绑定：双冒号::

    angularJs 中双冒号 ::来实现一次性数据绑定. 原文: https://blog.csdn.net/qianxing111/article/details/79971544 -------- ...

  3. angularjs的双向数据绑定

    数据绑定有两个方向: 数据 → 界面:我们使用scope对象的$watch()方法监听数据的变化,来更新界面. <html> <head> <title>监听数据& ...

  4. angularJs：双向数据绑定

    示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...

  5. AngularJS 讲解,四 Directive

    AngularJS  Directive 自定义指令(我最喜欢AngularJs的功能之一) 一:什么时候我们会用到directive 1.使html更具语义化,不用深入了解研究代码的逻辑便可知道大致 ...

  6. AngularJS之双向数据绑定,class绑定

    之前一直都是用vue来完成一些日常开发,初入AngularJS,记录一些日常开发遇到的问题. 1.双向数据绑定 AngularJS与vue的区别在于,vue采用的是虚拟DOM,模板文件上绑定的一大堆指 ...

  7. AngularJS学习之数据绑定

    既然AngularJS是以数据作为驱动的MVC框架,在上一篇文章中,也介绍了AngularJS如何实现MVC模式的,所有模型里面的数据,都必须经过控制器,才能展示到视图中. 什么是数据绑定 首先来回忆 ...

  8. angularjs中的数据绑定

    这是一个最简单的angularjs的例子,关于数据绑定的,大家可以执行一下,看看效果 <html ng-app> <head> <title>angularjs-i ...

  9. AngularJS 作用域与数据绑定机制

    AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成).与 ...

随机推荐

  1. 【PHP】组合条件搜索SQL

    前端html多个搜索条件组合 后台一个sql语句,很方便和简洁:仅提供思路. 也可以配合着进行分页操作,非常赞~

  2. 详解Android中那些酷炫返回方式的实现

    Android手机都会有返回键,不管是实体键,还是虚拟键.Android用户主要也都是通过这个返回键操控页面返回方式的,不比IOS逼格甚高的只保留一个操作键.这种方式是最普遍的返回方式,还有一种也是比 ...

  3. C#调用Windows CMD命令并，返回输出结果或错误信息

    public static string InvokeExcute(string Command) { Command = Command.Trim().TrimEnd('&') + &quo ...

  4. jmeter ---测试TCP服务器/模拟发送TCP请求

    jmeter测试TCP服务器/模拟发送TCP请求 jmeter测试TCP服务器,使用TCP采样器模拟发送TCP请求. TCP采样器:打开一个到指定服务器的TCP / IP连接,然后发送指定文本并等待响 ...

  5. Ubuntu11.04中如何将pycharm添加到系统的“应用程序”菜单里 （pycharm已成功安装）

    默认排序 Stu.zhouyc   21 人赞同了该回答 tools---->create desktop entry...不是很方便吗? 发布于 2016-04-09 21添加评论 分享 收藏 ...

  6. keystone WSGI流程

    作为OpenStack两种基本的通信方式(RESTful API与消息总线)之中的一个.理解RESTful API的设计思路和运行过程,有助于我们对OpenStack有更好的理解.RESTful仅仅是 ...

  7. atitit.词法分析原理 词法分析器 (Lexer)

    atitit.词法分析原理 词法分析器 (Lexer) 1. 词法分析(英语:lexical analysis)1 2. :实现词法分析程序的常用途径:自动生成,手工生成.[1] 2 2.1. 词法分 ...

  8. 使用 xlue 实现简单 listbox 控件

    基于 XLUE 实现的 listbox 控件 1. 提供增删查接口,将 obj 作为子控件添加到列表: 2. 提供 Attach/Detach 方法,可以将子控件的事件转发出来: 3. 支持滚动条: ...

  9. Java中模拟POST上传文件

    /** * * @param url 请求URL * @param filePath 本地文件地址 * @return */ public static String upload(String ur ...

  10. Eqs - poj 1840(hash)

    题意:对于方程:a1x13+ a2x23+ a3x33+ a4x43+ a5x53=0 ,有xi∈[-50,50], xi != 0, any i∈{1,2,3,4,5}. 现在给出a1,a2,a3, ...