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 相关文章推荐
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
js的回调函数详解
Jan 05 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
javascript canvas封装动态时钟
Sep 30 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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如何把汉字转化为拼音
2015/12/11 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
2018/04/25 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
python删除文件示例分享
2014/01/28 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
python如何提升爬虫效率
2020/09/27 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
公司经理聘任书
2014/03/29 职场文书
调查研究项目计划书
2014/04/29 职场文书
模具专业求职信
2014/06/26 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
合伙购房协议样本
2014/10/06 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书