一.数据绑定

1.简单绑定

下面实现了一个简单的加法运算的绑定,

A.ng-app：表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效

B.ng-models :  用于数据绑定, 也就是两个input的里面输入的信息都会绑定到val1和val2变量里面。

C.{{ FiledName }}: 双括号也是用于数据的绑定.

<!DOCTYPE html>

<html>

<script src="angular.min.js"></script>

<script type="text/javascript">

</script>

<head>

    <div ng-app="">

       <div >

            <input ng-model="val1" type="number" placeholder="input your number"> +

            <input ng-model="val2" type="number" placeholder="input your numer"> =

            <span>{{ val1+val2 ||  }}</span>

        </div>

    </div>

</head>

<body>

</body>

</html>

2.  $scope的使用

上面有提到通过ng-model实现数据的绑定，其实所谓的数据绑定其实就是绑定到了$scope上.下面通过编写SumController方法实现了一个点击submit按钮就计算出两个整数之和.

<!DOCTYPE html>

<html>

<script src="angular.min.js"></script>

<script type="text/javascript">

    function SumController($scope){

         $scope.addTwoNumber = function(){

             $scope.addNumber = $scope.val2+$scope.val1;

         };

     }

</script>

<head>

    <div ng-app="">

       <div ng-controller="SumController" >

            <input ng-model="val1" type="number" placeholder="input your number"> +

            <input ng-model="val2" type="number" placeholder="input your numer">

            <button ng-click="addTwoNumber()">Submit</button>

            <span>{{ addNumber|| }}</span>

        </div>

    </div>

</head>

<body>

</body>

</html>

3.$apply()用法

上面有提到通过ng-model实现数据的绑定，其实所谓的数据绑定其实就是绑定到了$scope上.下面是一个简单的时钟程序，通过setInterval方法实现每过一秒更新clock值，在绑定中我们还是用到了apply方法.

A. setInterval 中调用updateClock()后会发现chrome的console中会每过一秒打印当前时间，可是界面没更新

B. setInterval 中调用$scope.$apply(updateClock)后会发现chrome的console会每过1秒答应一次当前时间，并且界面更新时间

C.为何为这样？其实是调用setInterval方法循环触发updateClock方法与我们上面的通过ng-click的机制不同. ng-click会自动$watch,监控数据变化从而更新界面。而原生JavaScript的setInterval中更改了数据无法监控到，所以要通过$apply来实现。

理解Angular中的$apply()以及$digest()

<!DOCTYPE html>

<html>

<script src="angular.min.js"></script>

<script type="text/javascript">

   function ClockController($scope){

       var updateClock = function(){

             $scope.clock = new Date();
             console.log($scope.clock); //数据观察

       }

       var clockInterval = setInterval(function(){

             // updateClock(); -- 不会更新

             $scope.$apply(updateClock);

       },);

       updateClock();

   }

</script>

<head>

    <div ng-app="">

       <div ng-controller="ClockController" >

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

        </div>

    </div>

</head>

<body>

</body>

</html>

二. 模块化
             做过.net开发的都知道，在开发中我们会声明不同的命名空间和不同类，来实现代码的模块化管理，其实AngularJs同样也提供了类似的方法，我们可以通过ng-app和ng-contrller实现代码的模块化管理.

A.通过angular.module在后台注册一个模块,然后通过app.controller来添加contrller,这里的'SumController'和'TimeController'属于兄弟模块，两则之间的Scope绑定对象互不干扰.

B.一个html页面后台只能注册一个module，如果注册多个会报错.

<!DOCTYPE html>

<html>

<script src="angular.min.js"></script>

<script type="text/javascript">

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

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

         $scope.addTwoNumber = function(){

             $scope.addNumber = $scope.val2+$scope.val1;

         };

     });

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

         $scope.timeTwoNumber = function(){

             $scope.timeNumber = $scope.val2 * $scope.val1;

         };

     });

</script>

<head>

    <div ng-app="app">

       <div ng-controller="SumController" >

            <input ng-model="val1" type="number" placeholder="input your number"> +

            <input ng-model="val2" type="number" placeholder="input your numer">

            <button ng-click="addTwoNumber()">Submit</button>

            <span>{{ addNumber|| }}</span>

        </div>

        <br/>

        <div ng-controller="TimeController">

            <input ng-model="val1" type="number" placeholder="input your number"> *

            <input ng-model="val2" type="number" placeholder="input your numer">

            <button ng-click="timeTwoNumber()">Submit</button>

            <span>{{ timeNumber|| }}</span>

        </div>

    </div>

