简介

  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. 【HDU 4612 Warm up】BCC 树的直径

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4612 题意:一个包含n个节点m条边的无向连通图(无自环,可能有重边).求添加一条边后最少剩余的桥的数 ...

  2. 打造自己个性的notepad ++

    对coder来说,notepad ++ 是一个很不错的文本编辑器.平时用来看看代码.xml文件,都比系统自带的记事本舒服得多.不过,对于像我这种每天用notepad ++写代码的人,一个原装的note ...

  3. TypeScript 素描 - 模块解析、声明合并

    模块解析 模块解析有两种方式 相对方式  也就是以/或 ./或-/开头的,比如import jq  from "/jq" 非相对方式  比如 import model  from ...

  4. wifi_uplink脚本分析

    ~ >: vim apps/tools/wifi_uplink  #!/bin/sh # Copyright (C) 2012 GuoWenxue <guowenxue@gmail.com ...

  5. Android——编译odex保护

    编译过android源代码的可能试验过改动编译类型.android的初始化编译配置可參考Android--编译系统初始化设置 一.TARGET_BUILD_VARIANT=user 当选择的编译类型为 ...

  6. [Elasticsearch] 部分匹配 (三) - 查询期间的即时搜索

    本章翻译自Elasticsearch官方指南的Partial Matching一章. 查询期间的即时搜索(Query-time Search-as-you-type) 如今让我们来看看前缀匹配可以怎样 ...

  7. arcengine 调用arctoolbox功能的举例 spatialJoin

    废话不多说,code是王道. 其中str1.str2两个参数是target路径.join路径 private void spatialJoin(Geoprocessor gp, string str1 ...

  8. 域名解析 URL转发

    URL转发 转发功能:如果您没有一台独立的服务器(也就是没有一个独立的IP地址)或者您还有一个域名B,您想访问A域名时访问到B域名的内容,这时您就可以通过URL转发来实现.url转发可以转发到某一个目 ...

  9. chart.js制作折线图

    <!DOCTYPE html> <html> <head> <title></title> </head> <script ...

  10. Spring项目的建立-移植流程(非入门教程)

    Creat by Zhou yong in 2016/4/15/19:00 jar包 java 1.7 tomcat的两个jar包 2个文件上传的jar包 json支持的jar包 hibernate- ...