菜鸟AngularJS学习之路 【第二天】。(事件绑定指令 循环输出 控制器嵌套)

---

学习Angularjs 的第二天 ，感觉进步很慢，但是要稳扎稳打不能囫囵吞枣，每个知识点都必须敲一敲才能有效果。
先来回顾今天的第一个 事件绑定指令
首先按照书上写的例子 绑定的是最常见的 click事件 代码如下：
html：

    <div ng-controller="printController">
        <button style="width:auto; height: 20px;" ng-click="showMenu()">他喜欢吃什么面呢？</button>
    </div>

js：

printApp.controller("printController",function ($scope) {
    alert("羊肉面,牛肉面,刀削面,炸酱面,热干面,羊肉面,二狗下面");
});

点击按钮以后会弹出梅哥的爱吃的所有面！ 感觉和jquery事件绑定也差不多，Angularjs 通过指令来完成绑定操作。个人觉得是很大程度上让控制器能够保持精简！angualarjs一再强调不能呢个污染全局应用域js中的window 和angularjs中的顶级对象$rootscope。言归正传，和click事件一样 其他事件click事件一样可以在控制器里面得到处理。showMenu()方法也可以传值这和js里面是一样的。

事件这一块目前看来还算简单，还没看到比较复杂的情况。当然还有很多方面没有接触到 这里只是先简单的了解用法。

接下来是循环输出指令:ng-repeat 个人觉得和ASP.NET里面的repeater控件很像，都是用来输出同样的结构不同的值，不过ng-repeat指令简单方便的多，ng-repeat可以接受一个数组或者对象来作为数据源 下面是我写的例子，在上面的事件指令上拓展了一下

数组例子：

html:

<div ng-controller="printController">

    <button style="width:auto; height: 20px;" ng-click="showMenu()">他喜欢吃什么面呢？</button>

    <h1 ng-repeat="noodles in menu">梅哥想吃{{ noodles }}</h1>

</div>

js

printApp.controller("printController",function ($scope) {
    $scope.showMenu=function () {
        $scope.menu=[
            "牛肉面",
            "刀削面",
            "炸酱面",
            "热干面",
            "羊肉面",
            "二狗下面"
        ];
    };
});

运行结果如图：

其实看起来很简单 h1 里面 就是一个循环去遍历我们指定的数据源，个人是这么觉得的 但是内部怎么实现的暂时不知道。我们再来看一个对象的例子

js:

printApp.controller("printController",function ($scope) {
    $scope.showMenu=function () {
        $scope.menu={
            one:"牛肉面",
            two:"羊肉面"
        };
    };
});

运行结果：

可见改变js的数据源以后 得到的结果都是一样的！用$ng-repeat

3.控制器嵌套

最后是控制器的嵌套，控制器的嵌套和dom元素的嵌套是一样的 在实际代码中确实也是在嵌套的元素中指定了不一样的控制器 ，嵌套以后就和原型继承一样 子控制器是可以访问到父控制器的属性和方法（就是继承到了这些属性和方法）

html

<!--控制器嵌套-->

<div id="fatherDiv" ng-app="fatherApp" ng-controller="fatherController">
    <h4>梅哥在{{ city }}吃面</h4>
    <div ng-controller="childController">
        <h4>梅哥住在{{ address }}</h4>
    </div>
</div>

js

fatherApp.controller("fatherController",function ($scope) {
    $scope.city="深圳";
});

fatherApp.controller("childController",function ($scope) {
    $scope.address=$scope.city;
});

运行结果如下图

下面的深圳是从父控制器继承来的！ 虽然都是小知识 但是不积跬步无以至千里

明天继续，稳扎稳打！！ 梅神快来指点我！