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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
AngularJS中的promise用法分析
May 19 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
了解javascript中的Dom操作
May 27 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 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
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
详解PHP素材图片上传、下载功能
2019/04/12 PHP
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
mui back 返回刷新页面的实例
2017/12/06 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
国税会议欢迎词
2014/01/16 职场文书
横幅标语大全
2014/06/17 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
2014年售票员工作总结
2014/11/19 职场文书
神龙架导游词
2015/02/11 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
五年级语文教学反思
2016/03/03 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
Python中threading库实现线程锁与释放锁
2021/05/17 Python
python 提取html文本的方法
2021/05/20 Python
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
详解Vue3使用axios的配置教程
2022/04/29 Vue.js
Android存储中最基本的文件存储方式
2022/04/30 Java/Android
mysql中关键词exists的用法实例详解
2022/06/10 MySQL