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 相关文章推荐
快速排序 php与javascript的不同之处
Feb 22 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 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和XSL stylesheets转换XML文档
2006/10/09 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
php图片添加水印例子
2016/07/20 PHP
jquery div拖动效果示例代码
2013/12/08 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
python中将字典转换成其json字符串
2014/07/16 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Python字典遍历操作实例小结
2019/03/05 Python
python实现简易学生信息管理系统
2020/04/05 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
研发工程师的岗位职责
2013/11/18 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
关于元旦的广播稿
2014/02/16 职场文书
六查六看自查材料
2014/02/17 职场文书
投标担保书范文
2014/04/02 职场文书
毕业论文评语大全
2014/04/29 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
教师调动申请报告
2015/05/18 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
解决Oracle数据库用户密码过期
2022/05/11 Oracle