简介

  AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。
  通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：
  类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等
  框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。
  AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：
  使用双大括号{{}}语法进行数据绑定；
  使用DOM控制结构来实现迭代或者隐藏DOM片段；
  支持表单和表单的验证；
  能将逻辑代码关联到相关的DOM元素上；
  能将HTML分组成可重用的组件。

端对端的解决方案

  AngularJS试图成为WEB应用中的一种端对端的解决方案。这意味着它不只是你的WEB应用中的一个小 部分，而是一个完整的端对端的解决方案。这会让AngularJS在构建一个CRUD（增加Create、查询Retrieve、更新Update、删除 Delete）的应用时显得很“固执”（原文为 opinionated,意指没有太多的其他方式）。但是，尽管它很“固执”，它仍然能确保它的“固执”只是在你构建应用的起点，并且你仍能灵活变动。 AngularJS的一些出众之处如下：
  构建一个CRUD应用可能用到的全部内容包括：数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。
  测试方面包括：单元测试、端对端测试、模拟和自动化测试框架。
  具有目录布局和测试脚本的种子应用作为起点。

AngularJS的可爱之处

  AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样，这也会损 失一部分灵活性。换句话说，并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是，至少90%的 WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建，就得了解什么不适合用AngularJS构建。
  如游戏，图形界面编辑器，这种DOM操作很频繁也很复杂的应用，和CRUD应用就有很大的不同，它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。

实例

AngularJS下载地址

http://angularjs.org

Hello World!

开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”：

  1. 使用您喜爱的文本编辑器，创建一个HTML文件，例如：helloworld.html。
  2. 将下面的源代码复制到您的HTML文件。
  3. 在web浏览器中打开这个HTML文件。

源代码

<!doctype html>

<html ng-app>

    <head>

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

    </head>

    <body>

        Hello {{'World'}}!

    </body>

</html>

请在您的浏览器中运行以上代码查看效果。

现在让我们仔细看看代码，看看到底怎么回事。 当加载该页时，标记ng-app告诉AngularJS处理整个HTML页并引导应用：

<html ng-app>

这行载入AngularJS脚本：

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

（想了解AngularJS处理整个HTML页的细节，请看Bootstrap。）

最后，标签中的正文是应用的模板，在UI中显示我们的问候语：

Hello {{'World'}}!

注意，使用双大括号标记{{}}的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串‘World’。

下面，让我们看一个更有趣的例子：使用AngularJS对我们的问候语文本绑定一个动态表达式。

Hello AngularJS World!

本示例演示AngularJS的双向数据绑定（bi-directional data binding）：

  1. 编辑前面创建的helloworld.html文档。
  2. 将下面的源代码复制到您的HTML文件。
  3. 刷新浏览器窗口。

源代码

<!doctype html>

<html ng-app>

    <head>

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

    </head>

    <body>

        Your name: <input type="text" ng-model="yourname" placeholder="World">

        <hr>

        Hello {{yourname || 'World'}}!

    </body>

</html>

请在您的浏览器中运行以上代码查看效果。

该示例有一下几点重要的注意事项：

  • 文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量。
  • 双大括号标记将yourname模型变量添加到问候语文本。
  • 你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！

现在试着在输入框中键入您的名称，您键入的名称将立即更新显示在问候语中。 这就是AngularJS双向数据绑定的概念。 输入框的任何更改会立即反映到模型变量（一个方向），模型变量的任何更改都会立即反映到问候语文本中（另一方向）。

