什么是Angular？一起认识这个流行JavaScript框架

WBOLT_COM 8 月 12, 2022 1.3k+ 0

如果您从事软件开发，您可能听说过Angular。它是最流行的JavaScript框架之一，开发人员使用它来构建动态网站。在本文中，您将了解AngularJS的概念、Angular的首次构建时间及其优势。

什么是AngularJS？
AngularJS 的优点
学习AngularJS之前

什么是AngularJS？

AngularJS主页

那么什么是角？它是一个开源软件工程框架，用于构建单页Web应用程序。开发人员还使用它为HTML网页创建动画菜单。

该框架是Google工程师Misko Hevery和Adam Abrons的创意。Google于2012年正式发布了第一个版本AngularJS，并一直在维护它。

在AngularJS发布之前，还有其他方法可以创建动态页面。但是，它们不如框架方便。

AngularJS使用模型-视图-控制器(MVC) 架构，该架构用于Web应用程序开发。

这种类型的架构包括：

模型——管理信息并从控制器接收输入的数据结构
视图——信息的表示
控制器——响应输入并与模型交互

在AngularJS的上下文中，模型是框架，而视图是HTML，控件是JavaScript。

简而言之：

AngularJS绑定JavaScript和HTML
JavaScript接受用户输入并将其发送给AngularJS
AngularJS使用输入来修改HTML

通过框架绑定JavaScript和HTML，它们之间的代码是同步的。这种机制使开发人员的工作更轻松，因为它减少了需要编写的代码量。

AngularJS的优点

AngularJS在Web开发人员中很受欢迎，原因如下：

双向数据绑定——由于AngularJS的架构绑定了JavaScript和HTML，两者的代码已经同步。因此，该框架为开发人员节省了大量时间。
指令——该框架通过指令扩展了HTML文件的功能。为了启用指令，开发人员将ng-前缀添加到HTML属性中。您可以在此处查看指令列表。下面是一个使用指令的例子：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="" ng-init="age='20'">

<p>Input your age:</p>
<p>Age: <input type="text" ng-model="age"></p>
<p>You wrote: {{ age }}</p>

</div>

</body>
</html>

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="" ng-init="age='20'">

<p>Input your age:</p>
<p>Age: <input type="text" ng-model="age"></p>
<p>You wrote: {{ age }}</p>

</div>

</body>
</html>