argularjs双向数据绑定以及angularjs与mvc

最新推荐文章于 2020-02-02 15:54:41 发布
最新推荐文章于 2020-02-02 15:54:41 发布
阅读量482 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40975386/article/details/80171686
版权

数据绑定是angularjs框架在视图与作用域之间建立的数据同步机制。所谓双向是指界面的操作能够实时同步到作用域中，作用域中的数据修改也能够实时回显到界面中。

ng-model指令

ng-model指令可以建立数据绑定，

<!doctype html >
< html ng-app >
< head >
< meta charset= "utf-8" >
< title >model </ title >
< script src= "e:/angular-1.5.9/angular.js" >
< / script >
</ head >
< body >
< div >用户名： < input type= "text" ng-model= "uname" /></ div >
< div >{{uname}} </ div >
</ body >
</ html >

ng-app用于启动angularjs应用，这时会创建一个名为$rootSocpe的作用域，该作用域为angularjs应用的根作用域

把ng-model指令作为属性添加到input标签中，此时angularjs会在$rootSocpe作用域中添加一个uname属性和input输入框绑定，在input输入内容时，angularjs会自动把输入的内容同步到作用域的uname属性中

{{uname}}为angularjs的表达式形式，可以访问angularjs作用域里的属性。同时angularjs还能够监视作用域中数据的变化，当数据发生变化时，页面显示内容也能够得到实时更新

ng-bind指令

ng-bind指令是和数据绑定相关的另一个指令，作用是实现作用域到视图的单项数据绑定，和表达式功能类似，可用于向界面中输出作用域中的数据如上面的

<div>{{uname}}</div>

可以替换为<div ng-bind="uname"></div>

或者

<div class="ng-bind:uname"></div>

在使用angularjs表达式的{{uname}}时如果遇到网络问题会导致angularjs加载缓慢，会看到游览器直接把angularjs表达式当作字符串渲染到页面中，用户体验不好，所以尽量使用ng-bind指令，他在angularjs没加载完毕的时候不会执行

angularjs中的mvc

angularjs中的mvc分别指模型，视图和控制器。其中angularjs内置的ng-controller指令可以对控制器对象实例化，作为标签的扩展属性使用

<div ng-controller="LoginController">

</div>

AngularJS框架遇到ng-controller指令时会根据ng-controller指令指定的控制器名称查找控制器构造方法，然后使用对应的构造方法实例化控制器对象，并将控制其依赖的对象注入控制器对象中。

在使用ng-controller指令实例化控制器时会产生一个新的作用域对象 同一个页面中可以使用多个ng-controller指令来实例化不同的控制器对象。但需要注意的是，每个控制器对应的作用域对象只能与ng-controller指令所在标签的开始标签与结束标签之间的DOM元素建立数据绑定。下面我编写了一个例子

<!doctype html >
< html ng-app= "app" >
< head >
< meta charset= "utf-8" >
< title >controller </ title >
< script src= "e:/angular-1.5.9/angular.js" > < / script >
</ head >
< body >
< div ng-controller= "UserController" style= "border:#CCC solid lpx;" >
用户名： < input type= "text" ng-model= "name" placeholder= "用户名" />
密码: < input type= "password" ng-model= "pword" placeholder= "密码" />
< button >提交 </ button >
< p >你输入的用户名:{{name}} </ p >
< p >你输入的密码:{{pword}} </ p >
</ div >
< br />
< div ng-controller= "InfoContoller" style= "border:#ccc solid lpx;" >
个人爱好: < input type= "text" ng-model= "love" placeholder= "个人爱好" />
< p >你的个人爱好:{{love}} </ p >
</ div >
< script >
function UserController( $scope, $log){
$scope. name= "admin";
$scope. pword= "123456"
$log. info( "UserController->name:"+ $scope. name);
$log. info( "UserController->pword:"+ $scope. pword);
}
function InfoContoller( $scope, $log){
$scope. love= "足球";
$log. info( "InfoContoller->name:"+ $scope. name);
$log. info( "InfoContoller->pword:"+ $scope. pword);
$log. info( "InfoContoller->love:"+ $scope. love);
}
var app= angular. module( "app",[])
app. controller( "UserController", UserController);
app. controller( "InfoContoller", InfoContoller);
< / script >
</ body >
</ body >
</ html >

打开开发人员工具

