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. 再谈JavaScript闭包及应用

    .title-bar { width: 80%; height: 35px; padding-left: 35px; color: white; line-height: 35px; font-siz ...

  2. 在WPF按钮删除默认的鼠标悬停效果

    如果你想在应用程序的所有按钮将此风格,那么这种风格可以插入Application.Resources部分的App.xaml页面. <Window.Resources> <Style ...

  3. VMware12下安装Debian8.5

    参考:  Debian 8.2.0 (Jessie) 快速纯净安装教程    Debian 7 安装配置总结    Debian 7.8 系统安装配置过程 软件包管理命令    包命令    从源代码 ...

  4. The method getJspApplicationContext(ServletContext) is undefined for the type JspFactory

    The method getJspApplicationContext(ServletContext) is undefined for the type JspFactory 这是由于项目里面的一些 ...

  5. linux grep命令

    linux grep命令1.作用Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expressio ...

  6. 【挖财工作笔记】idea使用指南

    一 安装破解 破解选择服务器,然后选择地址:http://www.iteblog.com/idea/key.php  http://idea.iteblog.com/key.php  http://i ...

  7. 《连载 | 物联网框架ServerSuperIO教程》1.4种通讯模式机制。附小文：招.NET开发，结果他转JAVA了，一切都是为了生活

    参考文章: 1.SuperIO通讯框架介绍,含通信本质 2.C#跨平台物联网通讯框架ServerSuperIO(SSIO) 一.感慨 上大学的时候,没有学过C#,花了5块钱在地坛书市买了一本教程,也就 ...

  8. kafka主题offset各种需求修改方法

    简要:开发中,常常因为需要我们要认为修改消费者实例对kafka某个主题消费的偏移量.具体如何修改?为什么可行?其实很容易,有时候只要我们换一种方式思考,如果我自己实现kafka消费者,我该如何让我们的 ...

  9. 原生JS实战：写了个一边玩游戏，一边记JS的API的游戏

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5878913.html 本程序[一边玩游戏,一边记JS的API]是本人的个 ...

  10. 内网渗透-代理（reGeorg）

    我对于reGeorg的使用,只是简单说下. 首先需要下载reGeorg,下载地址:https://github.com/sensepost/reGeorg 然后将reGeorg,上传到服务端.直接访问 ...