一.数据绑定

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. [Android] 建立与使用Library

    [Android] 建立与使用Library 前言 使用Eclipse开发Android项目时,开发人员可以将可重用的程序代码,封装为Library来提供其他开发人员使用.本篇文章介绍如何将可重用的程 ...

  2. HTML自学基础

    关于自学HTML中遇到的各类细节问题 1.<a>表示链接标签,类似的有<img src>.链接的地址在<base>中填写.<base href="h ...

  3. QRCode.js 生成二维码

    QRCode.js 是一个用于生成二维码图片的插件. github地址 在线实例 实例预览 基础示例 实例预览 API 接口 使用方法 载入 JavaScript 文件 <script src= ...

  4. ImageLightbox.js – 响应式的图片 Lightbox 插件

    ImageLightbox.js 是一款很简洁的用于显示图片灯箱效果(Lightbox)的插件,没有字幕,导航按钮或默认背景.如果默认功能不够用的话,你可以很容易地自定义 JavaScript 函数扩 ...

  5. javascript对象继承详解

    问题 比如我们有一个"动物"对象的构造函数. function animal() { this.type = '动物'; } 还有一个"猫"对象的构造函数. f ...

  6. CSS的盒子模型

    1.边框:包裹内容的容器 统一设置:border: border-width border-style border-color 上:border-top 下:border-bottom 左:bord ...

  7. HTML <b>、 <strong> 、<big>、<small>、<em>、<i>、<sub>和<sup> 标签

    HTML <b> 标签 所有浏览器都支持 <b> 标签. 定义和用法 <b> 标签规定粗体文本. 注释:根据 HTML5 规范,在没有其他合适标签更合适时,才应该把 ...

  8. 简单代码在ABAP中实现声音的播放

    这段代码的功能是在SAP里面实现声音的播放,可以用作程序提醒功能,和SAP里面’噹噹噹’那个声音的意思差不多.将来在项目中遇到客户想要SAP ABAP发出一点声音的时候就可以参考一下这个程序. REP ...

  9. 计算DEM上的Profile图

    #!/usr/bin/env python # -*- coding: utf-8 -*- import sys, gdal, os from gdalconst import GA_ReadOnly ...

  10. Android时区及语言代码

    1. 设置默认时区   PRODUCT_PROPERTY_OVERRIDES += \         persist.sys.timezone=Asia/Shanghai\ 注:搜索“persist ...