</head>

<body>

</body>

</html>

AngularJS笔记---数据绑定的更多相关文章

  1. 学习笔记 - 数据绑定之knockout

    参考: http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html http://knockoutjs.com/documentation ...

  2. 10分钟学会AngularJS的数据绑定

     前言:为什么要用AngularJS?  相信用过.NetMVC的人都知道用rezor绑定数据是一件很爽的事情,C#代码直接在前台页面中输出.然后这种比较适用于同步请求.   当我们的项目离不开异步请 ...

  3. AngularJS双向数据绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. AngularJs学习笔记-数据绑定、管道

    数据绑定.管道 (1)数据绑定(Angular中默认是单向绑定) 1.[]方括号 可以用于子组件传值 由于是单向绑定,所以当子组件中的iStars属性发生改变时,不会影响到父组件中product.ra ...

  5. AngularJs 笔记

    初识 directive 指令 ng-app 初始化一个AngularJs应用程序(通过一个值(比如 ng-app="myModule")连接到代码模块.) ng-init 初始化 ...

  6. AngularJS笔记--自定义指令

    在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义.  下面定 ...

  7. AngularJS笔记---注册服务

    在前面的笔记中,了解到AngularJS的后台控制可以在Controller里面实现. 可是如果所有的逻辑代码都写到Controller会显得该Controller过于臃肿. 不方便维护, Angul ...

  8. 02、AngularJs的数据绑定

    我们知道,AngularJs中的数据绑定是双向绑定的,View的改变,会改变Model,Model的改变也会改变View中的值,废话不多说,我们直接上代码. <!DOCTYPE html> ...

  9. AngularJS 的数据绑定

    单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别 ng-bind 单向数据绑定($scope -> view),用于数据显示,简写形式是 {{}}. 1 <span n ...

随机推荐

  1. Xamarin安装和跳坑指南

    安装Checklist 注意:本文只描述安装过程,由于组件的版本更新很快,为保证文章时效性,不提供下载链接,也尽可能不指明具体版本. 安装Visual Studio 2015进行默认安装,除非已经FQ ...

  2. 【HTML5】浅析html使用SSE（Server-Sent Events）连接JSP

    目录结构: // contents structure [-] 关于SSE的一些话 什么是SSE SSE的浏览器支持情况 SSE的工作机制 使用SSE连接JSP文件 HTMl页面 服务器端 错误 错误 ...

  3. 【web前端优化之图片模糊到清晰】看我QQ空间如何显示相片

    前言 此篇文章估计不会太长,有移除首页的风险,但是老夫(称老夫是因为我们真正的叶小钗其实都100多岁啦)是不会怕滴.所以,我来了哟! 题外话:今天我们一起还看了一道前端的面试题,而后我本来还想多找几道 ...

  4. JavaScript基础20——element对象

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 深入理解javascript---命名函数表达式

    简单的说,命名函数表达式只有一个用户,那就是在Debug或者Profiler分析的时候来描述函数的名称,也可以使用函数名实现递归,但很快你就会发现其实是不切实际的.当然,如果你不关注调试,那就没什么可 ...

  6. linux集群运维工具:clustershell和pssh

    由于需要安装hadoop集群,有10台机器需要安装,一开始打算用SCP复制,后来觉得不可接受(实际现场可能数倍的机器集群,就是10台也不想干).后来在网上找了,发现了clustershell和pssh ...

  7. 国内第一篇详细讲解hadoop2的automatic HA+Federation+Yarn配置的教程

    前言 hadoop是分布式系统,运行在linux之上,配置起来相对复杂.对于hadoop1,很多同学就因为不能搭建正确的运行环境,导致学习兴趣锐减.不过,我有免费的学习视频下载,请点击这里. hado ...

  8. 教新手一步步解决：Plugin is too old, please update to a more recent version, or set ANDROID_DAILY_OVERRIDE environment variable to和更新gradle问题

    android studio出现问题:Plugin is too old, please update to a more recent version, or set ANDROID_DAILY_O ...

  9. android post带数据请求方式，传递的数据格式包括json和map

    如下: public static String httpPost(String url, String json) { try { URL u = new URL(url); HttpURLConn ...

  10. WPExpress78_update 离线包

    http://115.com/lb/5lb7rnbr#Windows Phone SDK update for WP 7.8115网盘礼包码:5lb7rnbr 使用/layout下载的,相信很多朋友已 ...