控制器是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关键字。
这是构建简单控制器所需的全部。