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 相关文章推荐
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
Nov 20 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 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+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
2013/04/11 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
ES6知识点整理之数组解构和字符串解构的应用示例
2019/04/17 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
python+Django+apache的配置方法详解
2016/06/01 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
python脚本后台执行方式
2019/12/21 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
建议书的格式
2014/05/12 职场文书
2014年生活老师工作总结
2014/12/23 职场文书
先进事迹材料范文
2014/12/29 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书