AngularJS —— 使用模块组织你的代码 【已翻译100%】(3/3)

输出被使用Angular指令来创建

不过，它使用了一种特殊的方式创建那个输出，它使用了两种Angular指令:

{{mc.name}}

ng-repeat

第一个指令被关联到了Div那一行上面MainCtrl的声明和引用. 我们告诉Angular，说我们想以mc这个名称引用我们的MainCtrl函数（对象）。那就是Angular提供的一个很棒的缩写功能.

现在，因为我们将一个属性放到了MainCtrl的this对象上，我们现在就可以通过mc和属性的名称来引用那些东西了。我们将那些东西包含特殊的双大括号{{ }}里面，如此Angular编译器就懂得那是可以运行的代码，你就会瞧见Angular将其转换成了HTML:

<p>Hello {{mc.name}}!</p>

编程了下面这一:

Hello MainCtrl!

之后，我们设置了一个漂亮的无需列表，并使用了ng-repeat指令来迭代输出数组中的每一行.

然后Angular跌倒了整个allThings数组，并将其装换成了下面的HTML

{{a}}
变成了如下的输出

1. first
2. second
3. third

就那么简单。这就是模块化的所有东西，我们的值再也不会被任何人动手动脚了.

SecondCtrl : 几乎就是同样的东西

这里有SecondCtrl的代码. 代码机会就是一样的，除了我们获取我满原来的app模块处有点不一样——不是第一次创建它了.

(function() {

  var app = angular.module('mainApp');

  app.controller('SecondCtrl', function() {
    console.log("in SecondCtrl...");
    // vt = virtual this - just shorthand
    vt = this;
    vt.name = 'SecondCtrl';
    vt.allThings = ["bacon", "lettuce", "tomato"];

  });
})();

仔细看看下面这一行:

var app = angular.module('mainApp');

唯一的不同就是我们没有提供引用数组.

那是因为mainApp已经是存在了的，而我们只是想向其添加另外一个新模块 (SecondCtrl) .

总结：最佳实践

所有其它的脚本中的代码，以及HTML基本上是一样的,而此处最重要的是所有的代码都被模块化了，数据也被封装了起来，以便更好的组织我们的代码. 这是Google软件开发者遵循的一个最佳实践，也是我们应该遵循的。请学习他，运用它，并与它同在吧（阿门）.