AngularJS 中的控制器语法

Rana Hasnain Khan 2022年5月31日

Angular Angular Controller

我们将通过示例介绍 AngularJS 中的 controller as 语法。

AngularJS 中的 `Controller as` 语法

在 AngularJS 的 1.1.5 版本中，引入了 Controller as 语法。它对我们思考 AngularJS 的方式产生了重大影响。

这是作为实验功能添加的。这是一项基本功能，可帮助我们更快、更轻松地使用控制器功能。

我们可以使用 controller as 语法来调用控制器直接访问控制器。让我们通过一个例子来创建一个新的控制器，它有一个简单的函数来打印一个名字。

让我们在 AngularJS 中创建一个新项目，并通过一个 controller as 语法的示例。首先，我们将使用 script 标签添加 AngularJS 库。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>

现在我们将使用 ng-app 定义 AngularJS 应用程序。

<body ng-app="">
   ...
</body>

我们将创建一个 script.js 文件并创建一个控制器。这个控制器将有一个函数 getName，它将登录到控制台，如下所示。

import angular from 'angular';

angular.module('app', []).controller('nameController', function() {
  this.getName = function(){
    console.log("Activated!")
  }
});

我们将在 index.html 中为我们的应用程序创建前端。如下所示，我们将创建一个按钮，当用户点击它时将调用函数 getName。

<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css" />
    <script src="lib/script.js"></script>
  </head>

  <body ng-app="app" ng-cloak>
    <div ng-controller="nameController as name">
      <input type="button" value="Get Name" ng-click="name.getName()">
    </div>
  </body>
</html>

输出：

控制器作为 angularjs 中的语法示例

控制台输出：

控制器的控制台结果作为 angularjs 中的语法

上面的例子展示了 controller as 语法，让我们可以很容易地调用函数并记住控制器的名字是一个关键字或一个简短的词，可以很容易地输入。

演示

Author: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

AngularJS 中的 Controller as 语法

相关文章 - Angular Controller

AngularJS 中的 `Controller as` 语法