本案例中，使用ng-controller指令实例化了两个控制器UserController和InfoContoller，AngularJS框架自动为每个控制器实例创建一个作用域对象，但是每个作用域对象只能与ng-controller所在的开始标签和结束标签之间DOM元素进行数据绑定，通过$log日至服务分别在usercontroller和infocontoller中输出$scope作用域对象的属性。由于用户名和密码输入框只能和usercontroller中的作用域对象进行数据绑定，因此在infocontoller控制器中输出作用域对象的name和pword

属性时输出对象为undefined

AngularJS应用中的DOM事件处理可以在控制器中完成，AngularJS框架为我们提供了一系列的事件绑定指令，这些指令是在原生的JavaScript事件名称前增加ng-前缀

Arsenal1886thegunner
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularJS学习笔记（二）MVC设计模式及数据的双向绑定
kun的博客
12-18 313
1、AngularJS定义： Google AngularJS是一个JS框架，主要思路不是传统的“先查找再操作DOM元素”，而是“以数据为中心”。适用于以数据操作为主的SPA应用。   2、AngularJS与jQuery的关系？   jQuery操作思路：先找元素，再操作元素   $(....).xxx();   AngularJS操作思路：创建业务数据、绑定数据、维护数据   An...
MVVM & MVC & 双向数据绑定
weixin_45656737的博客
10-20 646
MVC和MVVM有什么区别 click 都是为了解决Model和View耦合的问题 1、mvvm各部分的通信是双向的，而mvc各部分通信是单向的； 2、mvvm是真正将页面与数据逻辑分离放到js里去实现，而mvc里面未分离。 MVC：主要应用于后端，前端早期也有应用，有点事分层清晰，缺点是数据流混乱，灵活性带来维护性问题 MVP：MVC的进化，presenter作为中间层负责MV通信，解决了耦合问题，大P层过于臃肿导致维护问题 MVVM：不仅解决了MV耦合问题，还解决了维护两者映射关系的大量繁杂代码和D.
argularJs笔记1
iteye_5605的博客
05-13 178
背景： 【吐槽】开始：Pexip是一家做视频会议的公司，近期好像是要和他们合作推他们的视频会议系统。对于这个公司和这个系统的资料相对都比较少。该公司官网上对于这个系统API或者SDK都几乎没有，目前为止找到的可以操作这个系统的资料还是从他们公司的人手上拿来的。拿着文档发现也不能直接用。需要参考他们搭建好的WebApp。JS一个个的down下来，HTML一个个的down下来。才发现和他们提供的A...
argularJs笔记2
iteye_5605的博客
05-13 127
页面使用argularJs的驱动形式   &lt;!DOCTYPE html&gt; &lt;html ng-app="MyApp"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;数据正向绑定&lt;/title&gt;
anglur 的绑定排序
air_show的博客
01-16 290
var app=angular.module("myApp",[]);         app.controller("myCtrl",function($scope){             //自定义数据             $scope.products=[{                 id:15,                 name:"可乐小饼干",           
angularjs学习笔记之双向数据绑定
10-23
AngularJS在$scope变量中使用脏值检查来实现了数据双向绑定。和Ember.js数据双向绑定中动态设施setter和getter不同，脏治检查允许AngularJS监视那些存在或者不存在的变量。
浅谈AngularJs 双向绑定原理(数据绑定机制)
10-18
总结来说，AngularJS的双向绑定原理依赖于`$scope`、`$watch`、`$digest`循环以及`$apply`方法。通过这些机制，AngularJS能够实时地同步模型和视图，使得开发者可以专注于业务逻辑，而不是繁琐的DOM操作。这种设计...
Avalonjs双向数据绑定与监听的实例代码
10-19
本文通过实例代码给大家介绍了Avalonjs双向数据绑定与监听的实现代码，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
AngularJS 双向数据绑定详解简单实例
10-21
AngularJS 是一款强大的前端JavaScript框架，它的一个核心特性就是双向数据绑定。双向数据绑定使得视图（View）和模型（Model）之间的数据可以实时同步，极大地简化了开发过程，减少了手动操作DOM（文档对象模型）的...
详解Vue双向数据绑定原理解析
08-29
Vue 双向数据绑定原理解析 Vue 双向数据绑定是 Vue 框架中的一种核心机制，实现数据和视图之间的双向绑定。下面是对 Vue 双向数据绑定原理的详细解析。 基本原理 Vue 采用数据劫持结合发布者-订阅者模式的方式，...
Arsenal.js:Javascript 中的 Arma 3 虚拟阿森纳
07-07
阿森纳.js Javascript 中的 Arma 3 虚拟阿森纳 为什么？ 准备可以在游戏中使用大量宝贵的时间。 这是一个概念证明，将进一步用于允许保存回共享游戏服务器数据库。 它将允许玩家在有更多时间时在游戏外调整和配置他们的装载。 下次他们加入时，他们的装载将等待他们。 安装 安装 从 repo root 运行npm install 启动 gulp 以缩小资产并创建本地服务器gulp 在浏览器中查看阿森纳http://0.0.0.0:8000/builds/production/index.html 部署 只需将builds/production文件夹部署到您的网站 特别感谢 来自疯狂，感谢他在数据库和获取资产方面的所有帮助 用于创建资产和令人难以置信的游戏
AngularJS双向数据绑定（angularJS)
YanHSama的博客
07-07 768
一、数据绑定含义： 数据绑定是angularJS框架在视图与作用域之间建立的数据同步机制。所谓“双向”，是指界面的操作能够实时同步到作用域中，作用域的数据修改也能够实时回显到界面中。 二、angularJS应用构成元素 模型、视图、控制器、作用域、指令、表达式、模板 三、AngularJS内置指令（ng-app) 可以出现在任何位置。 作用：（1）启动angularJS框架。 ...
Angular 与Controller 之间的传值
qq_28446167的博客
03-29 786
1.首先你后台得搭建好,底层先写好。我写了一个简单的学生的信息实体。2.Controller 层展示3.前台页面创建JSP 文件后 需要引入angular.js&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;&lt;script src="https://cdn.bootcss.com/angul...
MVC与双向绑定与单向绑定
Ee2222的博客
08-07 2516
上次的笔记：MVC&amp;MVVM MVC 思想（前端） model 只负责存储数据、请求数据、更新数据 view 只负责渲染 HTML（可接受一个 data 来定制数据） controller 负责调度 model 和 view 例子1：https://jsbin.com/yuwopuf/3/edit?js,output 模板代码（也就是类） 一个页面或模块只需要 mod...
AngularJS1.0——基本认识
武汉小喽啰
02-02 2851
1. 简介 AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。 AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等 2.AngularJS四大特征 2.1MVC模式 Angula...
在Eclipse中开发angularjs
diejiankuai3444的博客
02-01 145
当然了，直接用Eclipse开发，完全没问题。我只是需要加个智能感知，安装一个Eclipse插件。 Eclipse菜单-》Help-》Eclipse Marketplace 安装完以后，项目并不能直接支持argularjs语法的智能感知，需要通过右键项目-》Configure-》Convert to AngularJS Project后使用。 enjoy it. 转载于...
Bootstrap和AngularJS整合Spring boot
实践求真知
09-08 6160
一 项目介绍 使用BootStrap制作导航，使用AnglularJS实现导航切换页面路由功能，并演示AngularJS通过$http服务和Spring Boot提供的REST服务，最后演示用指令封装jQuery UI的日期选择器 二 实战 1 新建Spring Boot项目，依赖如下： &lt;dependency&gt; &lt;groupId&gt;org.springfr...
angular6导出Excel文件
weixin_41844140的博客
12-01 3805
参考： https://blog.csdn.net/qq_39252501/article/details/79656317 1. 下载依赖：file-saver和xlsx npm install file-saver --save npm install @type/file-saver --save-dev npm insatll xlsx --save 2. 在组件的ts文件中引入这两个...
angular从json串里获取数据赋值ul和table
c_hjf的博客
10-13 1392
html> html> head> meta charset="UTF-8"> script type="text/javascript" src="angular-1.3.0.js">script> title>title> script type="text/javascript"> var app = angular.module("myApp
vue2 双向数据绑定 与3 区别优劣
最新发布
05-25
Vue 2.x版本中的双向数据绑定是通过`v-model`指令实现的，而Vue 3.x版本中则使用了`v-model`指令和`v-model`修饰符的组合来实现。以下是Vue 2.x和Vue 3.x的双向数据绑定的区别和优劣： 1. 语法差异 在Vue 2.x版本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值