(function() { var app = angular.module('mainApp', []); app.controller('MainCtrl', function() { console.log("in MainCtrl..."); // vt = virtual this - just shorthand vt = this; vt.name = 'MainCtrl'; vt.allThings = ["first", "second", "third"]; }); })();
那是因为我们需要这些代码在文件mainCtrl.js被加载时就运行.
现在，请注意在这个IIFE中的第一行代码.
var app = angular.module('mainApp', []);
这行代码是Angular将一个模块添加到其命名空间的方式. 在这里，我们添加了一个将用来展示我们应用程序的模块. 这是应用程序的模块，而我们已经将其命名为 itmainApp, 它跟HTML页面上ng-app所指定的值是一样的.
我们也创建了一个叫做app的（只在IIFE本地可见的）本地变量，以便我们将可以在这个函数内部用来再次添加一个控制器.
奇怪的 Angular 语法
请你也要再仔细看看第一行。你会注意到我们是首次创建mainApp模块，而如果是首次，则我们必须提供以字符串数组的形式提供其可能需要的任何依赖(，表示出依赖库的名称). 不过，在这里对于这个简单的示例而言，我们不需要任何的依赖。但Angular仍然需要我们传入一个空的数组，以便它知晓我们正在创建新的模块，而不是去试图加载一个已经被创建好了的模块.
提示: 你将会看到我们会在secondCtrl.js里加载mainApp模块，而上面所提的数组将会有更多的作用.
我们一把mainApp创建好，就需要向其添加我们的控制器. 这些就是Angular预期我们在HTML（的div中）加入的控制器.
将控制器添加到App模块
添加控制器的代码看起来像下面这样:
app.controller('MainCtrl', function() { console.log("in MainCtrl..."); // vt = virtual this - just shorthand vt = this; vt.name = 'MainCtrl'; vt.allThings = ["first", "second", "third"]; });
为了添加我们的控制器函数，我们向app.controller()函数提供了一个控制器名称和一个函数. 在此处我们提供了一个匿名函数.
所以，我们的控制器主体代码就是下面这几行了:
console.log("in MainCtrl..."); // vt = virtual this - just shorthand vt = this; vt.name = 'MainCtrl'; vt.allThings = ["first", "second", "third"];
这里，当我们的控制器运行时，会向控制台输出一行. 然后，我们将this变量重命名为vt（方便起见，就叫他虚拟的this) ，而后我天为其添加了一个name属性和一个叫做allThings 的字符串数组.
控制器和封装
那就是当控制器被Angular调用时会运行的代码. 那个控制器会在文件被加载时运行起来，也就是一开始HTML被加载的时候. 这意味着控制器会被加载到app模块中，而这些属性会被添加到控制器对象（函数）中。因为我们想this变量添加了属性，我们就可以在稍后获取这些属性，但它们是被封装了起来的，因此它们不可以被每个人随意的更改.
现在，让我们跳到HTML中控制器被引用和使用的地方.
第一个Div
这是我们的MainCtrl控制器被引用和使用的第一个Div。它看起来就像下面这样:
<div ng-controller="MainCtrl as mc"> <p>mc refers to MainCtrl which has been added to the angular app module</p> <p>Hello {{mc.name}}!</p> <ol><li ng-repeat="a in mc.allThings">{{a}}</li></ol> </div>
这个div输出我们的web页面的如下部分，看起来就是接下来这张图片上所展示的那样.
输出被使用Angular指令来创建
不过，它使用了一种特殊的方式创建那个输出，它使用了两种Angular指令:
{{mc.name}} ng-repeat