AngularJs Javascript MVC 框架


Posted in Javascript onJune 20, 2016

在6月google发布了AngularJs 1.0稳定版,

AngularJs Javascript MVC 框架

并宣称: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 Javascript MVC 框架

同时AngularJs为我们提供了一些列的有用的service,并允许我们添加自己特定业务的服务service,提供了底层的ajax, 缓存, URL 路由, 浏览器抽象服务,以及这些服务我们可以采用AngularJs的注入机制任意组合。同时AngularJs也是一个高度可测试性的javascript框架,你可以看见在官方的例子中都有带上测试程序,给予BDD(行为驱动)开发框架。

以上所述是小编给大家介绍的AngularJs Javascript MVC 框架,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript两段代码,两个小技巧
Feb 04 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
如何用RxJS实现Redux Form
Dec 29 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
jQuery 限制输入字符串长度
Jun 20 #Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 #Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 #Javascript
jquery通过name属性取值的简单实现方法
Jun 20 #Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 #Javascript
对jQuary选择器的全面总结
Jun 20 #Javascript
jQuery实现的可编辑表格完整实例
Jun 20 #Javascript
You might like
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
Smarty3配置及入门语法
2017/02/22 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
简单学习vue指令directive
2016/11/03 Javascript
js实现密码强度检验
2017/01/15 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
优化Python代码使其加快作用域内的查找
2015/03/30 Python
探究python中open函数的使用
2016/03/01 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
python实现排序算法解析
2018/09/08 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
Python常用库大全及简要说明
2020/01/17 Python
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
高中地理教学反思
2014/01/29 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
教师师德考核自我评价
2014/09/13 职场文书
买卖合同协议书范本
2014/10/18 职场文书
新郎结婚保证书
2015/02/26 职场文书
物业保安辞职信
2015/05/12 职场文书
同意落户证明
2015/06/19 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python