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` 語法