初识angular体验(四)

亲们,大家好,又到了我们angular每周分享的时间啦,从这周开始呢我准备把angular的基础知识给大家讲解下,欢迎大家随时留言,一起讨论问题!

首先给大家介绍下双向数据绑定,angular的数据绑定是数据模型(model)与视图(view)组件的自动同步。angular的实现方式允许你把应用中的模型看成单一数据源。而视图始终是数据模型的一种展现形式。当模型改变时,视图就能反映这种改变,反之亦然。

下面我们先来看一段代码:

<div ng-app="hd" ng-controller="ctrl">
    <div>{{name}}</div>
</div>
<script>
    var m = angular.module(‘hd‘, []);
    //双向数据绑定
    m.controller(‘ctrl‘, [‘$scope‘, function ($scope) {
        //viewModel
        $scope.name = ‘学习angular‘;//model   server
    }]);
</script>

以上代码的运行结果是学习angular。

解读:这里的"{{}}"相当于"ng-model"指令,其实就是一种绑定,但是仅从这个例子,不能说实现了双向数据绑定。这里是将angular的数据模型(Model)的值绑定到了视图(View)上了。

上面介绍的不能算是双向数据绑定,下面引出真正的双向绑定,那么双向数据绑定有何应用场景,什么样的情况需要数据模型与视图能够相互映射相互影响呢,可能是你没有察觉,现在很多的网站都能看到这种思想带来的极大便捷,比如说表单,在填写或提交表单时,界面上会根据用户的操作做出及时的相应,这就是一种双向数据绑定的最有力的应用场景。

注意:这个例子很好地诠释了什么是双向绑定。

<div ng-app="hd" ng-controller="ctrl">
    <div>{{name}}</div>
    <input type="text" ng-model="name">
</div>
<script>
    var m = angular.module(‘hd‘, []);
    //双向数据绑定
    m.controller(‘ctrl‘, [‘$scope‘, function ($scope) {
        //viewModel
        $scope.name = ‘学习angular‘;//model   server
    }]);
</script>

运行结果如下

首先在html中声明了两个标签:一个输入框input和一个div块级标签。

显然采用了两种绑定的方式:{{}}和ng-model,但是功能都是数据绑定,与js文件中控制器中的$scope.name进行了绑定。所以,通过js中$scope.name的赋值会使得前台Html中input和div同时显示"学习angular"。

在输入框中的任何输入都会及时的反应在下面的div中,这也说明了在Html中改变数据也会及时的映射到后台数据模型,真正的实现了双向数据绑定。

本想在本篇再介绍下angular的其它东西,限于时间和篇幅,留在下篇吧,如果觉得有用,记得点赞哦!!!

时间: 2024-08-07 00:07:00

初识angular体验(四)的相关文章

初识angular体验(三)

哈喽,大家好,不知不觉又过了一个星期,感觉一周一周过得好快啊,上周的分享我们说到了angular的一个主要的特性--双向数据绑定,这周呢,我会把其他特性以代码的形式给大家介绍!! 特性二:模板 在AngularJS中,一个模板就是一个HTML文件.但是HTML的内容扩展了,包含了很多帮助你映射model到view的内容. HTML模板将会被浏览器解析到DOM中.DOM然后成为AngularJS编译器的输入.AngularJS将会遍历DOM模板来生成一些指导,即,directive(指令).所有的

初识angular体验(五)

大家好,好久不见啦,不知道朋友们这段时间学习的怎样了?都有没有提高呢?本人这期间基本把angular基础教程都看了一遍,感觉受益匪浅. 今天给大家说的是一个小知识点--全局变量,所谓全局变量懂JS的人都会明白,但是在angular里如何使用呢?让我们继续往下看. 在angualr里设置全局变量有2个函数,是以定义服务的形式注入进去的,constant()和value(),下面我看来看代码: <div ng-controller="myCtrl1">             

初识angular体验(二)

不知不觉过了一周了,这期间本人也学习了几章angular的实例教程,上次的分享我说到了angular的好处以及我们为什么要用angular.今天我们来说下究竟什么时候用angular是最好的以及举一些简单的小例子. angular是一个MVC框架,最适于开发客户端的单页面应用.它不是个功能库,而是用来开发动态网页的框架.它专注于扩展HTML的功能,提供动态数据绑定,而且它能跟其它框架(如jQuery)合作融洽. 如果你要开发的是单页应用,angular就是你的上上之选.Gmail.Google 

初识angular体验(一)

很久之前就听说了这个前端框架,但是由于自己工作一直没有涉及到相关知识,因此也没有进行学习.这次趁机借着项目需要正好学习AngularJS,顺便复习一下前端的相关知识. Angular是Google的优秀的前端框架,目前已经应用于多个产品. 通过在云课堂的初步学习,简单的了解了下它的使用方法,并且了解了它和jquery的相关区别以及简单的应用,下面听俺一一道来!!!! Angular是一个对前端数据处理的一个JS库,最为核心的是MVVM,模块化,自动化双向数据绑定,语义标签化,依赖注入等. 至于为

capwap学习笔记&mdash;&mdash;初识capwap(四)

2.5.7 CAPWAP传输机制 WTP和AC之间使用标准的UDP客户端/服务器模式来建立通讯. CAPWAP协议支持UDP和UDP-Lite [RFC3828]. ¢ 在IPv4上,CAPWAP控制和数据通道使用UDP.此时CAPWAP报文中的UDP校验和必须设置为0.AC上的CAPWAP控制报文端口为UDP众所周知端口5246,数据报文端口为UDP众所周知端口5247 ,WTP可以随意选择CAPWAP控制和数据端口. ¢ 在IPv6上,CAPWAP控制通道一般使用UDP,而数据通道可以使用U

初识angular.js之爱恨情仇

angular.js Angular.JS 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好. 简单概括:MV*模型的js框架 angular.js之爱恨情仇 爱恋之际 MV*模式 职责清晰.层次分明,例如页面样式变化仅改变View代码,其它层次结构代码无需改动. 数据绑定 数据视图绑定(单.双向数据绑定),无需反锁的改变DOM的值或修

初识Angular

AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入,等等. AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. 通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足: 类库 - 类库是一些函数的集合,它能帮助你写WEB应用.起主导作用的是你的代码,由你来决定何时使

Angular基础(四) 创建Angular应用

应用(Application)是由组件构成的树.树的根部是最顶层的组件即应用本身,启动的时候,浏览器会最先渲染顶层组件,然后根据树形结构,迭代渲染子组件.组件是可装配的,可以互相组合以构成更大的组件.本篇作者介绍了创建一个Angular应用的思路和过程. 一.介绍 要编写Angular应用是一个产品列表界面,先要从组件树的角度分析页面构成: 包含导航条.面包屑.产品列表三部分,产品列表又可进一步分割成单个产品->产品图片.价格.分类等.最终组件的树形结构为: 二.创建过程 a) 首先在app文件

初识 Angular 体会

一句话描述:一个前端的类似MVC框架的JS库 刚接触2天,刚一看感觉和asp.net mvc能实现的功能有点重复. 虽然asp.net的表单验证,Razor语法使其在前端开发有较大提升,但要实现比较高级复杂效果还是要 客户端JS来实现,服务端更多是提供和保存数据的角色. 如果只是简单的CURD应用,用原始Mvc的功能会效率更高也够用. 很多前端js框架注重的是UI表现.而angular注重的是如何管理和表现数据. angular本身不提供样式和控件,是一个管理数据,控制输出的JS库. 虽然很多控