AngularJs - Javascript MVC 框架
在2012年6月google发布了AngularJs 1.0稳定版，
并宣称：AngularJS可以让你扩展HTML的语法，以便清晰、简洁地表示应用程序中的组件，并允许将标准的HTML作为你的模板语言，AngularJS可以通过双向数据绑定自动从拥有JavaScript对 象（模型）的UI（视图）中同步数据。
开始接触AngularJs是在4月份来到新项目组，这时AngularJs还处于0.8未稳定版，项目中已经开始使用了，并且这套框架应用到了项目整个UI端，服务端也是未稳定的web api，真心佩服团队的勇气，对于新技术的热情，幸好大家都能很好的驾驭，这是第一次尝试一个充满未稳定技术的项目。
回到正题，先看一个官方实例：
1 <!doctype html>
2 <html ng-app>
3
4 <head>
5
6 <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
7
8 </head>
9
10 <body>
11
12 Your name: <input type="text" ng-model="yourname" placeholder="World">
13
14 <hr>
15
16 Hello {{yourname || 'World'}}!
17
18 </body>
19
20 </html>
Demo:
注:在输入框中输入任何字符都会立即绑定更新到页面.
- 这里采用ng-model指令（directive）绑定是模型scope属性
yourname。 - 并采用表达式将
yourname绑定到文本信息中。 - 这里只需要任何的dom时间监听，因为AngularJs内置了。
AngularJs程序分为3部分：模板，表现层逻辑，数据（model）。
模板：我们用html，css写的ui视图代码，其中包含AngularJs的指令，表达式，并最终会被AngularJs编译机制编译为附加在dom树上。AngularJs的指令（directive）可以由我们自由扩展。
表现层逻辑：包括应用程序逻辑和行为。用javascript定义作为视图控制器逻辑。在AngularJs作为MVC框架，在控制器中我们无需添加对于dom级的事件监听，这些在AngularJs中已经内置了。在ui节点dom事件发生后AngularJs会自动转到scope上的某个行为（Action）逻辑。
数据：视图对象（viewobject）需要被AngularJs Scope（1.0中作为service出现）引用，可以使任何类型的javascript对象，数组，基本类型，对象。并且AngularJs会自动异步更新模型，即在ui发生改变的时他会自动刷新模型（mode），反之在模型发生改变的时候也会自动刷新ui。在这里我们不需要定义形如getter，setter的一些列方法。
下面是一幅来自官方的视图：
同时AngularJs为我们提供了一些列的有用的service，并允许我们添加自己特定业务的服务service，提供了底层的ajax, 缓存, URL 路由, 浏览器抽象服务，以及这些服务我们可以采用AngularJs的注入机制任意组合。同时AngularJs也是一个高度可测试性的javascript框架，你可以看见在官方的例子中都有带上测试程序，给予BDD（行为驱动）开发框架。
作者：破 狼
出处：http://www.cnblogs.com/whitewolf/
本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-个人独立博客、博客园--破狼和51CTO--破狼。
AngularJs - Javascript MVC 框架的更多相关文章
- 【JavsScript】JavaScript MVC 框架技术选型
你很喜欢Gmail和Trello之类的单页面应用,但是不太确定该从何开始.也许你的JavaScript代码是如此的杂乱无章,以致于你很想在下一个项目上尝试下JavaScript MVC库和框架,却苦于 ...
- 你是否应该使用一个Javascript MVC框架？
你是否应该使用一个Javascript MVC框架?本文摘自smashingmagazine的Journey Through The JavaScript MVC Jungle部分内容,希望对大家有帮 ...
- 12种JavaScript MVC框架之比较
Gordon L. Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember. ...
- 【JavsScript】JavaScript MVC框架PK：Angular、Backbone、CanJS与Ember
摘要:选择JavaScript MVC框架很难.一方面要考虑的因素非常多,另一方面这种框架也非常多,而要从中选择一个合适的,还真得费一番心思.本文对JavaScript MVC框架Angular.Ba ...
- 转：12种JavaScript MVC框架之比较
Gordon L. Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember. ...
- 【转】12 款优秀的 JavaScript MVC 框架评估
JavaScript MVC 框架有很多,不同框架适合于不同项目需求.了解各种框架的性能及优劣有利于我们更加快捷的开发.作者(Gordon L.Hempton)一直在寻求哪种MVC框架最为完美,他将目 ...
- JavaScript MVC框架PK：Angular、Backbone、CanJS与Ember
国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...
- javascript：12种JavaScript MVC框架之比较
Gordon L. Hempton是西雅图的一位黑客和设计师,他花费了几个月的时间研究和比较了12种流行的JavaScript MVC框架,并在博客中总结了每种框架的优缺点,最终的结果是,Ember. ...
- [转]12种JavaScript MVC框架之比较
From : http://www.infoq.com/cn/news/2012/05/js-mvc-framework/ Gordon L. Hempton是西雅图的一位黑客和设计师,他花费了几个月 ...
随机推荐
- CRM上线之路 走上了CRM实施顾问-第12天上班 -第三周
今天是周五,<CRM初期需求说明>是经理们商讨的,总共2张纸,根据两次会议,我写了<CRM需求说明>总共18面. 这是这周的工作汇报,其实,报告是我一天内写出来的,中午饭都没吃 ...
- 用delphi检查网络连接状态3种方式
用delphi检查网络连接状态3种方式 用delphi检查网络连接状态 检测计算机是否联网比较简单的做法可以通过一个 Win32 Internet(WinInet) 函数 InternetCheckC ...
- Modbus TCP和Modbus Rtu协议的区别 转
http://blog.csdn.net/educast/article/details/9177679 Modbus rtu和Modbus tcp两个协议的本质都是MODBUS协议,都是靠MOD ...
- Java嵌入式数据库H2学习总结(一)——H2数据库入门
一.H2数据库介绍 常用的开源数据库有:H2,Derby,HSQLDB,MySQL,PostgreSQL.其中H2和HSQLDB类似,十分适合作为嵌入式数据库使用,而其它的数据库大部分都需要安装独立的 ...
- ASP.NET MVC与Sql Server交互, 插入数据
在"ASP.NET MVC与Sql Server建立连接"中,与Sql Server建立了连接.本篇实践向Sql Server中插入数据. 在数据库帮助类中增加插入数据的方法. p ...
- JavaScript进阶系列07,鼠标事件
鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...
- （转）Java中的守护线程
Java的守护线程与非守护线程 守护线程与非守护线程 最近在看多线程的Timer章节,发现运用到了守护线程,感觉Java的基础知识还是需要补充. Java分为两种线程:用户线程和守护线程 所谓守护 ...
- Oracle初级索引学习总结
前言 索引是常见的数据库对象,建立索引的目的是为了提高记录的检索速度.它的设置好坏,使用是否得当,极大地影响数据库应用程序和Database的性能.虽然有许多资料讲索引的用法,DBA和Develop ...
- AppStore中使用IDFA后提交应用的注意事项
在ios7.0出来以前,我们都是通过wifi的mac来当作IOS设备的唯一标识符.如何在ios下获取设备的MAC,你可以参数这篇文章:获取ios的MAC地址 在没有使用IDFA之前,我们在ios7及以 ...
- Xcode修改项目的Build Location
Xcode默认project通过build输出的目录,存放于目录 /Users/用户名/Library/Developer/Xcode/DerivedData/产品名称-hjwqiconnjhpjle ...