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 textContent与innerText的异同分析
Oct 22 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
js实现文字列表无缝滚动效果
Jun 23 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
javascript数组includes、reduce的基本使用
Jul 02 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读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
utf8的编码算法 转载
2006/12/27 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Python hashlib模块用法实例分析
2018/06/12 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
python 实现压缩和解压缩的示例
2020/09/22 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
成教毕业生自我鉴定
2013/10/23 职场文书
草房子读书笔记
2015/06/29 职场文书
决心书格式及范文
2019/06/24 职场文书
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android