Angular JS - 4 - Angular JS 作用域与控制器对象
1. 控制器对象使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app=""> <div ng-controller="myController">
<input type="text" ng-model="firstName"/>
<input type="text" ng-model="lastName"/>
<p>姓名1：{{firstName + "-" + lastName }}</p>
<p>姓名2：{{getFullName()}}</p> <!--getFullName,打印的是函数体！！！ -->
</div>
<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">
//函数自调用，this是window 对象调用函数，this是对象，new一个对象调用函数，this是这个new出来的实例
function myController($scope) { //构造函数：new的函数，声明形参$scope 作用域对象 console.log($scope);//查看$scope 这个对象有没有被注入进来
console.log(this instanceof myController);//如果是true，说明this是一个myController的实例，被new 过的
$scope.firstName = 'kb',
$scope.lastName = 'bryant',
//添加属性，这个属性是一个函数
$scope.getFullName = function () {
var obj = $scope;
return obj.firstName + " " + this.lastName;
// return firstName + " " + lastName; 则先在本函数中找有没有firstName, 没找到，再去上一层找有没有定义firstName属性，没有，则报错
}
}
</script>
</body>
</html>
上面通过 ng-controller 指定了一个angular 控制器的构造函数，构造函数中，定义了2个属性和一个方法，在页面显示上，通过表达式和方法调用来显示输出。
可以看到，这里的属性是在002这个对象下面，而不再是根作用域对象的属性。同时，改变第一个input标签，第二个input标签和它对应的显示部分都不受影响。
作用域对象:
* 一个js实例对象, ng-app指令默认会创建一个根作用域对象($rootScope)
* 它的属性和方法与页面中的指令或表达式是关联的
控制器对象:
* 用来控制AngularJS应用数据的 实例对象(关键是实例)
* ng-controller : 这个指令指定控制器的构造函数,当ng-controller指向一个构造函数时，Angular会自动new此函数创建控制器对象
* 同时Angular还有创建一个新的作用域对象$scope, 它是根作用域对象$rootScope的子对象（子对象可以继承父对象的属性和方法）
* 在控制器函数中声明$scope形参, Angular会自动将$scope传入；ng-controller最终的目的是生成一个$scope 作用域对象，最终操作的也是这个对象
2. 继承
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="" ng-init="age='12'"> <div ng-controller="myController">
<input type="text" ng-model="firstName"/>
<input type="text" ng-model="lastName"/>
<p>姓名1：{{firstName + "-" + lastName}}</p>
<p>姓名2：{{getFullName()}}</p> <!--getFullName,打印的是函数体！！！ -->
<p>使用根作用域对象中定义的属性：{{age}}</p>
</div>
<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">
//函数自调用，this是window 对象调用函数，this是对象，new一个对象调用函数，this是这个new出来的实例
function myController($scope) { //构造函数：new的函数，声明形参$scope 作用域对象 console.log($scope);//查看$scope 这个对象有没有被注入进来
console.log(this instanceof myController);//如果是true，说明this是一个myController的实例，被new 过的
$scope.firstName = 'kb',
$scope.lastName = 'bryant',
//添加属性，这个属性是一个函数
$scope.getFullName = function () {
var obj = $scope;
return obj.firstName + " " + this.lastName;
// return firstName + " " + lastName; 则先在本函数中找有没有firstName, 没找到，再去上一层找有没有定义firstName属性，没有，则报错
}
}
</script>
</body>
</html>
在body中初始化了一个age属性，在div中去是使用了。div中定义的控制器对象是没有定义age属性的，它的管辖范围也仅仅是div 盒子内，运行 结果如下，可以看到age属性是一个根作用域对象的属性，而自定义的作用域对象中却可以直接拿来使用，这是因为，作用域对象是根作用域对象的子对象，具有继承关系。
3.依赖注入
* 依赖对象：完成某个特定的功能需要某个对象才能实现，这个对象就是依赖对象。
* 依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是声明式依赖注入。
* angular的 ‘$scope’对象就是依赖对象，并且是依赖注入的形式进行使用。
！！！形参必须是特定的名称, 否则Angular无法注入抛异常 * 回调函数的event的就是依赖对象
* 回调函数有形参就是依赖注入
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head> <body >
<button id="btn">单击一下</button>
<script type="text/javascript">
document.getElementById('btn').onclick = function(event) {//这里这个形参就是依赖注入，
alert(event.clientX);//要显示坐标的值，依赖于event这个对象，没有它不行
};
</script>
</body>
</html>
其实之前的自定义控制器对象的过程中，function里面的形参 $scope就是依赖对象，它以形参的方式被注入到函数中，后续的操作都是基于这个对象去操作。这就是angular的依赖注入
Angular JS - 4 - Angular JS 作用域与控制器对象的更多相关文章
- angular.js 中的作用域 数据模型 控制器
1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...
- Angular JS - 5 - Angular JS 模块和控制器
1.引入 1.5版本的angularjs,直接打印angular对象: --> <!DOCTYPE html> <html> <head lang="en ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- Angular.js vs Ember.js
Angular.js 拥抱 HTML/CSS Misko Hevery(Angular.js的开发者之一)回答了这一问题,他的主要观点如下: 在HTML中加入太多逻辑不是好做法.Angular.js只 ...
- 青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步
Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,&quo ...
- Angular、React.js 和Node.js到底选谁?
为了工作,程序员选择正确的框架和库来构建应用程序是至关重要的,这也就是为什么Angular和React之间有着太多的争议.Node.js的出现,让这场战争变得更加复杂,虽然有选择权通常是一件很棒的事情 ...
- 【转】Angular.js VS. Ember.js：谁将成为Web开发的新宠？
本文源自于Quora网站的一个问题,作者称最近一直在为一个新的Rails项目寻找一个JavaScript框架,通过筛选,最终纠结于 Angular.js和 Ember.js. 这个问题获得了大量的关注 ...
- angular.js 的angular.copy 、 angular.extend 、 angular.merge
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Angular.js VS. Ember.js：谁将成为Web开发的新宠？
这篇博文陈述的非常好,比较全面的剖析了Angular.js与Ember.js,下面的链接,供学习与参考: http://www.csdn.net/article/2013-09-09/2816880- ...
随机推荐
- php面试专题---8、会话控制考点
php面试专题---8.会话控制考点 一.总结 一句话总结: 主要是cookie和session的区别,以及用户禁用cookie之后怎么使用session 1.为什么要使用会话控制技术? 因为http ...
- Jsoup代码示例、解析网页+提取文本
使用Jsoup解析HTML 那么我们就必须用到HttpClient先获取到html 同样我们引入HttpClient相关jar包 以及commonIO的jar包 我们把httpClient的基本代码写 ...
- Vagrant 手册之 Vagrantfile - 概述
原文地址 Vagrantfile 的主要用途是描述用于项目的机器类型,以及如何配置和提供这些机器. Vagrant 的每个项目运行一个 Vagrantfile,并且 Vagrantfile 应该被提交 ...
- MySQL 服务器性能剖析
这是<高性能 MySQL(第三版)>第三章的读书笔记. 关于服务,常见的问题有: 如何确认服务器是否发挥了最大性能 找出执行慢的语句,为何执行慢 为何在用户端发生间歇性的停顿.卡死 通过性 ...
- springboot jpa 级联操作及测试问题 （@Transactional与@Test）
前言:测试springboot版本 :springBootVersion = '2.0.5.RELEASE' 一 :搬运@Transactional B. 如果加了事务,必须做好开发环境测试( ...
- DS静态查找- 顺序-二分-索引
静态查找 静态表是只执行查找操作,而不执行插入.删除等操作的表. 现在常说的有五大查找方法:顺序查找.分块查找.索引查找.树查找.哈希查找. 后两种之前写过了二叉查找树和哈希表,现在回顾前面三种,它们 ...
- ubuntu server 12.04安装任何软件都出现the following packages have unmet dependencies的解决方法
虽然目前没太弄清这到底是怎么回事,但是暂时可以给出一个解决的方法, 如果在安装任何软件都会出现这个问题,那么尝试着输入sudo apt-get install -f试一下. 在该命令执行完成后,我这边 ...
- 前缀和序列 & 差分序列
前缀和序列 所谓前缀和数组,就是从第一个元素到当前元素的和.假设这个前缀和数组为d[],原数组为a[],那么d[ i ] = a[ 1 ]+a[ 2 ]+a[ 3 ]+...+a[ i-1 ]+a[ ...
- An easy problem (位运算）
[题目描述] 给出一个整数,输出比其大的第一个数,要求输出的数二进制表示和原数二进制表示下1的个数相同. [题目链接] http://noi.openjudge.cn/ch0406/1455/ [算法 ...
- k8s入门教程
1. k8s概述 Kubernetes(简称K8S) 是Google开源的分布式的容器管理平台,方便我们在服务器集群中管理我们容器化应用. 教程主要介绍怎么使用阿里云容器服务(kubernetes版本 ...