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 框架，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Bootstrap整体框架之JavaScript插件架构

    本文实例为大家介绍了JavaScript插件架构的知识点,供大家参考,具体内容如下 1. JavaScript插件架构 如下是插件alert的全部代码,每个插件都定义在如下类似的作用域中: +function ($) { 'use strict'; // ALERT CLASS DEFINITION // ====================== var dismiss = '[data-dismiss="alert"]' var Alert = function (el) { $

  • 前端框架Vue.js构建大型应用浅析

    前端框架Vue.js构建大型应用浅析

    真正的模块化 前端模块化很早就开始了,无论是 require.js,browserify 进行模块化打包, 还是 Angular 进行依赖注入,我们都可以把JS代码分成一个个小的模块并组装起来.然后我们还会通过 less 或者 sass 来把CSS文件也拆成一个个小的模块来写,甚至我们在CSS代码中感受到了 封装,继承,多态 等面向对象的特性. 然而,在 webpack 出来之前,我们所谓的模块化根本不能算作模块化.为什么这么讲,因为我们存在一个重要的问题没有解决,就是JS模块对CSS模块的依赖

  • JavaScript的Backbone.js框架入门学习指引

    1.简介 最近在做一个大型网上银行项目前端的优化,需要使用一个胖客户端的优化,大概思路就是前端通过Ajax 请求去后端获取数据,以Jason的格式返回,然后显示在页面上.由于这个系统非常庞大,胖客户端方案难免需要在客户端写大量的JS代码.我想对于任何团队来说,大量的,非结构化的代码维护起来都非常的不方便.所以BackBone进入了我的视线. 它提供了一种途径可以让你结构化你的JS代码,让你以面向对象的方式来组织你的前端JS代码.这就好比我们在前端应用Domain Driven Design. 我

  • 分享别人写的一个小型js框架

    主要是集成了常用的扩展,包括Dom与String.Array.StringBuffer.NameSpace等,当然还少不了Ajax.体积约8k.因为严格控制体积,所以功能有限.如果只要Ajax部分,就1k而已. 这个小框架已经应用到公司的项目,并开始逐步在前端展示页面上接替prototype.js.以后将围绕这个框架做一些应用. 复制代码 代码如下: /* *    My JavaScript Framework *    Version    :    1.0 beta *    Author

  • JavaScript的Backbone.js框架的一些使用建议整理

    Backbone 为复杂Javascript应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视图可以声明事件处理函数,并通过RESTful JSON接口连接到应用程序. 当我们开发含有大量Javascript的web应用程序时,首先你需要做的事情之一便是停止向DOM对象附加数据. 通过复杂多变的jQuery选择符和回调函数创建Javascript应用程序,包括在HTML UI,Ja

  • 第一次接触神奇的前端框架vue.js

    第一次接触神奇的前端框架vue.js

    前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组合.以至于我都有些感觉out.各种vue+webpack.vue+react.vue+es6+npm等等.琳琅满目.真是三天不学习赶不上刘少奇. 开篇主要是初次了解下vue.js,包括v-model.v-if.v-else.v-show.v-for(2.0对$index和$key舍弃,2.0要用in

  • 十大热门的JavaScript框架和库

    十大热门的JavaScript框架和库

    JavaScript 框架和库可以说是开源项目中最庞大也是最累的类目了,目前在github 上这一类的项目是最多的,并且几乎每隔一段时间就会出现一个新的项目席卷网络社区,虽然这样推动了创新的发展,但不得不说苦了前端的开发者们.因此本文罗列出了一些优秀的 Javascript 框架和库的特及其在 github 上的 star 数,旨在为各位开发者提供一些参考. 1.ReactJS(Star: 59989,Fork: 10992) 主页:https://facebook.github.io/reac

  • 移动端脚本框架Hammer.js

    移动端脚本框架Hammer.js

    一.前言 移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了.虽然暂时还没有PC端开发的需求量大,但移动端的Web必然是一种趋势,在接触移动端脚本的过程中,最开始想到的是juqery.Jquery2.0版本及以上已经开始偏向移动端,如对h5的支持,但支持还是不够完善,希望jq在后面的版本能够逐渐支持起来. 最初在开发移动端Web的时候使用w3c标准的语法结构和原生的js开发,但相对来说开发量比较大,而且每一步都要考虑各移动端浏览器的兼容,像比较让程序员头痛的大wp手机,很多事

  • 2014年最火的Node.JS后端框架推荐

    2014年最火的Node.JS后端框架推荐

    Node.js框架是可以帮助你建立网站应用服务的javascript框架.它可以帮助你更快地开发Web应用 Node.js 是基于Chrome的JavaScript运行环境.可方便地构建快速.可扩展的网络应用.节点. 当涉及到Web应用程序的开发,你就需要JS框架,加快你的开发过程. Node.js有非常多不同类型的框架,如MVC框架,REST API和generators,全栈框架,大量的服务器库,它完全能够提供Web服务,无需使用Apache等外部软件. Node.js使用谷歌的V8 Jav

  • 详细介绍8款超实用JavaScript框架

    1. Hammer.jsHammer.js是被广泛使用的轻量级JavaScript框架,它提供了常用触摸操作的规范,比如收缩.拖放.双击和删除等等.它支持大多数移动平台像iOS,Windows Mobile, Android 和 BlackBerry. 2. jQuery UIjQuery UI非常适合那些用jQuery JS 库开发App的用户.提到jQuery UI,就不得不提到跟它非常相似的Kendo UI.Kendo UI可帮助创建原生的移动和桌面应用,对性能和易用性方面都做了大量优化,

随机推荐