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