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 播放器 控制
Jan 22 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
Vue指令指令大全
Feb 09 Javascript
原生JS实现萤火虫效果
Mar 07 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
Ajax常用封装库——Axios的使用
May 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-cs-fixer格式化代码
2020/09/16 PHP
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
Js四则运算函数代码
2012/07/21 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
vue引用外部JS的两种种方法
2020/01/28 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python字符编码判断方法分析
2016/07/01 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
Python Web版语音合成实例详解
2019/07/16 Python
python获取Pandas列名的几种方法
2019/08/07 Python
基于python监控程序是否关闭
2020/01/14 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
Python self用法详解
2020/11/28 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
2014年基建工作总结
2014/12/12 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL