AngularJs 入门（一）--前言

AngularJs 入门（一）

前言

---

AngularJs目前来说相对于现在流行的高版本ng2、ng4,以及Vue2.0、React来说实属是老套的前端框架了，当然这都不重要，没有完美的框架，只有不断优化的代码。其实只是符合公司水平要求才这么整的啊。。话不多说，开搞吧。

一、什么是AngularJs

1、AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。

通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：
1> 类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等。
2> 框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。

AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。例如：

• 使用双大括号{{}}语法进行数据绑定；
• 使用DOM控制结构来实现迭代或者隐藏DOM片段；
• 支持表单和表单的验证；
• 能将逻辑代码关联到相关的DOM元素上；
• 能将HTML分组成可重用的组件。

还有很多事情，这里大概提一下。到了模块介绍和具体项目中会详细讲解。

二、特性

1>双向的数据绑定。

它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理，查询和监听DOM。数据绑定是的代码更少，你可以专注于你的应用。我们想象一下Model是你的应用中的简单事实。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的，毫不影响的应用到web应用中。传统来说，当model变化了。
开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面，model变化驱动了DOM中元素变化，另一方面，DOM元素的变化也会影响到Model。这个在用户互动中更加复杂，因为开发人员需要处理和解析这些互动，然后融合到一个model中，并且更新View。这是一个手动的复杂过程，当一个应用非常庞大的时候，将会是一件非常费劲的事情。这里肯定有更好的解决方案！那就是AngularJS的双向数据绑定，能够同步DOM和Model等等。

2> 一个模板就是一个HTML文件。

但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容。HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。所有的指令都负责针对view来设置数据绑定。我们要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化，不是字符串的连接或者innerHTML变化。使用DOM作为输入，而不是字符串，是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令，甚至开发可重用的组件。最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签，然后开发者拿过来添加上功能，通过数据绑定将会使得这个过程非常简单。

3> 服务和依赖注入

AngularJS拥有内建的依赖注入（DI）子系统，可以帮助开发人员更容易的开发，理解和测试应用。DI允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI负责找创建并且提供给我们。为了而得到核心的AngularJS服务，只需要添加一个简单服务作为参数，AngularJS会侦测并且提供给你。

4>指令（Directives）

指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情？那么AngularJS可以做到。指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用。然后，你可以使用这个自定义的directive来使用：使用一系列的组件来创建你自己的应用将会让你更方便的添加，删除和更新功能。

5>模块化设计

模块是提供一些特殊服务的功能块，比如本地化模块负责文字本地化，验证模块负责数据验证。一般来说，服务在模块内部，当我们需要某个服务的时候，是先把模块实例化，然后再调用模块的方法。但Angular模块和我们通常理解的模块不一样，Angular模块只保留服务的声明，服务的实例化是由服务注入器完成的，实例化之后服务就留在了服务注入器中，和模块没有关系了，这就是为什么我们使用的服务全部来自注入器的原因。

每调用一次angular.boostrap()方法会创建一个新的Angular应用和一个新的服务注入器，因此，每个应用都对应一个服务注入器，彼此互不冲突。

在angular中，模块可以是对象、方法（如果是数组，数组的最后一个元素必须是方法，前面的元素都是方法按顺序排列的参数名称）。后面讲的模块属性和方法，都属于通过angular.module()定义的模块对象。如果模块是方法，是不需要经过angular.module()定义的，只需写入依赖数组（就是说依赖数组的元素可以是方法），模块在加载依赖关系的时候直接执行了。

注意：通过angular.module()方法定义的模块是唯一的，如果重复定义就会覆盖前面的定义。

高内聚低耦合法则
1)官方提供的模块：ng、ngRoute、ngAnimate、ngTouch
2)用户自定义的模块：angular.module('模块名',[ ])