1.　　简介：AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。

  1)通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：
  　　类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等
  　　框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。
  2)AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：
  　　使用双大括号{{}}语法进行数据绑定；
  　　使用DOM控制结构来实现迭代或者隐藏DOM片段；
  　　支持表单和表单的验证；
  　　能将逻辑代码关联到相关的DOM元素上；
  　　能将HTML分组成可重用的组件。
 
2.　　端对端解决方案：AngularJS试图成为WEB应用中的一种端对端的解决方案。这意味着它不只是你的WEB应用中的一个小部分，而是一个完整的端对端的解决方案。这会让AngularJS在构建一个CRUD（增加Create、查询Retrieve、更新Update、删除Delete）的应用时显得很“固执”（原文为 opinionated,意指没有太多的其他方式）。但是，尽管它很“固执”，它仍然能确保它的“固执”只是在你构建应用的起点，并且你仍能灵活变动。AngularJS的一些出众之处如下：

  　　1)构建一个CRUD应用可能用到的全部内容包括：数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。
  　　2)测试方面包括：单元测试、端对端测试、模拟和自动化测试框架。
  　　3)具有目录布局和测试脚本的种子应用作为起点。
3.　　AngularJS主要考虑的是构建CRUD应用。幸运的是，至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建，就得了解什么不适合用AngularJS构建。如游戏，图形界面编辑器，这种DOM操作很频繁也很复杂的应用，和CRUD应用就有很大的不同，它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。
4.　　上面我们大致了解了一下AngularJS的基本概念，下面我们可以通过一个Hello World实例来学习一下AngularJS：
  • 首先我们要下载好AngularJS，http://angularjs.org
  • 然后打开一个文本编辑器（我使用的是HBuilder，这个工具还是很方便的，大家可以尝试一下），创建一个HTML文件
<!DOCTYPE html>

<html ng-app><!--标记ng-app告诉AngularJS处理整个HTML页并引导应用-->

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="js/angular.min.js" ></script><!--载入AngularJS脚本-->

    </head>

    <body>

        Hello {{'World'}}!<!--使用双大括号标记的内容是问候语中绑定的表达式-->

    </body>

</html>

5.　　AngularJS的双向数据绑定：

<!DOCTYPE html>

<html ng-app><!--标记ng-app告诉AngularJS处理整个HTML页并引导应用-->

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="js/angular.min.js"></script><!--载入AngularJS脚本-->

    </head>

    <body>

        你的名字: <input type="text" ng-model="yourname" placeholder="世界">

        <!--文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量。

            双大括号标记将yourname模型变量添加到问候语文本。

            你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！

        -->

        <hr>

        你好 {{yourname || '世界'}}!<!--这里yourname的默认值是世界，当在文本框中输入内容是，这里的yourname会动态改变-->

    </body>

</html>

6.　　AngularJS应用的解析：描述AngularJS应用程序的三个组成部分，并解释它们如何映射到模型-视图-控制器设计模式（MVC设计模式）：

  • 模板(Templates)：模板是用HTML和CSS编写的文件，展现应用的视图。 您可给HTML添加新的元素、属性标记，作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的，这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记！
  • 应用程序逻辑(Logic)和行为(Behavior)：应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同，您不需要另外编写侦听器或DOM控制器，因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。
  • 模型数据(Data)：模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型，这都不重要，重要的是，他们都属于AngularJS作用域对象。AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中，反之亦然。
  • AngularJS还提供了一些非常有用的服务特性：
    • 底层服务包括依赖注入，XHR、缓存、URL路由和浏览器抽象服务。
    • 您还可以扩展和添加自己特定的应用服务。
    • 这些服务可以让您非常方便的编写WEB应用。

AngularJS 入门教程的更多相关文章

  1. AngularJS入门教程：日期格式化

    AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...

  2. 【转载】图灵AngularJS入门教程

    摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...

  3. AngularJS 入门教程 $http is not defined 解决方案

    采用从git下载的教程, www.angularjs.cn 版本的 入门教程,在第5步的时候 签出文件: git checkout -f step-5 运行将会提示: $http is not def ...

  4. Angular系列---- AngularJS入门教程03：AngularJS 模板（转载）

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  5. Angular系列----AngularJS入门教程01：AngularJS模板 （转载）

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  6. Angular系列----AngularJS入门教程00：引导程序（转载）

    我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...

  7. Angular系列------AngularJS入门教程：导言和准备（转载）

    学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设 ...

  8. [转载]AngularJS入门教程02：AngularJS模板

    是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模 ...

  9. [转载]AngularJS入门教程00：引导程序

    我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...

  10. AngularJS入门教程

    1. 简介:AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是 ...

随机推荐

  1. UVA 11880 Ball in a Rectangle（数学+平面几何）

    Input: Standard Input Output: Standard Output � There is a rectangle on the cartesian plane, with bo ...

  2. oracle INSERT INTO多个值

    稍微熟悉Oracle的都知道,如果我们想一条SQL语句向表中插入多个值的话,如果INSERT INTO 某表 VALUES(各个值),VALUES(各个值),.....;这样会报错的,因为oracle ...

  3. [比赛总结]ACM div3 G 比赛总结

    这次题目总体感觉和做阅读理解差不多,英文题目读起来相当费劲. 另外,这次比赛整个队伍中我们三个都突出存在的问题就是,把简单问题复杂化,抓不到事物的本质,因此很容易的就被题目误导. 比如C题,明明想到了 ...

  4. 【EasyNetQ】- 快速开始

    欢迎来到EasyNetQ.本指南向您展示如何在大约10分钟内启动并运行EasyNetQ. 你可以在GitHub上找到这个快速入门的代码:https://github.com/mikehadlow/Ea ...

  5. 使用ExecutorService实现线程池

    ExecutorService是java提供的用于管理线程池的类. 线程池的作用: - 控制线程数量 - 重用线程 当一个程序中创建了许多线程,并在任务结束后销毁,会给系统带来过度消耗资源,以及过度切 ...

  6. JAVA多线程及补充

    进程 运行中的应用程序叫进程,每个进程运行时,都有自已的地址空间(内存空间)如IE浏览器在任务管器中可以看到操作系统都是支持多进程的 线程 线程是轻量级的进程,是进程中一个负责程序执行的控制单元线程没 ...

  7. servletContex.getRealPath 获取的是拼接后的地址 是虚假的

    servletContex.getRealPath 获取的是拼接后的地址 是虚假的

  8. 获取web服务器路径的方法 getResourceAsStream

    1.先获取 serlvetContext对象 2.调用getResourceAsStream  在方法里 "\"表示当前web的根目录  还要拼接上具体的文件路径 ServletC ...

  9. [洛谷P3521][POI2011]ROT-Tree Rotations

    题目大意:给一棵$n(n\leqslant2\times10^5)$个叶子的二叉树,可以交换每个点的左右子树,要求前序遍历叶子的逆序对最少.输出最少的逆序对个数 题解:线段树合并,对于每个节点求出交换 ...

  10. [洛谷P2584][ZJOI2006]GameZ游戏排名系统

    题目大意:同[洛谷P4291][HAOI2008]排名系统(双倍经验) 题解:略 卡点:无 C++ Code: #include <cstdio> #include <map> ...