你的第一個控制器

Created: November-22, 2018

控制器是 Angular 中使用的基本結構，用於保留範圍並處理頁面中的某些操作。每個控制器都與 HTML 檢視耦合。

下面是 Angular 應用程式的基本樣板：

<!DOCTYPE html>

<html lang="en" ng-app='MyFirstApp'>
    <head>
        <title>My First App</title>

        <!-- angular source -->
        <script src="https://code.angularjs.org/1.5.3/angular.min.js"></script>
        
        <!-- Your custom controller code -->
        <script src="js/controllers.js"></script>
    </head>
    <body>
        <div ng-controller="MyController as mc">
            <h1>{{ mc.title }}</h1>
            <p>{{ mc.description }}</p>
            <button ng-click="mc.clicked()">
                Click Me!
            </button>
        </div>
    </body>
</html>

這裡有幾點需要注意：

<html ng-app='MyFirstApp'>

使用 ng-app 設定應用程式名稱可讓你在外部 Javascript 檔案中訪問應用程式，這將在下面介紹。

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

我們需要一個 Javascript 檔案，你可以在其中定義控制器及其操作/資料。

<div ng-controller="MyController as mc">

ng-controller 屬性為該 DOM 元素設定控制器，併為其下的所有子元素（遞迴）設定。

你可以通過說 ... as mc 來擁有多個相同的控制器（在這種情況下，MyController），我們給控制器的這個例項一個別名。

<h1>{{ mc.title }}</h1>

{{ ... }} 表示法是一個 Angular 表示式。在這種情況下，這將把 <h1> 元素的內部文字設定為 mc.title 的值。

注意： Angular 採用雙向資料繫結，這意味著無論你如何更新 mc.title 值，它都將反映在控制器和頁面中。

還要注意的是角用語不不具有參考的控制器。Angular 表示式可以像 {{ 1 + 2 }} 或 {{ "Hello " + "World" }} 一樣簡單。

<button ng-click="mc.clicked()">

ng-click 是一個 Angular 指令，在這種情況下繫結按鈕的 click 事件以觸發 MyController 例項的 clicked() 功能。

考慮到這些因素，讓我們編寫一個 MyController 控制器的實現。通過上面的示例，你可以在 js/controller.js 中編寫此程式碼。

首先，你需要在 Javascript 中例項化 Angular 應用程式。

var app = angular.module("MyFirstApp", []);

請注意，我們在此處傳遞的名稱與你使用 ng-app 指令在 HTML 中設定的名稱相同。

現在我們有了 app 物件，我們可以用它來建立控制器。

app.controller('MyController', function(){
    var ctrl = this;

    ctrl.title = "My First Angular App";
    ctrl.description = "This is my first Angular app!";

    ctrl.clicked = function(){
        alert("MyController.clicked()");
    };
});

注意： 對於我們希望成為控制器例項一部分的任何內容，我們使用 this 關鍵字。

這就是構建簡單控制器所需的全部內容。