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 instanceof 内部机制探析
Oct 15 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
JS实现移动端在线签协议功能
Aug 22 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 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发送与接收流文件的方法
2015/02/11 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
python入门教程 python入门神图一张
2018/03/05 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python中map的基本用法示例
2018/09/10 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
opencv实现图像平移效果
2021/03/24 Python
关于环保的标语
2014/06/13 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
2015新学期家长寄语
2015/02/26 职场文书
2015年测量员工作总结
2015/05/23 职场文书
我的1919观后感
2015/06/03 职场文书
主婚人致辞精选
2015/07/28 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