你的第一个控制器

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 关键字。

这就是构建简单控制器所需的全部内容。