AngularJS 指令：ng-init、ng-app、ng-model 和 ng-repeat

AngularJS 中的指令是什么？

A 指示 AngularJS 中的是一个为 HTML 提供新功能的命令。当 Angular 浏览 HTML 代码时，它将首先在页面中找到指令，然后相应地解析 HTML 页面。我们在前面的章节中见过的 AngularJS 指令的一个简单示例是“ng-model 指令”。此指令用于将我们的数据模型绑定到我们的视图。

请注意： 您可以在 HTML 页面中使用 ng-init、ng-repeat 和 ng-model 指令来编写基本 angular 代码，而无需使用控制器。这些指令的逻辑位于 Google 提供的 Angular.js 文件中。控制器是允许业务逻辑的下一级 angular 编程构造，但如前所述，对于一个应用程序来说，拥有控制器并不是强制性的。

如何在 AngularJS 中创建指令

正如我们在介绍中定义的，AngularJS 指令是一种扩展功能的方法 HTML.

定义了 4 条指令 AngularJS.

下面是 AngularJS 指令的列表以及用于解释每个指令的示例。

AngularJS 中的 ng-app

这用于初始化 Angular.JS 应用程序。当此指令位于 HTML 页面中时，它基本上会告诉 Angular，此 HTML 页面是一个 angular.js 应用程序。

np-app 的示例

下面的示例展示了如何使用 ng-app 指令。在本例中，我们将简单展示如何将普通 HTML 应用程序变成 angularJS 应用程序。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="">

    Tutorial Name : {{ "Angular" + "JS"}}

</div>

</body>
</html>

代码说明：

“ng-app”指令被添加到我们的 div 标签中，以表明此应用程序是一个 angular.js 应用程序。请注意，ng-app 指令可以应用于任何标签，因此也可以将其放在 body 标签中。
因为我们已经将此应用程序定义为 angular.js 应用程序，所以我们现在可以使用 angular.js 功能。在我们的例子中，我们使用表达式简单地连接 2 个字符串。

如果代码成功执行，则在浏览器中运行代码时将显示以下输出。

输出：

输出清楚地显示了表达式的输出，这只有在我们将应用程序定义为 angularjs 应用程序时才有可能。

AngularJS 中的 ng-init

这用于初始化应用程序数据。有时您可能需要应用程序的一些本地数据，这可以使用 ng-init 指令来完成。

ng-init 示例

下面的例子展示了如何使用 ng-init 指令。

在这个例子中，我们将使用 ng-init 指令创建一个名为“TutorialName”的变量，并在页面上显示该变量的值。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

代码说明：

ng-init 指令被添加到我们的 div 标签中，以定义一个名为“TutorialName”的局部变量，并赋予该变量的值“AngularJS”。
我们使用 AngularJs 中的表达式来显示在 ng-init 指令中定义的变量名“TutorialName”的输出。

如果代码成功执行，则在浏览器中运行代码时将显示以下输出。

输出：

在输出中，

结果清楚地显示了包含字符串“AngularJS”的表达式的输出。这是因为字符串“AngularJS”被分配给 ng-init 部分中的变量“TutorialName”。

AngularJS 中的 ng-model

最后，我们有 ng-model 指令，用于将 HTML 控件的值绑定到应用程序数据。下面的示例显示了如何使用 ng-model 指令。

ng-model 的示例

在这个例子中，

我们将创建两个变量，分别称为“数量”和“价格”。这些变量将绑定到两个文本输入控件。
然后，我们将根据价格和数量值的乘积显示总金额。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="quantity=1;price=5">

    People : <input type="number" ng-model="quantity">

    Registration Price : <input type="number" ng-model="price">

    Total : {{quantity * price}}

</div>

</body>
</html>

代码说明：

ng-init 指令被添加到我们的 div 标签中，以定义 2 个局部变量；一个叫做“数量”，另一个叫做“价格”。
现在我们使用 ng-model 指令将“人员”和“注册价格”的文本框分别绑定到我们的局部变量“数量”和“价格”。
最后，我们通过表达式显示总数，即数量和价格变量的乘积。

如果代码成功执行，则在浏览器中运行代码时将显示以下输出。

输出：

输出清楚地显示了人员值和注册价格的乘积。

现在，如果您转到文本框并更改人员和注册价格的值，总计将自动更改。

上面的输出只是展示了 angularJs 中数据绑定的强大功能，它是通过使用 ng-model 指令.

AngularJS 中的 ng-repeat

这用于重复 HTML 元素。下面的示例展示了如何使用 ng-repeat 指令.

ng-repeat 的示例

在这个例子中，

我们将在数组变量中保存一系列章节名称，
然后使用 ng-repeat 指令将数组的每个元素显示为列表项

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

代码说明：

ng-init 指令被添加到我们的 div 标签中，以定义一个名为“chapters”的变量，它是一个包含 3 个字符串的数组变量。
ng-repeat 元素的使用方式是声明一个名为“names”的内联变量，并遍历 chapters 数组中的每个元素。
最后，我们显示本地内联变量“names”的值。

如果代码成功执行，则在浏览器中运行代码时将显示以下输出。

输出：

上面的输出仅显示 ng-repeat 指令获取名为“chapters”的数组中的每个值并为数组中的每个项目创建 HTML 列表项。

总结

指令用于扩展 HTML 的功能。Angular 提供了内置指令，例如

ng-app – 用于初始化 Angular 应用程序。
ng-init – 用于创建应用程序变量
ng-model – 用于将 HTML 控件绑定到应用程序数据
ng-repeat – 用于使用角度重复元素。

你可能会喜欢：

AngularJS 中的指令是什么？

如何在 AngularJS 中创建指令

AngularJS 中的 ng-app

np-app 的示例

AngularJS 中的 ng-init

ng-init 示例

相关文章

AngularJS 中的 ng-model

ng-model 的示例

AngularJS 中的 ng-repeat

ng-repeat 的示例

总结