1. 控制器（Controller）定义

　　控制器（Controller）在AngularJS中作用是增强视图（View），AngularJS控制器是一个构造方法，用来向视图（View）中添加额外功能。

　　ng-controller指令定义AngularJS应用程序控制器。

　　控制器是JavaScript对象，由标准的JavaScript对象的构造函数创建。

　　当控制器通过ng-controller指令被添加到DOM页面时，AngularJS会通过控制器构造函数生成一个对象。

　　在生成构造函数对象过程中，$scope对象作为参数注入其中，并允许访问$scope对象。

　　通过$scope对象与页面中的元素进行数据绑定，实现数据从控制器（Controller）到视图（View）的过程。

2. 控制器初始化$scope对象

　　控制器（Controller）的作用是操作$scope对象，具体表现在：

　　◊ 初始化$scope对象

　　◊ 为$scope对象添加自定义实现

　　$scope对象可以看作是由控制器（Controller）封装后的ViewModel。

2.1 初始化$scope对象

　　示例代码：

<!DOCTYPE html>

<html ng-app="app">

    <head>

        <meta charset="utf-8" />

        <script src="../lib/angular.min.js"></script>

        <script type="text/javascript">

            var app = angular.module("app", []);

            app.controller("HelloCtrl", function($scope){

                $scope.text = "Hello World!";

            });

        </script>

    </head>

    <body>

        <div ng-controller="HelloCtrl">

            <div ng-bind="text"></div>

        </div>

    </body>

</html>

2.2 为$scope对象添加自定义方法

　　示例代码：

<!DOCTYPE html>

<html ng-app="app">

    <head>

        <meta charset="utf-8" />

        <script src="../lib/angular.min.js"></script>

        <script type="text/javascript">

            var app = angular.module("app", []);

            app.controller("HelloCtrl", function($scope){

                $scope.text = "Hello World!";

                $scope.getText = function(){

                    $scope.text = "Hello AngularJS!";

                    return $scope.text;

                };

            });

        </script>

    </head>

    <body>

        <div ng-controller="HelloCtrl">

            <div ng-bind="text"></div>

            <input type="button" value="ChangeText" ng-click="getText()" />

        </div>

    </body>

</html>

2.3 为$scope对象添加带参数方法

　　示例代码：

<!DOCTYPE html>

<html ng-app="app">

    <head>

        <meta charset="utf-8" />

        <script src="../lib/angular.min.js"></script>

        <script type="text/javascript">

            var app = angular.module("app", []);

            app.controller("HelloCtrl", ["$scope", function($scope){

                $scope.text = "Hello World!";

                $scope.getText = function(){

                    $scope.text = "Hello AngularJS!";

                    return $scope.text;

                };

                $scope.setText = function(param){

                    $scope.text = param;

                };

            }]);

        </script>

    </head>

    <body>

        <div ng-controller="HelloCtrl">

            <div ng-bind="text"></div>

            <input type="button" value="ChangeText" ng-click="setText('Hello AngularJS!')" />

        </div>

    </body>

</html>

　　$scope对象方法多个参数之间逗号（，）隔开

2.4 $scope对象属性和方法的继承

　　AngularJS中的“ng-controller”指令允许在不同层次元素中指定控制器，处于内层控制器中的$scope对象将会自动继承外层控制器中的$scope对象的属性和方法。

<!DOCTYPE html>

<html ng-app="app">

    <head>

        <meta charset="utf-8" />

        <script src="../lib/angular.min.js"></script>

        <script type="text/javascript">

            var app = angular.module("app", []);

            app.controller("ParentCtrl", ["$scope", function($scope){

                $scope.text = "Text";

            }]);

            app.controller("ChildCtrl", ["$scope", function($scope){

                $scope.child_text = "Child Text";

            }]);

        </script>

    </head>

    <body>

        <div ng-controller="ParentCtrl">

            <div ng-bind="text"></div>

            <div ng-controller="ChildCtrl">

                <div ng-bind="child_text"></div>

            </div>

        </div>

    </body>

</html>

3. 作用域（Scope）

　　作用域（scope）是构成AngularJS应用的核心基础，AngularJS将$scope设计成和DOM类似的结构，$scope可以进行嵌套，可以引用父级$scope中的属性和方法。

3.1 $rootScope

　　AngularJS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定。$rootScope是所有$scope对象的最上层。

　　$rootScope是AngularJS中最接近全局作用域的对象，不建议在$rootScope上绑定太多业务逻。

　　所有的应用都有一个$rootScope，可以作用在ng-app指令包含的所有HTML元素中。

　　$rootScope可作用于整个应用中。在$rootscope中定义的属性及方法，可以在各个controller的$scope中使用。

　　示例代码：

<!DOCTYPE html>

<html ng-app="app">

    <head>

        <meta charset="utf-8" />

        <script src="../lib/angular.min.js"></script>

        <script type="text/javascript">

            var app = angular.module("app", []);

            app.run(["$rootScope", function($rootScope){

                $rootScope.text = "Hello AngularJS!";

            }]);

        </script>

    </head>

    <body>

        {{ text }}

    </body>

</html>

3.2 $scope

　　AngularJS中$scope对象作为数据模型，自定义属性和方法，可以在控制器（Controller）和视图（View）中使用。

　　$scope对象的生命周期处理有四个不同阶段:

　　1>.创建

　　在创建控制器（Controller）或指令时，AngularJS会用$injector创建一个新的作用域（$scope），并在这个新建的控制器（Controller）或指令运行时注入作用域（$scope）。

　　2>.链接

　　当Angular开始运行时，所有的$scope对象都会附加或者链接到视图中。

　　所有创建$scope对象的函数也会将自身附加到视图中。

