【笔记】AngularJs学习笔记[01] 数据绑定

简介: 【笔记】AngularJs学习笔记[01] 数据绑定

今天开始,我将陆续将ng的学习笔记整理出来,还是像在写backboneJs时一样,每篇一语o_o.

1、数据绑定

在ng中,数据绑定是指仅声明界面的某一部分映射到js的属性,让他们自动同步。

语法:

ng-model=“name” //声明一个叫name的变量,然后可以引用name

引用:

{{name}}

例如:

< div ng-model=“name”>{{name}}</ div>//这个字符串会被name的值替换

注意:

ng将模版进行了动态实时创建,用于代替视图,这也区别于在backbonejs中是将数据模版组合在一起来形成view。

这也是ng中最重要的功能之一 ——“动态、实时更新“。

现在我们来说说实现步骤:

1、在html中引用angular.js

< script type="text/javascript" src="js/angular.js"></ scrtpt>

2、在某个DOM元素上设置ng-app属性(ng-app属性声明所有被其包含的内容都属于这个angularjs应用——即,只有被具有ng-app属性的DOM元素包含的元素才会受angularjs的影响。

< html ng-app="myapp">

ng中的数据绑定是一种“双向绑定“,数据模型和视图之间的关系是:数据模型变化能够引起视图的变化。这样一来数据模型无需与视图交互,只需要包含数据和操作视图的方法,而二者的业务逻辑则由控制器Controller来完成。

数据模型对象——$scope

$scope对象是简单的js对象,其中属性可被视图访问,也可通控制器交互。

例如:

我们在PhoneListCtrl控制器里面初始化了数据模型:

function PhoneListCtrl($scope) {
//$scope是一个作用域
  $scope.phones = [
    {"name": "Nexus S",
     "snippet": "Fast just got faster with Nexus S."},
    {"name": "Motorola XOOM™ with Wi-Fi",
     "snippet": "The Next, Next Generation tablet."},
    {"name": "MOTOROLA XOOM™",
     "snippet": "The Next, Next Generation tablet."}
  ];
}
//那么我们就可以在这个作用下使用上面的phones对象里的属性

AngularJs 数据绑定的最佳实践

用一个例子来说明:

<html ng-app>
<head>
  <title></title>
  <script type="text/javascript" src="js/angular.js"></script>
</head>
<body>
  <div ng-controller="myController">
    <h1>Hello {{clock.now}}</h1>
  </div>
<script type="text/javascript">
  function myController ($scope) {
    $scope.clock={
      now:new Date()
    };
    var updateClock=function(){
      $scope.clock.now=new Date()
    };
    setInterval(function(){
      $scope.$apply(updateClock)
    },1000);
    updateClock();
  };
  //注释:$apply()接收一个function作为参数,会执行该function并触发一轮$disgest循环手动调用$apply(),在Angularjs上下文之外的任何地方修改model就需要通过手动调用$apply()来通知angularjs——即告诉angularjs,你修改了一些model,希望angularjs帮你触发function来作出正确的响应。
</script>
</body>
</html>

这下我们就实现了数据的绑定并实现实时更新。

好吧,今天就到这里吧~状态不是很好。。

每篇一语:

有一段时间没有用ng了,突然觉得知识需要回顾才能保留,所以现在开始写ng的学习笔记。我想这也只是一个开头,一起努力吧~Good Night


相关文章
|
6月前
|
设计模式 前端开发 JavaScript
AngularJS基础知识总结
【5月更文挑战第1天】AngularJS,谷歌收购的JavaScript框架,用于构建动态Web应用,采用MVC模式简化开发。特性包括:模块化代码管理、双向数据绑定、语义化HTML标签和依赖注入。适合单页面应用开发,但不适用于DOM操作密集或高性能需求场景。提供强大工具,提升开发效率和代码可维护性。
51 2
|
6月前
|
JavaScript
AngularJS中的自定义指令:创建与使用技术详解
【4月更文挑战第27天】本文详细介绍了AngularJS中自定义指令的创建与使用。通过定义指令工厂函数并注册到模块中,可以创建自定义指令,如示例中的`myCustomDirective`。指令的属性(如`restrict`、`template`、`replace`)和方法(如`link`、`scope`)可定制其行为。在HTML中使用`restrict`指定的方式(如元素、属性等)来插入指令。遵循命名规范,避免直接DOM操作,使用隔离作用域和关注重用性与扩展性,能有效提升代码质量。自定义指令是AngularJS强大功能之一,有助于实现复杂DOM操作和组件复用。
|
存储 JavaScript 前端开发
AngularJS进阶学习(二)
AngularJS 是一种流行的 JavaScript 框架,用于开发 Web 应用程序。它提供了许多功能,如依赖注入、控制器、指令、服务、过滤器等,使开发人员可以更轻松地构建复杂的 Web 应用程序。在这篇教程中,我们将介绍 AngularJS 的安装、使用、应用场景以及一些代码实例。 # 一、安装 AngularJS 安装 AngularJS 需要一些前置条件,如 Node.js 和 npm。下面是安装 AngularJS 的具体步骤: ## 1. 安装 Node.js 和 npm 在安装 AngularJS 之前,您需要安装 Node.js 和 npm。Node.js 是一个用于在服务
|
设计模式 JavaScript 前端开发
前端框架:第一章:AngularJS
前端框架:第一章:AngularJS
182 0
前端框架:第一章:AngularJS
|
前端开发 JavaScript 开发者
Angularjs进阶笔记(2)-自定义指令中的数据绑定
有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊到底怎么用这个话题。 一. 自定义指令 自定义指令,是Angularjs用来实现组件化的方式,相比于React和Vue的组件化方式,它真的很复杂,自定义指令太重了,它暴露了太多可供定制的参数,以至于普通的开发者完全不知道要用它来做什么而将其束之高阁,毕竟一般的业务逻辑通过controller和service就已经可以完成了。
1188 0
|
Web App开发 JavaScript
Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定
### 一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题。 #### 1.
1391 0
|
Web App开发 JavaScript 前端开发
|
JavaScript 前端开发 缓存