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. SPOJ 1812 Longest Common Substring II（后缀自动机）（LCS2）

    A string is finite sequence of characters over a non-empty finite set Σ. In this problem, Σ is the s ...

  2. Struts2监听Action结果的监听器

    作者:禅楼望月 在前面我们学到了在特定的Action中配置结果监听器,在Action完成控制处理之后,struts2转入实际的物理视图之前被回调.但是这种方式的缺点是,结果的监听器不能被复用.根据设计 ...

  3. CTSC && APIO 行程记录

    CTSC: 第一天,看着三道题,只觉得第三题可做.于是写了第一题的暴力就开始写第三题的题答,第二题看了萨菲克斯阿瑞的名字就感觉不会写呀.然而第三题只能胡搞乱搞就只有28分. D1 5 + 0 + 28 ...

  4. 机器学习模型-支持向量机(SVM)

    二.代码实现 import numpy as np from sklearn import datasets from sklearn.model_selection import train_tes ...

  5. 对web开发从业者的发展方向的思考

    最近在读子柳的<淘宝技术这十年>,“牛P列传”这一章中介绍了很多淘宝技术发展史上做出重要贡献的“牛P人物”(阿里的技术岗按能力分级,从P1~P10). 读到采访小马的这一段: 子柳:畅想一 ...

  6. WCF分布式开发步步为赢(13):WCF服务离线操作与消息队列MSMQ

    之前曾经写过一个关于MSMQ消息队列的文章:WCF分布式开发必备知识(1):MSMQ消息队列 ,当时的目的也是用它来作为学习WCF 消息队列MSMQ编程的基础文章.在那篇文章里,我们详细介绍了MSMQ ...

  7. SICAU-OJ： 三角关系

    三角关系 题意: 给出两个数n和k,统计(a,b,c)三元组满足(a+b)%k=0,(b+c)%k=0,(a+c)%k=0且1<=a,b,c<=n的数量. 题解: 由(a+b)%k=0,( ...

  8. HDU 多校对抗赛 A Maximum Multiple

    Maximum Multiple Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  9. Eclipse开发环境配置,打磨Eclipse,安装插件(适用3.4,3.5,3.6,3.7)

    转载自:http://elf8848.iteye.com/blog/354035 打磨Eclipse -- 磨刀不误砍柴工 -------------------------------------- ...

  10. 使用jQuery发送POST，Ajax请求返回JSON格式数据

    问题: 使用jQuery POST提交数据到PHP文件, PHP返回的json_encode后的数组数据,但jQuery接收到的数据不能解析为JSON对象,而是字符串{"code" ...