AngularJS 控制器与 ng-Controller 示例

AngularJS 中的 Controller 是什么？

AngularJS 中的Controller接收来自视图的数据，处理数据，然后将数据发送到显示给最终用户的视图。Controller 将包含您的核心业务逻辑。Controller 将使用数据模型，执行所需处理，然后将输出传递给视图，该视图随后会显示给最终用户。

从 Angular 的角度来看 Controller 做什么？

以下是 AngularJS Controller 工作原理的简单定义

Working of AngularJS Controller — AngularJS Controller 的工作原理

Controller 的主要职责是控制传递到视图的数据。作用域和视图之间存在双向通信。
视图的属性可以调用作用域上的“函数”。此外，视图中的事件可以调用作用域上的“方法”。下面的代码片段提供了一个简单的函数示例。

在定义 Controller 时定义的函数 ($scope) 以及用于返回 $scope.firstName 和 $scope.lastName 连接的内部函数。
在AngularJS中，当您将函数定义为变量时，它被称为方法。

数据以这种方式从 Controller 传递到作用域，然后数据在作用域和视图之间来回传递。
作用域用于将模型公开给视图。模型可以通过作用域中定义的方法进行修改，这些方法可以由视图中的事件触发。我们可以定义从作用域到模型（scope to model）的双向模型绑定。
Controller 理想情况下不应被用于操作 DOM。这应该由我们稍后将看到的指令来完成。
最佳实践是基于功能来构建 Controller。例如，如果您有一个用于输入的表单，并且您需要一个 Controller 来处理它，则创建一个名为“form controller”的 Controller。

如何在 AngularJS 中构建一个基本的 Controller

以下是在 AngularJS 中创建 Controller 的步骤

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

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

下面的代码片段是一个简单的 HTML 页面，其标题为“Event Registration”，并引用了 Bootstrap、jquery 和 Angular 等重要库。

我们正在添加对 Bootstrap CSS 样式的引用，这些样式将与 Bootstrap 库结合使用。
我们正在添加对 angularjs 库的引用。因此，我们将来使用 angular.js 所做的一切都将从此库引用。
我们正在添加对 Bootstrap 库的引用，以使我们的网页在某些控件上更具响应性。
我们已添加对 jquery 库的引用，这些库将用于 DOM 操作。Angular 需要这个，因为 Angular 中的某些功能依赖于此库。

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

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

其次，让我们看看我们将开始使用的文件和文件结构，以便在我们的课程中继续。

首先，我们将文件分为 2 个文件夹，这与任何传统 Web 应用程序一样。我们有“CSS”文件夹。它将包含我们所有的层叠样式表文件，然后我们将有我们的“lib”文件夹，其中将包含我们所有的JavaScript文件。
bootstrap.css 文件位于 CSS 文件夹中，用于为我们的网站添加良好的外观和感觉。
angular.js 是我们从 angularJS 网站下载并保存在 lib 文件夹中的主文件。
app.js 文件将包含我们的 Controller 代码。
bootstrap.js 文件用于补充 bootstrap.cs 文件，为我们的 Web 应用程序添加 Bootstrap 功能。
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-app关键字用于表示此应用程序应被视为一个 Angular 应用程序。任何以“ng”前缀开头的都称为指令。“DemoApp”是我们 Angular.JS 应用程序的名称。
我们创建了一个 div 标签，在该标签中，我们添加了一个 ng-controller 指令以及我们的 Controller 名称“DemoController”。这基本上使我们的 div 标签能够访问 Demo Controller 的内容。您需要在指令下指定 Controller 的名称，以确保您能够访问 Controller 中定义的功能。
我们正在使用 ng-model 指令创建模型绑定。它的作用是将“Tutorial Name”的文本框绑定到成员变量“tutorialName”。
我们正在创建一个名为“tutorialName”的成员变量，该变量将用于显示用户在“Tutorial Name”文本框中键入的信息。
我们正在创建一个模块，该模块将附加到我们的 DemoApp 应用程序。因此，这个模块现在是我们应用程序的一部分。
在模块中，我们定义了一个函数，该函数将我们的 tutorialName 变量的默认值分配为“AngularJS”。

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

输出

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

如何在 AngularJS Controllers 中定义方法

通常，人们会希望在 Controller 中定义多个方法来分离业务逻辑。

例如，假设您想让您的 Controller 完成 2 个基本操作，

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

那么您应该在 Controller 中创建 2 个方法，一个用于执行加法，另一个用于执行减法。

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

<!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 的成员变量附加到 scope 对象。
如果命令执行成功，当您在浏览器中运行代码时，将显示以下输出。

输出

带有 ng-Controller 的 AngularJS Controller 示例

让我们看一个“HelloWorld”的例子，其中所有功能都放在一个文件中。现在是时候将 Controller 的代码放在单独的文件中了。

让我们按照以下步骤进行操作

步骤 1）在 app.js 文件中，为您的 Controller 添加以下代码

angular.module('app',[]).controller('HelloWorldCtrl',function($scope)
{
	$scope.message = "Hello World"
});

上面的代码执行以下操作

定义一个名为“app”的模块，该模块将包含 Controller 以及 Controller 功能。
创建一个名为“HelloWorldCtrl”的 Controller。此 Controller 将用于具有显示“Hello World”消息的功能。
scope 对象用于将信息从 Controller 传递到视图。因此，在我们的例子中，scope 对象将用于保存一个名为“message”的变量。
我们正在定义 message 变量并为其分配“Hello World”的值。

步骤 2）现在，在您的 Sample.html 文件中添加一个 div 类，其中将包含 ng-controller 指令，然后添加对成员变量“message”的引用

同时别忘了添加对脚本文件 app.js 的引用，其中包含您的 Controller 的源代码。

<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
	<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>

<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>

<script src="app.js"></script>

</body>
</html>

如果上面的代码输入正确，当您在浏览器中运行代码时，将显示以下输出。

输出

摘要

Controller 的主要职责是创建一个作用域对象，该对象随后会传递到视图。
如何使用 ng-app、ng-controller 和 ng-model 指令构建一个简单的 Controller
如何向 Controller 添加自定义方法，这些方法可用于分离 angularjs 模块中的各种功能。
Controller 可以定义在外部文件中，以将此层与视图层分开。在创建 Web 应用程序时，这通常是最佳实践。

AngularJS 中的 Controller 是什么？

从 Angular 的角度来看 Controller 做什么？

如何在 AngularJS 中构建一个基本的 Controller

相关文章

如何在 AngularJS Controllers 中定义方法

带有 ng-Controller 的 AngularJS Controller 示例

摘要

订阅新闻通讯