AngularJS中的数据绑定

简介:

  AngularJS是Google开发的前端框架,angular.js仅有1500行,致力于减轻开发人员在开发AJAX应用程序中的痛苦。

      AngularJS应用中:view就是DOM,controller就是Javascript类,model储存在对象属性中。

      数据绑定可自动将model和view间的数据同步。Angular实现数据绑定的的方式,可以让我们把model当作程序中唯一可信的数据来源。view始终是model的投影。不管是model或者view发生变化时,会自动反映到对方,数据绑定是双向的。Template是在浏览器中编译的,在编译阶段产生一个实时更新的视图。model成为程序中唯一真实的数据来源。

       Angular的依赖注入只是简单的获取它所需要的东西,而不需要创建它们所依赖的东西。简而言之,依赖注入关系Angular会智能地帮开发者处理好,不需要开发者操心。


数据绑定

     ng-app指明AngularJS作用域。

      {{Angular表达式}}表达式不能有条件分支,循环,抛出异常。

      ng-model对应view中value的model。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
< html >
 
< head >
     < title ></ title >
</ head >
 
< body  ng-app>
     < input  type = "text"  ng-model = "abc"  value = ""  placeholder = "world" >
     < br > hello {{abc||"world"}}!
     < script  src = "http://cdn.bootcss.com/angular.js/1.4.0-rc.1/angular.js" ></ script >
</ body >
 
</ html >

wKiom1VsE0mQdkarAABKQ3Z52Cs580.jpg

       对input text的更改会及时反映到下面。










本文转自 iampomelo 51CTO博客,原文链接:http://blog.51cto.com/iampomelo/1657172,如需转载请自行联系原作者
目录
相关文章
|
2月前
|
JavaScript
AngularJS中的自定义指令:创建与使用技术详解
【4月更文挑战第27天】本文详细介绍了AngularJS中自定义指令的创建与使用。通过定义指令工厂函数并注册到模块中,可以创建自定义指令,如示例中的`myCustomDirective`。指令的属性(如`restrict`、`template`、`replace`)和方法(如`link`、`scope`)可定制其行为。在HTML中使用`restrict`指定的方式(如元素、属性等)来插入指令。遵循命名规范,避免直接DOM操作,使用隔离作用域和关注重用性与扩展性,能有效提升代码质量。自定义指令是AngularJS强大功能之一,有助于实现复杂DOM操作和组件复用。
|
11月前
|
前端开发 JavaScript 开发者
AngularJS 和 React区别
@[TOC](目录) AngularJS 和 React 是两个目前最为流行的前端框架之一。它们有一些共同点,例如都是基于 JavaScript 的开源框架,都能够帮助开发者构建复杂的单页面应用程序等。但也存在一些不同点,如下所述: # 1. 背景: AngularJS 由 Google 的前雇员 Misko Hevery 开发,并于 2010 年首次发布。它是一个基于 JavaScript 的前端框架,旨在简化应用程序的开发过程。React 由 Facebook 的前雇员 Mark Zuckerberg 开发,并于 2013 年首次发布。它是一个基于 JavaScript 的库,可以用于
118 0
|
12月前
|
JavaScript API
angularJS的DOM操作
angularJS的DOM操作
64 0
|
JavaScript
【笔记】AngularJs学习笔记[01] 数据绑定
【笔记】AngularJs学习笔记[01] 数据绑定
107 0
【笔记】AngularJs学习笔记[01] 数据绑定
|
JavaScript
AngularJs-03-数据的双向绑定
<!DOCTYPE html> <html lang="zh" ng-app="myapp"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.
1199 0
|
数据格式 JSON JavaScript
|
JavaScript 前端开发 PHP
|
Web App开发 JavaScript 前端开发