AngularJs 入门(一)--前言

SakuraLu 2019-06-26

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('模块名',[ ])

相关推荐