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 相关文章推荐
javascript下function声明一些小结
Dec 28 Javascript
没有document.getElementByName方法
Aug 19 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
JS实现的仿淘宝交易倒计时效果
Nov 27 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 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中创建并处理图象
2006/10/09 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
vue bootstrap小例子一枚
2017/06/09 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
Python下的subprocess模块的入门指引
2015/04/16 Python
简单实现Python爬取网络图片
2018/04/01 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
Python reduce函数作用及实例解析
2020/05/08 Python
pandas apply多线程实现代码
2020/08/17 Python
python 常见的排序算法实现汇总
2020/08/21 Python
数学专业毕业生自荐信
2013/11/10 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
教师档案管理制度
2014/01/23 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
干部现实表现材料
2014/02/13 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
2015年体育部工作总结
2015/04/02 职场文书
初二数学教学反思
2016/02/17 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python