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 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 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获取后台Job管理的实现代码
2011/06/10 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
详解JS函数重载
2014/12/04 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python简单获取自身外网IP的方法
2016/09/18 Python
Python Series从0开始索引的方法
2018/11/06 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
CentOS 7如何实现定时执行python脚本
2020/06/24 Python
详解scrapy内置中间件的顺序
2020/09/28 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
淘宝网店营销策划书
2014/01/11 职场文书
学生鉴定评语大全
2014/05/05 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
初中学校对照检查材料
2014/08/19 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
R9700摩机记
2022/04/05 无线电