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. BZOJ 4029 HEOI2015 定价 数位贪心

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4029 题意概述:对于一个数字的荒谬程度定义如下:删除其所有的后缀0,然后得到的数字长度为a ...

  2. chrome谷歌浏览器导致的密码被修改现象

    版本 68.0.3440.106(正式版本) (32 位)记住密码功能有个缺陷,会把自己的密码自动填写到别人的密码框中,假如这个时候点击保存密码,就会导致其他用户的密码被修改为登录用户的密码.   很 ...

  3. flex builder 4

    下载地址(需要登录):http://trials.adobe.com/AdobeProducts/FLBR/4/win32/FlashBuilder_4_LS10.exe 很全的在线帮助文档:http ...

  4. 购物车实现思路：cookie + 数据库

    一.加入购物车 1.用户未登录  ==> 将商品id和商品数量存为数组 ==>序列化后存到cookie中 代码: if(!isset($_SESSION['uid'])){ if(empt ...

  5. [剑指Offer] 42.和为S的两个数字

    题目描述 输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 输出描述: 对应每个测试案例,输出两个数,小的先输出. [思 ...

  6. 【转】The test form is only available for requests from the local machine 解决方法

    描述:在内网可以访问 WebServer     ,在外部网站无法通过IP调用 webserver 转自:http://www.cnblogs.com/xiaogelove/p/3447283.htm ...

  7. [bzoj5285] [HNOI2018]寻宝游戏

    Description 某大学每年都会有一次Mystery Hunt的活动,玩家需要根据设置的线索解谜,找到宝藏的位置,前一年获胜的队伍可以获得这一年出题的机会. 作为新生的你,对这个活动非常感兴趣. ...

  8. [洛谷P3203][HNOI2010]弹飞绵羊

    题目大意:有$n$个节点,第$i$个节点有一个弹力系数$k_i$,当到达第$i$个点时,会弹到第$i+k_i$个节点,若没有这个节点($i+k_i>n$)就会被弹飞.有两个操作: $x:$询问从 ...

  9. [洛谷P3946] ことりのおやつ（小鸟的点心）

    题目大意:最短路,第$i$个点原有积雪$h_i$,极限雪高$l_i$(即雪超过极限雪高就不可以行走),每秒降雪$q$,ことり速度为$1m/s$,若时间大于$g$,则输出$wtnap wa kotori ...

  10. 安徽师大附中%你赛day2T3 巧克力 解题报告

    巧克力 题目描述 小\(T\)有\(N\)块巧克力, 每块巧克力上都有一句话(由小写英文字母组成,不含标点) .现在每块巧克力都断成了若干截,更糟糕的是,有一些碎片丢失了 ,但是剩下的碎片之间的顺序是 ...