AngularJs 入门（一）--前言

AngularJs 入门（一）

前言

---

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

1、什么是AngularJs

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

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

AngularJS使用了不一样的方法，它尝试去补足HTML自己在构建应用方面的缺陷。AngularJS经过使用咱们称为指令(directives)的结构，让浏览器可以识别新的语法。例如：

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

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

2、特性

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、ngTouch2)用户自定义的模块：angular.module('模块名',[ ])