使用AngularJS编写较为优美的JavaScript代码指南(5)

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

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

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

编程了下面这一:

Hello MainCtrl!

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

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

<li ng-repeat="a in mc.allThings">{{a}}</li>

变成了如下的输出

1. first 2. second 3. third

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

SecondCtrl : 几乎就是同样的东西

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

(function() { var app = angular.module(&apos;mainApp&apos;); app.controller(&apos;SecondCtrl&apos;, function() { console.log("in SecondCtrl..."); // vt = virtual this - just shorthand vt = this; vt.name = &apos;SecondCtrl&apos;; vt.allThings = ["bacon", "lettuce", "tomato"]; }); })();

仔细看看下面这一行:
 

var app = angular.module(&apos;mainApp&apos;);

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

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

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

您可能感兴趣的文章: