最近在把玩AngularJS框架，之前也看过流行的Backbone，不过AngularJS给人的感觉完全不同，它走的是一条高帅富之路。

按照官方的说法，AngularJS是一套依赖注入的MVC开发套件。JavaScript本身不具备实现传统的“依赖注入”的条件，我觉得即便是实现传统的MVC模式，也很难做到优雅大方，因为作为View层的HTML DOM，不具备原生扩展性，浏览器的渲染器也没有提供底层的方法让我们可以将界面元素和业务逻辑关联起来，必须依靠代码去实现，AngularJS巧妙地解决了这些问题，而且姿势相当漂亮。

在我看来，AngularJS的设计思想和Flash平台上的Robotlegs有很多相似之处，将大量重复性的编码工作隐藏在框架中，让开发者只需要关注程序的业务逻辑和结构，自然地，开发效率得到了质的飞跃。

下面是文档中的一个简单例子：

<!doctype html>

<html ng-app>

  <head>

    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>

  </head>

  <body>

    <input ng-model="name">

    <p>Hello {{name}}!</p>

  </body>

</html>

短短几行代码（其实完全是HTML代码），实现了一个简单的捕获文本输入的功能。如果使用原生JavaScript或者jQuery工具库，首先要侦听input的事件，然后修改p节点的文本。这类代码毫无技术性可言，都是些重复的编码工作，现在，AngularJS把我们从琐碎的coding工作中解决出来了。

Flex开发者看了上面的例子，是不是觉得很眼熟？大家伙马上想到了MXML代码中的数据绑定。上面的例子中，使用双大括号围起来的写法，和MXML中的单大括号写法何其相似！！还必须指出的是，AngularJS实现的是双向数据绑定，即如果用代码修改了Model中的name属性，界面上也会同步更新。同志们，仅这个特性就能让我们在有限的编程生涯中少写多少行代码？？

数据绑定是AngularJS的两大法宝之一，另外一个是依赖注入。为了实现依赖注入，AngularJS扩展了HTML DOM语法，添加了所谓的"directive"，其实就是自定义 的HTML标记，比如上面代码中的ng-model属性。类似的还有不少，比如ng-app, ng-controller, ng-repeat, ng-click, ng-init, ng-class, ng-show, ng-hide...。为了解析这些自定义的标记，在DOM加载完毕后，AngularJS会遍历DOM树，根据定义的directive列表，对这些标记进行解析，如果有需要，会修改DOM节点，以及建立Controller, Model, 建立数据绑定等等。

除了内置的directive, AngularJS允许我们自定义directive。由于HTML代码中本身并没有包括任何的业务逻辑，只是将DOM节点和Controller, Model绑定在一起，这使得我们可以方便地编写自定义组件，从而提高代码的重用度。

和其他的开发框架相比，AngularJS稍显复杂，毕竟使用代码去扩展HTML语法，这听起来就是一个大工程。不过，对于使用者来说，完全可以不用太过理会其中复杂的实现，只需要关注应用本身的功能，这正是使用AngularJS的目的所在。

AngularJS框架速写的更多相关文章

  1. 十佳AngularJS框架

    您是否还在烦恼如何没有困难地创建一个创新型的Web应用程序?那么一定不要错过这个集合!在本文中,小编为大家收集了十个非常棒的AngularJS框架.AngularJS框架拥有大量有用的工具和组件,可以 ...

  2. 10 个非常有用的 AngularJS 框架

    AngularJS是最流行的开源web app框架.AngularJS被用于解决阻碍单页应用程序开发的各种挑战. 你作为一个AngularJS用户,却不知道一些可以帮助你美化编码的资源?那么一定不能错 ...

  3. AngularJS框架研究（一）

    和几年前相比,现在的Javascript开发方式有了翻天覆地的变化,一些极具创意的开发工具的出现,让前端开发更加成熟,Angular框架就是一个例子.最近在看Angular的源代码,发现并不是件容易的 ...

  4. 简洁AngularJS框架后台管理系统bootstrap后台模板

    最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS ...

  5. 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

    还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...

  6. angularjs框架及其生态环境 --待续

    angular的MVVM框架结构:     1. app,   2.routes, config,   3.module,   4.Controller, $scope,controller参数,事件 ...

  7. vuejs angularjs 框架的一些比较（vue项目重构四）

    使用Angularjs和Vue.js对比 首先需要说明的是:现在默认angularjs指angular1.0+版本,angular默认指2.0以上版本.本文的名词也默认指定angular的1.0+版本 ...

  8. AngularJS 框架

    AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. [Angular JS表达式]  1.Angular JS使用双{{}}绑定方式.用于将表达式的内容输出到页面 ...

  9. 初探AngularJs框架（三）

    一.实现todoList的demo 功能很简单,提供一个文本框,用户输入回车后添加新条目.每个条目可以在待处理和处理中两个区域间切换,每个条目都可以被删除,大致的界面如下图所示: 二.处理逻辑 首先将 ...

随机推荐

  1. jQuery的三种bind/One/Live/On事件绑定使用方法

    本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要的朋友参考下   今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQ ...

  2. 注册 集 与 删除 -- C

    文章3位设置和清除操作. #include <stdio.h> #include <stdlib.h> #include <string.h> #define BI ...

  3. android进度条

    android进度条 1.达到的效果 2.布局代码 先写一个my_browser.xml文件 存放WebView <?xml version="1.0" encoding=& ...

  4. python_基础学习_03_正则替换文本（re.sub）

    python的正则表达式模块是re,替换相关的方法是sub. 例如我们要做如下的替换将所有的 替换为空格,可以通过下面代码实现: import re input = 'hello world' #第一 ...

  5. 用DIV+css写Table

    做出的效果样式如下图, 1,首先考虑的是如何显示border,就像是分割代码,我把border分割为最外层DIV全border,和内层DIV的right和bottom的border,就是右边和下边. ...

  6. sql语句查询列的说明

    SELECT C.name,value FROM sys.columns C INNER JOIN sys.tables T ON C.object_id = T.object_idINNER JOI ...

  7. SVN记录使用过程中出现的错误（一）

    由于使用SVN时间不长,故障各种奇怪的问题是不可避免的,这里记录,自己的方便还是菜鸟跟我一样的参考 一个问题: dzt@dzt-All-Series:~/D/dzt/workarea/7301_mp/ ...

  8. 关于Installshield里一些常见问题的解答—艾泽拉斯之海洋女神出品

    原文:关于Installshield里一些常见问题的解答-艾泽拉斯之海洋女神出品 上一篇:一个完整的安装程序实例—艾泽拉斯之海洋女神出品(五) --补遗转载时请务必保留转载出处和由艾泽拉斯之海洋女神出 ...

  9. 移植MonkeyRunner的图片对比和获取子图功能的实现-Appium篇

    如果你的目标测试app有很多imageview组成的话,这个时候monkeyrunner的截图比较功能就体现出来了.而其他几个流行的框架如Robotium,UIAutomator以及Appium都提供 ...

  10. 分布式消息系统kafka

    kafka:一个分布式消息系统 1.背景 最近因为工作需要,调研了追求高吞吐的轻量级消息系统Kafka,打算替换掉线上运行的ActiveMQ,主要是因为明年的预算日流量有十亿,而ActiveMQ的分布 ...