本文也同步发表在我的公众号“我的天空”

控制器

控制器可以说是AngularJS中最重要的部分了！之前的一些示例，除了第一讲的示例以外，我们对于AngularJS的使用都集中在HTML部分，其实AngularJS是一个典型的支持MVC架构的框架，MVC是模型（Model）、视图（View）、控制（Controller）的缩写，对于HTML来说我们通常将其归于View，既一个系统展示数据的那部分。MVC的核心是将一个系统的数据展示、逻辑控制、数据源完全的分离，使得各部分之间完全没有耦合。

回到AngularJS，我们之前的示例都集中在HMTL部分，包括指令、数据初始化、表达式、HTML重复等，接下来我们来学习控制器部分，先请看以下代码：

<body ng-app="myApp">
     <div ng-controller="person">
         {{name}}
     </div>
 </body>
 <script>
       var app=angular.module("myApp",[]);
       app.controller("person",function($scope){
            $scope.name="张三";
      });
 </script>

示例代码AngularJS_08.html

学习以上代码，该代码与我们之前的示例代码相比增加了新知识点，而这些是AngularJS中非常关键与重要的部分，一定要理解透彻。

首先我们给ng-app指令命名了，以便在JS代码中可以对其访问。接下来，我们在div中增加了一个新的指令：ng-controller，这个便是控制器，其核心作用是将一个DOM元素（即View）与AngularJS中的controller对象进行了关联，通俗的来说，便是在AngularJS中可以以对象的方式来访问、控制该DOM元素，这样便无需用类似于domcument.getElementById()之类的代码来获取并控制HTML的元素。也许现在大家对于这点还不是太能理解，不要紧，我们继续看其js部分代码。

在js代码中，我们首先通过语句angular.module("myApp",[])定义了一个模块“app”，用以获取AngularJS的应用范围，angular.module()方法有两个参数，前一个参数对应html中的ng-app命名，后一个参数是数组，如果需要依赖外部模块的话，则将外部模块名依次写入数组中，这样在执行时就能够引用了，本例我们不需要引入外部模块，所以写为空数组（我们在后面的AngularJS路由以及AngularJS依赖注入中，将会学习外部模块的引入）。

接下来通过app.controller获取添加了名为“person”控制器的DOM元素，在本示例中为div，随后就可以通过$scope来获得该DOM元素的引用。$scope实际上是一个JavaScript对象，视图（View）和控制器（Controller）都可以访问它，所以我们可以利用它在两者之间传递信息。在本例中，可以简单的将$scope认为就是我们要改写内容的那个div。

最后，我们将$scope中的name属性设置为“张三”，而在div中，我们有一个表达式{{name}}，所以在$scope中对该变量的改写就被同步到HTML上，name的值设置为“张三”，最终便在div中显示“张三”。

在AngularJS的控制器代码编写中，是不应该出现DOM元素的，一切对于DOM的操作都是通过$scope来实现的，如果你发现其代码中必须出现DOM操作语句，那么表明你的设计是不合理的，也许有时候这种写法你会觉得别扭，但是必须慢慢适应，才能感受MVC模式带来的真正好处。

自然而然的，我们立即会想到在一个页面中肯定能支持多个控制器存在，实际情况也确实如此，看以下代码：

<body ng-app="myApp">
    <div ng-controller="person1">
        {{name}}
    </div>
    <div ng-controller="person2">
        <p>{{name}}</p>
    </div>
 </body>
 <script>
     var app=angular.module("myApp",[]);
       app.controller("person1",function($scope){
           $scope.name="张三";
       });
       app.controller("person2",function($scope){
          $scope.name="李四";
       });
 </script>

示例代码AngularJS_09.html

在以上代码中，我们声明了两个控制器person1和person2，其中person2的name是显示在<P>标签中，随后将其赋予不同的值。

如果有多个控制器嵌套，那会怎么样呢？前面说过，$scope实质上是JavaScript对象，因此多个控制器嵌套，便意味着多个$scope嵌套，而$scope遵循着原型继承的原则，这意味着其可以访问父$scope，对于任何属性和方法，如果当前$scope上找不到，则会在父$scope上去找，这个和对象的处理方式是一样的，看以下代码：

<body ng-app="myApp" ng-controller="person">
    职业:{{job}}
    <div ng-controller="person1">
        姓名:{{name}} 职业:{{myjob}}
    </div>
 </body>
 <script>
     var app=angular.module("myApp",[]);
       app.controller("person",function($scope){
          $scope.job="软件工程师";
       });
       app.controller("person1",function($scope){
         $scope.name="张三";
         $scope.myjob=$scope.job;
     });
 </script>

示例代码AngularJS_10.html

在以上代码中，person1位于person内，因此person的$scope可以看做是person1中$scope的父对象。当在person1控制器中执行$scope.myjob=$scope.job时，person1中的$scope并没有job属性，那么它会去找其父对象中（person）是否有该属性，而其父对象person的$scope中是有job属性的，其值为“软件工程师”，因此在person1中，也将显示职业为“软件工程师”。