　　这些作用域将会注册当Angular应用上下文中发生变化时需要运行的$watch函数。

　　3>.更新

　　当事件循环运行时，它通常执行在顶层$scope对象上（被称作$rootScope），每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化，$scope对象就会触发指定的回调函数。

　　4>.销毁

　　当一个$scope在视图中不再需要时，这个作用域将会清理和销毁自己。

　　示例代码：

<!DOCTYPE html>

<html ng-app="app">

    <head>

        <meta charset="utf-8" />

        <script src="../lib/angular.min.js"></script>

        <script type="text/javascript">

            var app = angular.module("app", []);

            app.controller("HelloCtrl", ["$scope", function($scope){

                $scope.text = "Hello AngularJS!";

            }]);

        </script>

    </head>

    <body>

        <div ng-controller="HelloCtrl">

            {{ text }}

        </div>

    </body>

</html>

　　ng-controller指令为这个DOM元素创建了一个新的$scope对象，并将它嵌套在$rootScope中。

　　$scope与$rootScope具有相同属性或方法时，$scope将覆盖$rootScope中相同属性或方法。

<!DOCTYPE html>

<html ng-app="app">

    <head>

        <meta charset="utf-8" />

        <script src="../lib/angular.min.js"></script>

        <script type="text/javascript">

            var app = angular.module("app", []);

            app.controller("HelloCtrl", ["$scope", "$rootScope", function($scope, $rootScope) {

                $rootScope.text = "Hello";

                // $scope.text = "Hello AngularJS!";

            }]);

        </script>

    </head>

    <body>

        <div ng-controller="HelloCtrl">

            {{ text }}

        </div>

    </body>

</html>

AngularJS 1.x系列：AngularJS控制器（3）的更多相关文章

  1. [后端人员耍前端系列]AngularJs篇：30分钟快速掌握AngularJs

    一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...

  2. Angular系列----AngularJS入门教程05：双向绑定（转载）

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...

  3. Angular系列------AngularJS快速开始（转载）

    Hello World! 开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”: 使用您喜爱的文本编辑器,创建一个HTML文件,例如:helloworld.html. ...

  4. AngularJS高级程序设计读书笔记 -- 控制器篇

    作用域组成了一个能够用于在控制器之间形成通信的体系结构. 1. 控制器和作用域的基本原理 控制器就像领域模型与视图之间的纽带, 他给视图提供数据与服务, 并且定义了所需的业务逻辑, 从而将用户行为转换 ...

  5. AngularJS 1.x系列：AngularJS简介及第一个应用（2）

    1. 安装AngularJS 1.1 AngularJS官网 Github源码:https://github.com/angular/angular.js 官网:https://angularjs.o ...

  6. AngularJS 1.x系列：AngularJS服务-Service

    1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...

  7. Angular系列----AngularJS入门教程00：引导程序（转载）

    我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...

  8. AngularJS 1.x系列：AngularJS服务-Service、Factory、Provider、Value及Constant（5）

    1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...

  9. AngularJS学习笔记二:AngularJS指令

    AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...

  10. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

随机推荐

  1. IOS自带输入法中文不触发KEYUP事件导致vue双向绑定错误问题

    先上图: 可以看到输入框中的内容和弹出框的内容不一致, <input class="am-fr labRight" id="txcode" type=&q ...

  2. spring-boot的spring-cache中的扩展redis缓存的ttl和key名

    原文地址:spring-boot的spring-cache中的扩展redis缓存的ttl和key名 前提 spring-cache大家都用过,其中使用redis-cache大家也用过,至于如何使用怎么 ...

  3. https处理的一个过程，对称加密和非对称加密

    一,对称加密 所谓对称加密,就是它们在编码时使用的密钥e和解码时一样d(e=d),我们就将其统称为密钥k. 对称加解密的过程如下: 发送端和接收端首先要共享相同的密钥k(即通信前双方都需要知道对应的密 ...

  4. console对象探究

    作为一个前端,console.log()可能是你最常用的方法,打印打印再打印,但是其实console对象上有用的方法有很多,来,各位看官上眼 分类输出 厌倦了 console.log 单调的输出?欢迎 ...

  5. GeoServer安装配置

    需安装文件 1.安装jdk 2.安装GeoServer: (1).在安装GeoServer前,需要安装java运行环境,点击文件夹内的jdk安装文件,选择jdk安装路径进行安装:直到安装完成. (2) ...

  6. 作为JavaScript开发人员，这些必备的VS Code插件你都用过吗？

    本文翻译自:https://www.sitepoint.com/vs-code-extensions-javascript-developers/ 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的 ...

  7. win10系统下安装MySQLdb和pymysql

      (1)使用的是Python3.6,想要使用MySQLdb, 需要先在https://www.lfd.uci.edu/~gohlke/pythonlibs/#mysqlclient中下载相应版本的包 ...

  8. C语言检测指定文件是否存在的代码

    内容之余,将做工程过程中比较常用的一些内容片段珍藏起来,下面资料是关于C语言检测指定文件是否存在的内容,希望能对小伙伴们有所用. #include <stdbool.h> #include ...

  9. python爬虫实战：利用scrapy，短短50行代码下载整站短视频

    近日,有朋友向我求助一件小事儿,他在一个短视频app上看到一个好玩儿的段子,想下载下来,可死活找不到下载的方法.这忙我得帮,少不得就抓包分析了一下这个app,找到了视频的下载链接,帮他解决了这个小问题 ...

  10. Ubuntu下创建XFS文件系统的LVM

    以前在Linux下面玩LVM,一般都是选择ext3.ext4格式的文件系统,最近在Ubuntu 16.04.5下安装配置一个MySQL数据库服务器,遂测试了一下XFS文件系统的LVM,其实仔细对比下来 ...