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

    xiaoxiao2023-07-22  134

    输出被使用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软件开发者遵循的一个最佳实践,也是我们应该遵循的。请学习他,运用它,并与它同在吧(阿门).

    相关资源:敏捷开发V1.0.pptx
    最新回复(0)