带有 ng-Controller 示例的 AngularJS 控制器

AngularJS 中的控制器是什么？

A 控制器 在 AngularJS 中，它从视图中获取数据，处理数据，然后将数据发送到视图，视图将显示给最终用户。控制器将拥有您的核心业务逻辑。控制器将使用数据模型，执行所需的处理，然后将输出传递给视图，视图将显示给最终用户。

从 Angular 的角度来看控制器起什么作用？

以下是 AngularJS 控制器工作的简单定义：

控制器的主要职责是控制传递给视图的数据。范围和视图具有双向通信。
视图的属性可以调用作用域上的“函数”。此外，视图上的事件可以调用作用域上的“方法”。下面的代码片段给出了一个函数的简单示例。

这个函数（$scope）这是在定义控制器时定义的，以及一个用于返回$scope.firstName 和 $scope.lastName 的连接的内部函数。
In AngularJS，当你将函数定义为变量时，它被称为方法。

数据以这种方式从控制器传递到范围，然后数据在范围和视图之间来回传递。
范围用于将模型暴露给视图。可以通过范围中定义的方法修改模型，这些方法可以通过视图中的事件触发。我们可以定义从范围到模型的双向模型绑定。
控制器不应该用于操作 DOM。这应该由我们稍后将看到的指令来完成。
最佳实践是根据功能来设置控制器。例如，如果您有一个用于输入的表单，并且需要一个控制器，那么请创建一个名为“表单控制器”的控制器。

如何在 AngularJS 中构建基本控制器

以下是在 AngularJS 中创建控制器的步骤：

步骤 1）创建一个基本的 HTML 页面

在开始创建控制器之前，我们需要首先设置好基本的 HTML 页面。

下面的代码片段是一个简单的 HTML 页面，标题为“活动注册”，并引用了以下重要库： Bootstrap、jquery 和 Angular。

我们正在添加对 bootstrap CSS 样式表的引用，它们将与 bootstrap 库一起使用。
我们正在添加对 angularjs 库的引用。因此，现在我们对 angular.js 所做的任何事情都将从这个库中引用。
我们正在添加对引导库的引用，以使我们的网页对某些控件的响应更快。
我们添加了用于 DOM 操作的 jquery 库的引用。这是 Angular 所必需的，因为 Angular 中的某些功能依赖于此库。

默认情况下，上述代码片段将出现在我们所有的示例中，以便我们可以在后续部分仅展示特定的 angularJS 代码。

步骤 2）检查文件和文件结构

其次，让我们看看我们的课程将要开始使用的文件和文件结构。

首先，我们将文件分成 2 个文件夹，就像任何传统的 Web 应用程序一样。我们有“CSS”文件夹。它将包含我们所有的层叠样式表文件，然后我们将有“lib”文件夹，它将包含我们所有的 JavaScript 文件。
bootstrap.css 文件位于 CSS 文件夹中，用于为我们的网站添加良好的外观和感觉。
angular.js 是我们的主要文件，它是从 angularJS 网站下载并保存在我们的 lib 文件夹中。
app.js 文件将包含我们的控制器代码。
bootstrap.js 文件用于补充 bootstrap.cs 文件，以便为我们的 Web 应用程序添加引导功能。
jquery 文件将用于向我们的网站添加 DOM 操作功能。

步骤 3）使用 AngularJS 代码显示输出

我们在这里要做的只是在浏览器中查看页面时以文本格式和文本框形式显示单词“AngularJS”。让我们看一个如何使用 angular.js 来实现这一点的示例：

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">

	Tutorial Name : <input type="text" ng-model="tutorialName"><br>

	This tutorial is {{tutorialName}}
</div>
<script>
	var app = angular.module('DemoApp',[]);

	app.controller('DemoController', function($scope){
	$scope.tutorialName = "Angular JS";
	});
</script>

</body>
</html>

代码说明：

这个 ng-应用程序 关键字用于表示此应用程序应被视为 angular 应用程序。以前缀开头的任何内容 ‘ng’ 被称为指示。“DemoApp” 是我们给 Angular.JS 应用程序起的名字。
我们创建了一个 div 标签，并在该标签中添加了 ng-controller 指令以及控制器的名称“DemoController”。这基本上使我们的 div 标签能够访问 Demo Controller 的内容。您需要在指令下提及控制器的名称，以确保您能够访问控制器内定义的功能。
我们使用 ng-model 指令创建模型绑定。它的作用是将 Tutorial Name 的文本框绑定到成员变量“tutorialName”。
我们正在创建一个名为“tutorialName”的成员变量，它将用于显示用户在教程名称文本框中输入的信息。
我们正在创建一个将附加到我们的 DemoApp 应用程序的模块。因此，该模块现在成为我们应用程序的一部分。
在模块中，我们定义一个函数，将默认值“AngularJS”分配给我们的 tutorialName 变量。

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

输出：

由于我们为变量 tutorialName 分配了“Angular JS”的值，因此它会显示在文本框和纯文本行中。

如何在 AngularJS 控制器中定义方法

通常，人们希望在控制器中定义多种方法来分离业务逻辑。

例如，假设你想让控制器做两件基本的事情，

执行 2 个数字的加法
执行两个数字的减法

然后，您最好在控制器内部创建两个方法，一个用于执行加法，另一个用于执行减法。

让我们看一个简单的例子，说明如何在 Angular.JS 控制器中定义自定义方法。控制器将简单地返回一个字符串。

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
	Tutorial Name :<input type="text" ng-model="tutorialName"><br>
	<br>
	This tutorial is {{tutorialName}}	
</div>

<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
	$scope.tName = function() {
        return $scope.tName;
    };
});
</script>	
</body>
</html>

代码说明：

这里我们只是定义了一个返回“AngularJS”字符串的函数。该函数通过名为 tutorialName 的成员变量附加到范围对象。
如果命令成功执行，则在浏览器中运行代码时将显示以下输出。

输出：