AngularJS中文介绍的更多相关文章

  1. AngularJs中文社区学习资料

    AngularJs中文社区学习资料,供学习: http://angularjs.cn/tag/AngularJS

  2. Zigbee2007协议中文介绍

    Zigbee2007中文介绍ZigBee2007规范定义了ZigBee和ZigBee Pro两个特性集,全新的ZigBee 2007规范建立在ZigBee2006之上,不但提供了增强型的功能而且在某些 ...

  3. angularjs中文社区

    http://angularjs.cn/   中文社区 https://angular.cn/features.html  官方文档中文版

  4. Angularjs中文版本开发指南发布

    从本人开始在写关于Angularjs的文章开始,也算是见证了Angularjs在国内慢慢的火起来,如今的Angularjs正式如日中天.想知道为什么Angularjs会这么火,请移步angularjs ...

  5. AngularJS 中文资料+工具+库+Demo 大搜集

    中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频. http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html   翻译的 ...

  6. iptables中文介绍 、基本使用操作命令（转）

    iptables 命令介绍   原文链接http://www.cnblogs.com/wangkangluo1/archive/2012/04/19/2457072.html iptables防火墙可 ...

  7. [Arduino] Leonardo 中文介绍

    以下内容均翻译自arduino.cc,水平有限,如有错误请大家指正. 概述Arduino Leonardo是基于ATmega32u4一个微控制器板.它有20个数字输入/输出引脚(其中7个可用于PWM输 ...

  8. angularjs简单介绍和特点

    首先angular是一个mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每个模块都有自己的scope, se ...

  9. 进阶之路（基础篇） - 022 Arduino Leonardo 中文介绍（摘抄）

    本文摘抄:http://www.arduino.cn/thread-1205-1-1.html 概述Arduino Leonardo是基于ATmega32u4一个微控制器板.它有20个数字输入/输出引 ...

随机推荐

  1. paip.提升性能--- mysql 建立索引 删除索引 很慢的解决.

    paip.提升性能--- mysql 建立索引 删除索引 很慢的解决. 作者Attilax ,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blo ...

  2. Direct3D 2D文本绘制

    现在学习下Direct3D在窗口中绘制一些文本信息,ID3DXFont接口负责创建字体和绘制二维的文本.我们介绍下ID3DXFont的用法. 1.创建LPD3DXFONT接口 LPD3DXFONT g ...

  3. Zookeeper学习记录（一）：设计与实现

    概述 Zookeeper是一个分布式的.开源的分布式应用协调服务.它暴露了一组简单的基础原件,分布式应用可以在这些原件之上实现更高级别的服务,如同步.配置维护.群组.和命名.它被设计成容易编程实现的, ...

  4. vs2010 正式版官方下载地址

    北京时间2010年4月12日12:00,微软Visual Studio 2010 正式版提供官方下载,眼下有三个版本号,Professional/Premium/Ultimate. 注意原页面的链接R ...

  5. CI分支kohana在线文档

    http://www.luzhongpeng.com/guide/kohana/mvc/controllers http://www.lampblog.net/kohana3%E4%BD%BF%E7% ...

  6. 编程算法 - 圆圈中最后剩下的数字(递推公式) 代码(C++)

    圆圈中最后剩下的数字(递推公式) 代码(C++) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 0,1...,n-1这n个数字排成一个圆圈, 从数字0開始 ...

  7. WEB服务器6--IIS架构补充篇

    第一部分我将谈谈IIS的两个不同的版本—IIS 5.x 和 IIS 6的处理模型:IIS如何监听来自外界的Http request,如何根据ISAPI Extension Mapping将对于不同Re ...

  8. 百度地图API用法（传地址）

    网上找了很多都是没用的,非动态用法,最后在官网论坛才问到的 现在来一步一步教大家用 1 这是地址:   http://developer.baidu.com/map/ 选择web开发 先获取密钥   ...

  9. IE iframe 中 js 的 cookie 读写不到的解决办法

    1.看这里(改服务器配置) http://www.cr173.com/html/16696_1.html 2.使用object模拟iframe,不使用iframe框架 <html> < ...

  10. 在VS中如何用C++连接Mysql

    在如鹏网上看到的如何用C连接Mysql,解决了大二时的一直困惑,大喜! 第一步下载 安装的数据库是如鹏网的Mysql :http://pan.baidu.com/s/1c0m3xIw 提取码:m9sn ...