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 数据绑定的更多相关文章

  1. 简话Angular 00 为什么要学Angular

    一句话: 现在不学Angular的结局,就和5年前不学JQuery一样! 谁学谁知道,早学早进阶! 1. JQuery vs Javascipt 问两个问题: 1) 你用过JQuery吗?当然! 2) ...

  2. angular和vue双向数据绑定

    angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...

  3. Angular 1与 Angular 2之间的一些差别

    现在在用ng1.5.8做一个项目,ng的优点和特性我就不用多说了,ng1在陆续更新到1.5/1.6后就没再推出新版本了,ng2已经面世测试很久了,如同很多系统和框架一样,每个大的版本更新都会有新特性加 ...

  4. AngularJs angular.injector、angular.module

    angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...

  5. angular.js 的angular.copy 、 angular.extend 、 angular.merge

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 简话ASP.NET Web API

    简话ASP.NET Web API 在vs2012中,我们很容易在根据选择的ASP.NET MVC Web应用程序来新建一个Web API应用,聪明的你一定想见得到,Web API和MVC有着某种联系 ...

  7. Angular - - angular.injector、angular.module

    angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...

  8. 使用Angular CLI生成 Angular 5项目

    如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular- ...

  9. 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 ...

随机推荐

  1. 简单的Django向HTML展示动态图片 案例——小白

    目标:通过Django向HTML传送图片展示 我的天哪,真是膈应人,网上的案例都不适合我,感觉所有的解决办法在我这里都不行. 好吧~ 是我菜,看不懂人家的代码,那句话叫啥来着?一本好经被傻和尚念歪了. ...

  2. SIFT特征原理简析(HELU版)

    SIFT(Scale-Invariant Feature Transform)是一种具有尺度不变性和光照不变性的特征描述子,也同时是一套特征提取的理论,首次由D. G. Lowe于2004年以< ...

  3. 20145212罗天晨 注入shellcode实验及Retuen-to-libc实验

    注入shellcode实验 实验步骤 一.准备一段shellcode 二.设置环境 Bof攻击防御技术 1.从防止注入的角度来看:在编译时,编译器在每次函数调用前后都加入一定的代码,用来设置和检测堆栈 ...

  4. 小K(wifi)插座剖解

    1.主控 AR9331 400MHZ MIPS 24k内核 2.flash:w9425G6JH-5 1352P 6316CF500ZY  RAM 32M

  5. Git 基础笔记整理1

    Git 官网:http://git-scm.com/ git教程1:http://www.yiibai.com/git/home.html git教程2 :http://www.liaoxuefeng ...

  6. C# Byte[] 数组操作

    byte[] Strbyte = Encoding.GetEncoding("big5").GetBytes(str);            if (Strbyte.Length ...

  7. 处理文字基线 文字对不齐 font-size

    这是我无意中发现的,先记录下 比如你在一个h1标签里面添加文字,或者在其他块级标签添加文字,想让他们间隙少一点,(基线影响)可把行高设置为line-height: 1;就达到消除基线的作用. 建议使用 ...

  8. yarn虚拟cpu和虚拟内存

    虚拟cpu 虚拟的cpu代码并发数,如果一个container拥有2个vcpu,那么该container就可以真正的在同一时间运行两个线程,而不是靠切时间片而达到的逻辑并发.所以一般虚拟的cpu需要和 ...

  9. 机器学习 MLIA学习笔记(三)之 KNN(二) Dating可能性实例

    这是个KNN算法的另一实例,计算Dating的可能性. import numpy as np import os import operator import matplotlib import ma ...

  10. python 删除列表中的字典元素

    data={"} ,{"}]} print("before:\n\n",data,"\n\n") temp=- k= for i in da ...