一.数据绑定

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. CamanJS – 提供各种图片处理的 JavaScript 库

    CamanJS 是一个基于 Canvas 处理图片的 Javascript 库,结合简单易用的接口和先进高效的图像编辑技术.CamanJS 很容易扩展新的过滤器和插件,并伴随着一系列广泛的图像编辑功能 ...

  2. CSS盒子模型

    2016-10-22 <css入门经典>第6章 1.每个HTML元素对应于一个显示盒子,但不是所有的元素都显示在屏幕上. 2.HTML元素显示为CSS显示盒子的真正方法称为"可视 ...

  3. Android中View的绘制过程 onMeasure方法简述 附有自定义View例子

    Android中View的绘制过程 onMeasure方法简述 附有自定义View例子 Android中View的绘制过程 当Activity获得焦点时,它将被要求绘制自己的布局,Android fr ...

  4. Android开发学习——搭建开发环境

    在学校开课学习了android的一些简单的UI组件,布局,四大组件学习了2个,数据存储及网络通信,都是一些简单的概念,入门而已.许多东西需要自己去学习. 学习一下 Android开发环境的搭建,两种方 ...

  5. Android之Splash页面

    在继上个任务没有解决之后,心灰意冷之后,现在的我在跟着视频学习开发一个手机卫士的软件.在写自己的笔记之前,我先来展示一下我的结果. 下面我来总结一下我跟随视频学习到的知识点: 一.代码的组织结构: 1 ...

  6. ios8版本地图定位注意点

    学习ios地图定位 我先定义一个属性: @property (weak, nonatomic) IBOutlet MKMapView *mapV; 然后在项目运行时初始化该属性一些参数: //设置地图 ...

  7. Android 用Fragment创建一个选项卡

    本文结合之前的动态创建fragment来进行一个实践,来实现用Fragment创建一个选项卡 本文地址:http://www.cnblogs.com/wuyudong/p/5898075.html,转 ...

  8. 自定义Dialog宽度占满屏幕

    一.自定义Dialog继承Dialog public class MyDialog extends Dialog { 二.为Dialog设置样式 在style中建立新样式继承 @android:sty ...

  9. 委托 C#

    这些就是自己的理解. 委托的用处就是把方法传递给其他方法. 1委托的使用更类差不多,也 是需要先定义再实例化. 2Action<T>和Func<T>委托 3多播委托 4.匿名方 ...

  10. Tomcat 的使用学习

    一.Tomcat服务器端口的配置 Tomcat的所有配置都放在conf文件夹之中,里面的server.xml文件是配置的核心文件. 如果想修改Tomcat服务器的启动端口,则可以在server.xml ...