AngularJS—使用模块组织你的代码

2014-8-8 09:34| 发布者: joejoe0332| 查看: 6140| 评论: 0|原作者: LeoXu|来自: 开源中国社区

摘要: AngularJS 的库里面有很多东西，但本文中我只想专注于小的，针对特定主题的库，我相信通过它们能对Angular有一个较好的介绍. 理解这篇文章并不需要你有任何Angular相关的，甚至是JavaScript的经验。希望你能从本文 ...

控制器和封装

　　那就是当控制器被Angular调用时会运行的代码. 那个控制器会在文件被加载时运行起来，也就是一开始HTML被加载的时候. 这意味着控制器会被加载到app模块中，而这些属性会被添加到控制器对象（函数）中。因为我们想this变量添加了属性，我们就可以在稍后获取这些属性，但它们是被封装了起来的，因此它们不可以被每个人随意的更改.

　　现在，让我们跳到HTML中控制器被引用和使用的地方.

第一个Div

　　这是我们的MainCtrl控制器被引用和使用的第一个Div。它看起来就像下面这样:

1

2

3

4

5

6

<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

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

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

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

　　编程了下面这一:

Hello MainCtrl!

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

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

1	`<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"];
 
  });
})();