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 ...

随机推荐

  1. C#对.zip 存档读取和写入

    Framework4.5支持 引用: System.IO.Compression.dll,System.IO.Compression.FileSystem.dll 提取压缩文件 ZipFile.Ext ...

  2. C#开发微信门户及应用(19)-微信企业号的消息发送（文本、图片、文件、语音、视频、图文消息等）

    我们知道,企业号主要是面向企业需求而生的,因此内部消息的交流显得非常重要,而且发送.回复消息数量应该很可观,对于大企业尤其如此,因此可以结合企业号实现内部消息的交流.企业号具有关注安全.消息无限制等特 ...

  3. shell编程

    最吸引人的莫过于及时看到成果的努力,echo就是最好的初学者反馈函数,因为它的存在你可以及时的打印出结果. 1.分支 if[ ]:then elif ;then else fi 2.简单的循环,循环是 ...

  4. PHP 单例模式

    一.什么是单例模式? 1.含义 作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统全局地提供这个实例.它不会创建实例副本,而是会向单例类内部存储的实例返回一个引用. 2. ...

  5. Struts 2 数据校验要用到的类和两种校验方式以及一些校验问题的解决

    通过继承ActionSupport类来完成Action开发,ActionSupport类不仅对Action接口进行简单实现, 同时增加了验证.本地化等支持 .真实开发中自定义Action都需要继承该类 ...

  6. ArcGIS Engine开发之地图文档保存

    在对地图文档进行修改后,经常需要对其进行保存.地图文档的保存有直接保存和另存为两种方式.这里的地图文档的修改指的是修改地图文档文件记录信息,不是对空间数据的编辑. 1.地图文档保存 具体实现的思路: ...

  7. elasticsearch__5__java操作之FilterBuilders构建过滤器Query

    FilterBuilders构建过滤器Query 代码如下: package com.elasticsearch; import org.elasticsearch.action.ActionList ...

  8. Android 开源库和项目 2

    1.带尾巴的RecyclerViewPager 特点:1.像viewPager一样滑动一次就滑动一页 2.像画廊gallery一样,滑动一次可以滑动很多页 3.竖向滑动 4.支持点击事件,没有错乱   ...

  9. GUID生成器

    这个GUID生成器是一个小巧的软件,属于笔者在空余时间开发的. http://pan.baidu.com/s/1sk6VGpn

  10. [Erlang 0111] Erlang Abstract Format , Part 2

       上回书,我们说到飞天玉虎蒋伯芳来到蜈蚣岭,不是,重来,上回咱们说到可以在Erlang Shell里面手工构造,加载并调用一个模块.在那个demo里面,我把多个Form单独生成出来,最后放在一起做 ...