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 相关文章推荐
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
详解vue-cli与webpack结合如何处理静态资源
Sep 19 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 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版)
2012/08/21 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
Java与Python两大幸存者谁更胜一筹呢
2018/04/12 Python
python多任务及返回值的处理方法
2019/01/22 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
网站美工岗位职责
2014/04/02 职场文书
服务标兵事迹材料
2014/05/04 职场文书
杜甫草堂导游词
2015/02/03 职场文书
建议书范文
2015/02/05 职场文书
老龙头导游词
2015/02/11 职场文书
2015年女工委工作总结
2015/07/27 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
vue实现滑动解锁功能
2022/03/03 Vue.js
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python
vscode内网访问服务器的方法
2022/06/28 Servers