AngularJS 您的第一个控制器

示例

控制器是Angular中用于保留范围和处理页面中某些动作的基本结构。每个控制器都带有一个HTML视图。


以下是Angular应用程序的基本样板:

<!DOCTYPE html>

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

        <!-- angular source -->
        <script xx_src="https://code.angularjs.org/1.5.3/angular.min.js"></script>
        
        <!-- Your custom controller code -->
        <script xx_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 xx_src="js/controllers.js"></script>

我们需要一个Javascript文件,您可以在其中定义控制器及其动作/数据。

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

该ng-controller属性设置该DOM元素及其下方所有子元素的控制器(递归)。

您可以说多个相同的控制器(在本例中为MyController)... as mc,我们为该控制器实例指定了别名。

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

该{{ ... }}表示法是Angular表达式。在这种情况下,这会将<h1>元素的内部文本设置为mc.titleis的任何值。

注意: Angular采用双向数据绑定,这意味着无论您如何更新该mc.title值,它都将同时反映在控制器和页面中。

还要注意的是角用语不具有参考的控制器。Angular表达式可以像{{ 1 + 2 }}或一样简单{{ "Hello " + "World" }}。

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

ng-click是Angular指令,在这种情况下,为按钮绑定click事件以触发实例的clicked()功能MyController。


考虑到这些因素,让我们编写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= "这是我的第一个Angular应用!";

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

注意:对于我们想成为控制器实例一部分的任何事物,我们都使用this关键字。

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