Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操作。 AngularJS非常小，仅仅有60K，兼容主流浏览器。与 jQuery 配合良好。双向数据绑定可能是AngularJS最酷最有用的特性,将MVC的原理展现地淋漓尽致.

AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。

AngularJS将会遍历DOM模板, 来生成对应的NG指令,全部的指令都负责针对view(即HTML中的ng-model)来设置数据绑定。因此, NG框架是在DOM载入完毕之后, 才開始起作用的.

简单的使用例如以下:

在html中:

<body ng-app="ngApp">

	<div ng-controller="ngCtl">

		<label ng-model="myLabel"></label>

		<input type="text" ng-model="myInput" />

		<button ng-model="myButton" ng-click="btnClicked"></button>

	</div>

</body>

在js中:

// angular app

var app = angular.module("ngApp", [], function(){

    console.log("ng-app : ngApp");

});

// angular controller

app.controller("ngCtl", [ '$scope', function($scope){

    console.log("ng-controller : ngCtl");

    $scope.myLabel = "text for label";

    $scope.myInput = "text for input";

    $scope.btnClicked = function() {

    	console.log("Label is " + $scope.myLabel);

    }

}]);

如上,我们在html中先定义一个angular的app,指定一个angular的controller,则该controller会相应于一个作用域(能够用$scope前缀来指定作用域中的属性和方法等). 则在该ngCtl的作用域内的HTML标签, 其值或者操作都能够通过$scope的方式跟js中的属性和方法进行绑定.

这样, 就实现了NG的双向数据绑定: 即HTML中呈现的view与AngularJS中的数据是一致的. 改动其一, 则相应的还有一端也会相应地发生变化.

这种方式,使用起来真的很方便. 我们仅关心HTML标签的样式, 及其相应在js中angular controller作用域下绑定的属性和方法. 仅此而已, 将众多复杂的DOM操作全都省略掉了.

这种思想,事实上跟jQuery的DOM查询和操作是全然不一样的, 因此也有非常多人建议用AngularJS的时候,不要混合使用jQuery. 当然, 二者各有优劣, 使用哪个就要看自己的选择了.

NG中的app相当于一个模块module, 在每一个app中能够定义多个controller, 每一个controller都会有各自的作用域空间,不会相互干扰.

看下边这段html:

<div ng-app="dataApp">

    单位价格： <input type="number" min=0 ng-model="price" ng-init="price = 299"><br>

    数量： <input type="number" min=0 ng-model="quantity" ng-init="quantity = 1"><br>

    总价： {{ quantity * price }}

</div>

你会惊喜地发现, 甚至不用写一行的JS代码, 就可以完毕计算并在界面展示结果.

即: 在前端html中使用{{ }}括起来的变量, 是跟AngularJS中相应的controller作用域内的属性绑定在一起的. 实际上,{{}}等同于ng-bind指令, 即ng-bind="myData"就能将NG中的myData数据跟前端相应元素绑定在一起.这种话, 能够很方便地做到从NG中获取随意数据并实时展示在页面上了.

另外, $scope对象还提供了一个$apply方法, 用于进行html页面上的更新, 使用方式为:

$scope.$apply(function(){

	$scope.myValue = "NewValue";

});

$scope对象, 我们能够理解为NG框架中的一个作用域对象, 在该作用域内能够做到数据和视图的相互绑定, 同一时候又能与其它$scope对象的作用域隔离开来.

当然, $scope也能够实现继承, 这部分内容在以后接触NG框架中其它对象的时候再分别做记录.

双向数据绑定---AngularJS的基本原理学习的更多相关文章

  1. angularjs中$http、$location、$watch及双向数据绑定学习实现简单登陆验证

    使用$http.$location.$watch及双向数据绑定等实现简单的用户登陆验证,记录备忘: 1.$http模拟从后台获取json格式的数据: 2.$watch实时监控数据变化: 3.$loca ...

  2. AngularJs学习笔记4——四大特性之双向数据绑定

    双向数据绑定 方向1:模型数据(model)绑定到视图(view) 实现方法:①.{{model变量名}}  ②.常用指令(ng-repeat) 方向2:将视图(view)中用户输入的数据绑定到模型数 ...

  3. javascript基础修炼(9)——MVVM中双向数据绑定的基本原理

    开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一. 概述 1.1 MVVM模型 MVVM模型是前端单页面应用中非常重要的模型之一,也是Single Page Appl ...

  4. 《AngularJS权威教程》中关于指令双向数据绑定的理解

    在<AngularJS权威教程>中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具 ...

  5. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

  6. angularJs：双向数据绑定

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

  7. Vue、AngularJS 双向数据绑定解剖

    数据与视图的绑定与同步,最终体现在对数据的读写处理过程中,也就是 Object.defineProperty() 定义的数据 set.get 函数中.Vue 中对于的函数为 defineReactiv ...

  8. vue 双向数据绑定的实现学习（二）- 监听器的实现

    废话:上一篇https://www.cnblogs.com/adouwt/p/9928278.html 提到了vue实现的基本实现原理:Object.defineProperty() -数据劫持 和  ...

  9. vue 双向数据绑定的实现学习（一）

    前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...

随机推荐

  1. 团体天梯赛 L3-001. 凑零钱

    L3-001. 凑零钱 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 韩梅梅喜欢满宇宙到处逛街.现在她逛到了一家火星店里,发现 ...

  2. Java-01背包问题-动态规划-递归和非递归实现

    国际惯例,先上代码,粗略分析: package com.bag; /** * Author: lihao * Date:2017/8/31 * Description: */ public class ...

  3. 恶补一下DP+背包专题(刷刷水题)L2

    开心的金明 题目大意 就是求一定背包容量的最大值 思路 想必大家都知道,一看到这种题目,就会想起01背包 虽然特别简单但是还是讲一下吧 状态设置 由于这题差不多是一个01背包的版子题,那么我们就只需要 ...

  4. UBUNTU命令行下进程查看-终止

    ps ax   显示当前系统进程的列表 ps aux 显示当前系统进程详细列表以及进程用户 如果输出过长,可能添加管道命令 less  如  ps ax|less 查看具体进程,使用 grep命令如  ...

  5. linux2.4内核调度

    进程调度需要兼顾3种进程:交互进程,批处理进程,实时进程,在设计一个进程调度机制时需要考虑具体问题 (1)调度时机? 答:进程在用户空间可以pause()或者让内核设置进程为睡眠状态,以此调度,调度还 ...

  6. Eclipse下搭建Maven框架

    内容中包含 base64string 图片造成字符过多,拒绝显示

  7. Z划分空间

    /* https://blog.csdn.net/fastkeeper/article/details/38905249 https://max.book118.com/html/2017/1007/ ...

  8. JLOI2018 日志

    JLOI2018 今年有幸参加吉林省的省选,考过之后在这里写一下总结和感受. DAY1: t1(chess):首先看到题目,第一想法是暴力,上来直接写了暴力,枚举所有的情况,再在这些情况里找到差值最大 ...

  9. 洛谷——P2626 斐波那契数列（升级版）

    P2626 斐波那契数列(升级版) 题目背景 大家都知道,斐波那契数列是满足如下性质的一个数列: • f(1) = 1 • f(2) = 1 • f(n) = f(n-1) + f(n-2) (n ≥ ...

  10. Java使用HttpURLConnection调用WebService（原始方法）

    说明:使用Java原生的HttpURLConnection调用WebService可以免去引入SOA的框架,比如一些CXF框架等.可以使代码足够精简,比如对于一些只调用一两个接口的,这种方式是最适合的 ...