初识angular体验(二)

  不知不觉过了一周了,这期间本人也学习了几章angular的实例教程,上次的分享我说到了angular的好处以及我们为什么要用angular。今天我们来说下究竟什么时候用angular是最好的以及举一些简单的小例子。
  angular是一个MVC框架,最适于开发客户端的单页面应用。它不是个功能库,而是用来开发动态网页的框架。它专注于扩展HTML的功能,提供动态数据绑定,而且它能跟其它框架(如jQuery)合作融洽。
  如果你要开发的是单页应用,angular就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用,都很能发挥angular的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要极高运行速度的应用,就不是angular的用武之地了。
  所说angular不是万能的,在该需要用的时候,我们要合理的运用,并让其发挥其重要作用。
  下面我来举个小例子让大家来看看它的神奇之处!
  特性一:双向数据绑定
  数据绑定是angular最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理,查询和监听DOM。数据绑定能够使代码更少,你可以专注于你的应用。
  我们想象一下Model是你的应用中的简单事实。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的,毫不影响的应用到web应用中。
  传统来说,当model变化了。开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面,model变化驱动了DOM中元素变化,另一方面,DOM元素的变化也会影响到Model。这个在用户互动中更加复杂,因为开发人员需要处理和解析
  这些互动,然后融合到一个model中,并且更新View。这是一个手动的复杂过程,当一个应用非常庞大的时候,将会是一件非常费劲的事情。
  这里肯定有更好的解决方案!那就是angular的双向数据绑定,能够同步DOM和Model等等。

<!doctype html>
<html ng-app="demoApp">
  <head>
    <script src="http://m.cnblogs.com/142260/js/angular.min.js" rel="nofollow"/>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="user.name" placeholder="请输入名字">
      <hr>
      <h1>Hello, {{user.name}}!</h1>
    </div>
  </body>
</html>

  以上代码就可以实现文本框和下面h1标签内容的双向绑定,并且实时更新,是不是很神奇呢?
  好啦,这次的分享就到这里啦,下次分享我会把angular的所有特性都用代码的形式举例出来,然后在把本人所学习的angular以节的形式给大家做一个讲解,希望我的分享对大家能有所帮助,让我们共同提高!!!再见啦!!!

时间: 2024-11-05 16:34:13

初识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的数据绑定是数据模型(model)与视图(view)组件的自动同步.angular的实现方式允许你把应用中的模型看成单一数据源.而视图始终是数据模型的一种展现形式.当模型改变时,视图就能反映这种改变,反之亦然. 下面我们先来看一段代码: <div ng-app="hd" ng-control

初识angular体验(一)

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

Swift初体验(二)

// 函数写法初体验 func getMyName(firstName first:String, lastName last:String) -> String{ //return first + "-" + last return first + last } var myName = getMyName(firstName: "hu", lastName: "mingtao") println("myName = \(myN

初识Swift(二)-数组与数据字典

最近学院发疯,要期末了,却要补一个期中考试,一直在忙,没有继续学下去.郁闷了好几天,今天终于得到一个实习的机会,只能加紧ios的学习,不过,我先学习一下Swift,等到书到了,就开始好好弄一下ios.言归正传,继续Swift数组和数据字典的学习. 不过,到这里,真的发现,Swift有js的身影,比传统语言简单了好多. 数组 定义与初始化 方式一 import Foundation var a1:String[]=[] a1+="aa1" a1+="aa2" a1+=

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

2.5.1 AC发现机制 WTP使用AC发现机制来得知哪些AC是可用的,决定最佳的AC来建立CAPWAP连接. WTP的发现过程是可选的.如果在WTP上静态配置了AC,那么WTP并不需要完成AC的发现过程. WTP首先发送一个 Discovery Request message给受限的广播地址,或者CAPWAP的多播地址(224.0.1.140),或者是预配置的AC的单播地址.在IPV6网络中,由于广播并不存在,因此使用"All ACs multicast address" (FF0X

初识CentOS(二)&mdash;&mdash;获得超级用户(root)权限

为了安全起见,linux对普通用户权限限制较大,但我们平时还是需要超级用户权限的,这类似于windows里的管理员权限.本文简单介绍如何在centos中获取超级用户权限,各linux发行版类似 在登陆界面选择"other"后输入用户名root及密码直接登陆即可.如图: 二.普通用户进入超级用户状态 在终端输入su -,然后输入密码即可,如图:大专栏  初识CentOS(二)--获得超级用户(root)权限34.png" /> 三.以普通用户使用超级用户权限 一些命令的执

Angular基础(二) 组件的使用

? 一.简单操作 a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/[email protected]安装CLI,为CLI的位置设置环境变量,然后就可以全局使用ng命令了. 执行ng new –ng4 angular-hello-world可以创建Angular4项目,会自动生成基础的文件夹和文件,还会自动进行npm i操作,下载并安装所需的依赖. 然后执行ng serve就可以编译并启动这个程序了,但ng并不会自动打开浏览器. b