AngularJS入门简介和详细指南

2021年3月19日18:22:35 发表评论 557 次浏览

定义

AngularJs是一个主要用于开发单页Web应用程序(SPA)的Javscript开源前端框架, 它是一个不断发展壮大的框架, 为开发Web应用程序提供了更好的方法, 它将静态HTML更改为动态HTML。动态绑定和依赖注入等功能消除了我们不得不编写其他代码的需求。AngularJs迅速增长, 由于这个原因, 我们有不同版本的AngularJs, 最新的稳定版本为1.7.7。同样重要的是要注意Angular与AngularJs不同。这是一个开源项目, 任何人都可以自由使用和更改它, 它通过Directives扩展了HTML属性, 并且数据与HTML绑定在一起。

历史:

AngularJs最初是由Misko hevery和Adam abrons在2008-2009年开发的, 现在由Google维护。

为什么要使用它?

  • 易于使用:使用AngularJ所需要了解的只是HTML, CSS和Javascript的基础知识, 而不必成为这些技术的专家。
  • 节省时间:AngularJs允许我们使用组件, 因此我们可以再次使用它们, 从而节省了时间和不必要的代码。
  • 准备使用的模板:AngularJs主要是纯HTML, 主要使用纯HTML模板并将其传递给DOM, 然后传递给AngularJS编译器。它遍历模板即可使用。

主要特征:

模型视图控制器(MVC)

:

一种架构, 基本上是用于开发应用程序的软件模式。它一般由三个部分组成, 分别是:

  • 型号:用于管理应用程序数据。
  • 查看:负责显示应用程序数据。
  • 控制器:主要工作是连接模型和视图组件。

通常, 当我们谈论MVC体系结构时, 我们必须将应用程序分为这三个组件, 然后编写代码以将它们连接起来。但是, 在AngularJs中, 我们要做的就是将应用程序拆分为MVC, 其余的由它自己完成。它节省了大量时间, 并允许用更少的代码完成工作。

数据模型绑定

:

AngularJS中的数据绑定是一个双向过程, 即MVC体系结构的视图层是模型层的精确副本。你无需编写特殊代码即可将数据绑定到HTML控件。通常, 在其他MVC架构中, 我们必须不断更新视图层和模型层以保持彼此同步。在AngularJs中, 可以说模型层和视图层保持彼此同步。就像模型中的数据更改时一样, 视图层也会反映更改, 反之亦然。它会立即自动发生, 这有助于确保始终更新模型和视图。

范本

:

使用AngularJS的主要优点是它如何使用模板。通常情况是, 模板由浏览器传递到DOM中, 然后DOM成为AngularJS编译器的输入, 然后AngularJS遍历DOM模板以呈现称为指令的指令。 AngularJS的其他兄弟姐妹使用HTML字符串的工作方式有所不同, 而AngularJs则不操纵模板字符串。使用DOM赋予了我们扩展指令词汇表甚至将其抽象为可重用组件的特权。

准备好单元测试:-Google设计人员的关注不仅是开发Angular, 而且还开发了一个称为" Karma"的测试框架, 该框架有助于设计AngularJS应用程序的单元测试。

AngularJS的优点:

依赖注射

:依赖注入是一种软件设计模式。它基于控制反转。反转控制意味着对象不会创建其他对象。而是从外部来源获取这些对象。此后, 主对象不会创建依赖对象, 然后使用其方法。而是由外部源创建依赖对象, 并将其提供给源对象以供进一步使用。在依赖注入的基础上, 我们创建了一个服务, 用于从数据库中获取所有信息并进入模型类。

在Angular.JS中, 通过使用"可注入工厂方法"或"构造函数"来注入依赖项。

这些成分可以注入

"服务"

"值"

组件作为依赖项。

$ http服务通常以以下方式在控制器内定义。

sampleApp.controller(" AngularJSController", 函数($ scope, $ http)


木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: