简介

  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. C++的构造函数总结

    构造函数是C++的一个很基础的知识点,在平时编程的时候,相信大家都很熟悉,虽然比较基础,但是细究下来,还是有不少细节需要注意.这篇文章主要总结C++构造函数需要注意一些细节,一方面,可以帮助下大家巩固 ...

  2. hdu5772-String problem(最大权闭合子图问题)

    解析: 多校标答 第一类:Pij 表示第i个点和第j个点组合的点,那么Pij的权值等于w[i][j]+w[j][i](表示得分)第二类:原串中的n个点每个点拆出一个点,第i个点权值为 –a[s[i]] ...

  3. makefile例子《一》

    一.例子 (1)makefile和src源文件不在同一目录下 (2)把.o生成到指定目录下 文件结构目录 ----inc      //放头文件 ----lib //放所需要的.a或者.so文件 -- ...

  4. LinQ 语法基础

    LINQ (Language-Integrated Query,语言集成查询). LINQ to Objects.LINQ to SQL.LINQ to DataSet和LINQ to XML,它们分 ...

  5. python list 中找连续的数字(由网友处学习)

    # -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' #学习这个要求的:http://wsky.org/archives/ ...

  6. 表单验证插件jquery.validate的使用方法演示

    jQueryValidate表单验证效果 jquery.validate验证错误信息的样式控制 <!--validate验证插件的基础样式--> input.error{border: 1 ...

  7. PHP二分查找(递归和循环)

    二分查找可以通过递归和循环来实现, 思路如下: 将要查找的数和中间数进行比较, 如果相等,则表示找到,返回下标 如果要查找的数小于中间这个数,则说明要查找的数分布在数组左边,修改right边界,使其等 ...

  8. html5的a标签使用

    主要是href和target两个属性 示比例如以下: <a href="" target="_blank">Visit w3school</a ...

  9. SpringMvc学习-增删改查

    本节主要介绍SpringMVC简单的增删改查功能. 1.查询 dao中的代码 public List<WeatherPojo> getAllWeather(){ String sql=&q ...

  10. [MSDN] GROUP BY (Transact-SQL)

    来源: https://msdn.microsoft.com/zh-cn/library/ms177673(v=sql.110).aspx 按 SQL Server 中一个或多个列或表达式的值将一组选 ...