简话Angular 01 初识Angular 数据绑定
1. Angular有哪些突出优点
1) MVC 基于Html-Javascript
2) 依赖注入
3) 数据双向绑定,响应式页面设计
4) 模块化,自定义指令
2. 简话数据绑定
1) 代码:
<input type="text" ng-model="hello1">
2 <input type="text" ng-model="hello2">
3 <textarea ng-bind="hello1" name="" id="" cols="30" rows="10"></textarea>
4 <span class="bg-danger">{{hello1}} {{hello2}}</span>
2)解释
1 定义一个文本框,并用ng-model绑定到变量hello1
2 定义一个文本框,并用ng-model绑定到变量hello2
3 定义一个输入文本,并用ng-bind绑定到变量hello1, 就是说hello1是什么值,这里就是什么值
4 定义区域,显示hello1 和hello2的值,其实就是文本框1,2的值相加
3) 查看效果: http://jimuyouyou.github.io/angular-bootstrap-rest-seed/examples/angular/1-intro.html
4) 源代码: https://github.com/jimuyouyou/angular-bootstrap-rest-seed
3. 小结
1) Angular的数据绑定ng-model,其实就是定义一个变量,将其绑定到原生html元素
注意: 这是双向绑定,就是说变量值变了,html显示自动更新; html值变了,变量值自动更新
2) ng-bind也可绑定变量,是单向绑定,只用于绑定已有变量,相当于引用,不能更新他的值
3) 变量绑定不需要写一行javascript代码,只是加了ng标签而已
4) 页面会响应式更新,不需要手动javascript操作dom元素
嗯: 很强大,必须用好!
简话Angular 01 初识Angular 数据绑定的更多相关文章
- 简话Angular 00 为什么要学Angular
一句话: 现在不学Angular的结局,就和5年前不学JQuery一样! 谁学谁知道,早学早进阶! 1. JQuery vs Javascipt 问两个问题: 1) 你用过JQuery吗?当然! 2) ...
- angular和vue双向数据绑定
angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...
- Angular 1与 Angular 2之间的一些差别
现在在用ng1.5.8做一个项目,ng的优点和特性我就不用多说了,ng1在陆续更新到1.5/1.6后就没再推出新版本了,ng2已经面世测试很久了,如同很多系统和框架一样,每个大的版本更新都会有新特性加 ...
- AngularJs angular.injector、angular.module
angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...
- angular.js 的angular.copy 、 angular.extend 、 angular.merge
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 简话ASP.NET Web API
简话ASP.NET Web API 在vs2012中,我们很容易在根据选择的ASP.NET MVC Web应用程序来新建一个Web API应用,聪明的你一定想见得到,Web API和MVC有着某种联系 ...
- Angular - - angular.injector、angular.module
angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...
- 使用Angular CLI生成 Angular 5项目
如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular- ...
- Angular 2 to Angular 4 with Angular Material UI Components
Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...
随机推荐
- jQuery API的特点
jQuery API 的特点 版权声明:未经博主授权,严禁转载分享 jQuery API 的三大特点 1. jQuery 对象是一个类数组对象,API自带遍历效果 - 对 jQuery 对象调用一次A ...
- 如何写出安全的 API 接口?接口参数加密签名设计思路
原文链接:http://blog.csdn.net/ma_jiang/article/details/53636840
- 安装使用composer基本流程
composer工作原理: 这里经过几个步骤:1.composer读取composer.json(这个文件手动建立,官网有格式),这个json是在当前执行composer目录的,如果目录下没有这个js ...
- 20145118《Java程序设计》 第9周学习总结
20145118 <Java程序设计>第9周学习总结 教材学习内容总结 1.SUN公司定义了一套Java操作数据库的规范(接口)来简化数据库操作,称之为JDBC.开发人员只需要学习jdbc ...
- [noip模拟题]LGTB 玩THD
LGTB 最近在玩一个类似DOTA 的游戏名叫THD 有一天他在守一座塔,对面的N 个小兵排成一列从近到远站在塔前面每个小兵有一定的血量hi,杀死后有一定的金钱gi 每一秒,他都可以攻击任意一个活着的 ...
- P3709 大爷的字符串题
题意 询问区间众数出现的次数 思路 唯有水题快人心 离散化+莫队 莫队一定要先加后减,有事会出错的 莫队维护区间众数: 维护两个数组,一个数组记录权值为x的出现次数,一个记录出现次数为x的数的个数 a ...
- 高斯消元&&luogu3389
高斯消元(Gauss) 高斯消元和我们做二元一次方程组差不多 流程: 1.把系数和右边的值就是用二维数组存下来->转化成矩阵 我们的目标是把这个矩阵装换成 上三角的形式 对角线系数全部为1,1下 ...
- Java中的this
首先this作为关键字其实是随着对象的创建而产生的,当我们调用对象的一个方法的时候: 例如: A a = new A(); a.f(1) 其实我们可以理解为a.f(a,1) 编译器默默的把所操作的对 ...
- Linux——GRUB简单学习笔记
GRUB的配置文件默认为 :/boot/grub/grub.conf # ls -l /etc/grub.conf GRUB配置选项: default定义缺省启动系统 timeout定义缺省等待时间 ...
- hdu 5671 Matrix 标记。。。有点晕
Matrix Time Limit: 3000/1500 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Problem ...