AngularJS事件

AngularJS支持HTML元素的事件，其是以指令的形式存在的，譬如ng-click为单击事件、ng-mousemove为鼠标移动事件，看以下代码：

<body ng-app="myApp" ng-controller="person">
     <div>
         姓名:{{name}}职业:{{job}}
     </div>
     <input type="button" value="更改" ng-click="change()">
 </body>
 <script>
     var app=angular.module("myApp",[]);
       app.controller("person",function($scope){
         $scope.name="张三";
         $scope.job="软件工程师";
         $scope.change=function(){
             $scope.name="李四";
             $scope.job="律师";
         }
       });
 </script>

示例代码AngularJS_11.html

在以上代码中，我们添加了一个按钮，在其内部添加了一个事件指令ng-click，其指向person中的change()方法，而在person中的$scope，其change()方法是更改name和job的值，这样当单击按钮时，div内的姓名与职业将发生改变。

该系列的示例代码

https://github.com/panyongwow/angularJS

AngularJS（四）：控制器、事件的更多相关文章

  1. AngularJs开发——控制器间的通信

    AngularJs开发——控制器间的通信 指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式 基于scope继承的方式 最简单的让控制 ...

  2. MVVM设计模式和WPF中的实现（四）事件绑定

    MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  3. HTML 事件(四) 模拟事件操作

    本篇主要介绍HTML DOM中事件的模拟操作. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4.  ...

  4. AngularJS HTML DOM& 事件

    AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性 <div ng-app= ...

  5. AngularJS 学习之事件

    1.ng-click指令:定义了AngularJS点击事件 <div ng-app="" ng-controller="myCtrl"> <b ...

  6. angularJS支持的事件

    AngularJS提供可与HTML控件相关联的多个事件.例如ng-click通常与按钮相关联.以下是AngularJS支持的事件. ng-click ng-dbl-click ng-mousedown ...

  7. angularjs的touch事件

    angularJs没有touch事件.这里提供一个touch指令. ngTouch.js "use strict"; angular.module("ngTouch&qu ...

  8. SteamVR Unity工具包（VRTK）之概览和控制器事件

    快速上手 · 克隆仓库  git clone https://github.com/thestonefox/SteamVR_Unity_Toolkit.git · 用Unity3d打开SteamVR_ ...

  9. Ⅶ.AngularJS的点点滴滴-- 事件

    事件(和js一样有冒泡和捕获) <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2 ...

  10. angularjs的ng-change事件演示

    今天练习angularjs的ng-change事件. 比如用户作出选择时,系统所指定的选项中,没有用户合适的选项.此时我们可以让用户填写. 刚开始文本框是隐藏的.当用户选择了checkbox之后才会显 ...

随机推荐

  1. UDK性能优化

    转自:http://www.cnblogs.com/NEOCSL/p/3320510.html 优化问题有很多内容可讲,涉及林林总总.今天我总结一下优化注意的地方. 1.从AnimTree和Skele ...

  2. 我对sobel算子的理解

    转自:http://blog.csdn.net/yanmy2012/article/details/8110316 索贝尔算子(Sobeloperator)主要用作边缘检测,在技术上,它是一离散性差分 ...

  3. shell里的` ` $( ) ${ } expr $(( ))

    转自:http://blog.sina.com.cn/s/blog_6151984a0100ekz2.html 所有UNIX命令,要取结果或输出,都要用$( )或反引号` ` tt=` file te ...

  4. Camera Vision - video surveillance on C#

    转自:http://blog.csdn.net/xyz_lmn/article/details/6072897 http://www.codeproject.com/KB/audio-video/ca ...

  5. MFC中界面自适应

    void CMyDlg::OnSize(UINT nType, int cx, int cy){ CDialogEx::OnSize(nType, cx, cy); CRect rt; GetClie ...

  6. 学习总结：斯特林数（ Stirling number ）

    基本定义 第一类斯特林数:$1 \dots n$的排列中恰好有$k$个环的个数:或是,$n$元置换可分解为$k$个独立的轮换的个数.记作 $$ \begin{bmatrix} n \\ k \end{ ...

  7. 86标准SQL与92标准SQL用法区别

    86标准SQL与92标准SQL用法区别 在开发Oracle 9i时, 数据库还时间了ANSL SQL/92标准的链接语法, 在书中建议在使用Oracle 9i及更高版本时,应该使用SQL/92标准的语 ...

  8. Spring入门第九课

    使用外部属性文件 在配置文件里面配置Bean时,有时需要在Bean的配置里面混入系统部署的细节信息(例如:文件路径,数据源配置信息等)而这些部署细节实际上需要和Bean配置相分离. Spring提供了 ...

  9. Laravel框架的一些配置

    服务器的配置 1.在apache下的配置 配置httpd-conf:php5_module.rewrite_module.Listen 配置extra/httpd-vhost:端口.站点.域名.默认首 ...

  10. 多进程小例子--fork+pipe

    1 #include<stdio.h>  2 #include<unistd.h>  3   4 #define m 6  5 int main()  6 {  7       ...