AngularJs Javascript MVC 框架
在6月google发布了angularjs 1.0稳定版,
并宣称:angularjs可以让你扩展html的语法,以便清晰、简洁地表示应用程序中的组件,并允许将标准的html作为你的模板语言,angularjs可以通过双向数据绑定自动从拥有javascript对 象(模型)的ui(视图)中同步数据。
开始接触angularjs是在4月份来到新项目组,这时angularjs还处于0.8未稳定版,项目中已经开始使用了,并且这套框架应用到了项目整个ui端,服务端也是未稳定的web api,真心佩服团队的勇气,对于新技术的热情,幸好大家都能很好的驾驭,这是第一次尝试一个充满未稳定技术的项目。
回到正题,先看一个官方实例:
<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-...min.js"></script> </head> <body> your name: <input type="text" ng-model="yourname" placeholder="world"> <hr> hello {{yourname || 'world'}}! </body> </html>
demo:
your name:
--------------------------------------------------------------------------------
hello world!
注:在输入框中输入任何字符都会立即绑定更新到页面.
1.这里采用ng-model指令(directive)绑定是模型scope属性yourname。
2.并采用表达式将yourname绑定到文本信息中。
3.这里只需要任何的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(行为驱动)开发框架。
以上所述是小编给大家介绍的angularjs javascript mvc 框架,希望对大家有所帮助
推荐阅读
-
学习RxJS之JavaScript框架Cycle.js
-
一步步教你整合SSM框架(Spring MVC+Spring+MyBatis)详细教程
-
Spring mvc整合tiles框架的简单入门教程(maven)
-
spring mvc 组合mybatis框架实例详解
-
Java框架搭建之Maven、Mybatis、Spring MVC整合搭建(图文)
-
常见的JavaScript框架和库解析
-
php开发框架有哪些(javascript和java的区别)
-
ABP框架中导航菜单的使用及JavaScript API获取菜单的方法
-
C#语言MVC框架Aspose.Cells控件导出Excel表数据
-
mvc架构图用什么画(mvc框架图书馆管理系统jdbc)