AngularJs Javascript MVC 框架

 更新时间:2016年06月20日 10:44:41   作者:破狼  
这篇文章主要介绍了AngularJs Javascript MVC 框架的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

在6月google发布了AngularJs 1.0稳定版,

并宣称: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为我们提供了一些列的有用的service,并允许我们添加自己特定业务的服务service,提供了底层的ajax, 缓存, URL 路由, 浏览器抽象服务,以及这些服务我们可以采用AngularJs的注入机制任意组合。同时AngularJs也是一个高度可测试性的javascript框架,你可以看见在官方的例子中都有带上测试程序,给予BDD(行为驱动)开发框架。

以上所述是小编给大家介绍的AngularJs Javascript MVC 框架,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 详解基于angular-cli配置代理解决跨域请求问题

    详解基于angular-cli配置代理解决跨域请求问题

    本篇文章主要介绍了详解基于angular-cli配置代理解决跨域请求问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • AngularJS基础知识笔记之过滤器

    AngularJS基础知识笔记之过滤器

    在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户。比如时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等。在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能
    2015-05-05
  • AngularJS应用开发思维之依赖注入3

    AngularJS应用开发思维之依赖注入3

    这篇文章主要为大家详细介绍了AngularJS应用开发思维之依赖注入第三篇,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 详谈Angular路由与Nodejs路由的区别

    详谈Angular路由与Nodejs路由的区别

    下面小编就为大家带来一篇详谈Angular路由与Nodejs路由的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 解决AngualrJS页面刷新导致异常显示问题

    解决AngualrJS页面刷新导致异常显示问题

    本篇文章主要介绍了解决AngualrJS页面刷新导致异常显示问题的方法。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • AngularJs ng-repeat 嵌套如何获取外层$index

    AngularJs ng-repeat 嵌套如何获取外层$index

    这篇文章主要介绍了AngularJs ng-repeat 嵌套如何获取外层$index的相关资料,需要的朋友可以参考下
    2016-09-09
  • angular6 Error:Debug Failure at typeToString解决分析

    angular6 Error:Debug Failure at typeToString解决分析

    这篇文章主要为大家介绍了angular6 Error:Debug Failure at typeToString解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • Angularjs实现控制器之间通信方式实例总结

    Angularjs实现控制器之间通信方式实例总结

    这篇文章主要介绍了Angularjs实现控制器之间通信方式,结合实例形式总结分析了AngularJS控制器常用通信方式及相关操作注意事项,需要的朋友可以参考下
    2018-03-03
  • 浅谈Angular4实现热加载开发旅程

    浅谈Angular4实现热加载开发旅程

    本篇文章主要介绍了浅谈Angular4实现热加载开发旅程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 使用angular帮你实现拖拽的示例

    使用angular帮你实现拖拽的示例

    下面小编就为大家带来一篇使用angular帮你实现拖拽的示例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07

最新评论