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开发APP接口实战009」日常安全防范之防SQL入和XSS攻击
防SQL注入和XSS攻击通用过滤 首先在 /app/library/ 目录下创建 Security.php 文件并添加以下代码: <?php /** * * 防SQL注入和XSS攻击通用过滤 * ...
- Linux学习篇（一）-初识Linux
开源许可协议 简单了解开源许可协议,一张图读懂. linux 系统特点 linux 特点安全性高.高可用.高性能 稳定且有效率 免费或少许免费 漏洞少且快速修补 多任务多用户 更加安全的用户及文件权限 ...
- CDN-template
ylbtech-CDN: 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 7.返回顶部 8.返回顶部 9.返回顶部 10.返 ...
- 回调-> 观察者模式->反应堆模式
关于回调: 回调是观察者模式以及反应堆模式的基础 一句话,回调就是一种双向调用模式,什么意思呢,就是说,被调用方在被调用时也会调用对方,这就叫回调.“If you call me, i will ca ...
- eclipse以及myeclipse的xml配置文件没有提示的问题解决
对于在使用hibernate时,需要对配置文件进行配置,我们需要引入dtd约束文件.在有网的情况下,可以直接从网上下载,编写xml配置文件的时候,可以提示:在没网的情况下,那么就提示不出来. 下面的方 ...
- 《JAVA设计模式》之适配器模式(Adapter)
在阎宏博士的<JAVA与模式>一书中开头是这样描述适配器(Adapter)模式的: 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能 ...
- kmp（前缀出现次数next应用）
http://acm.hdu.edu.cn/showproblem.php?pid=3336 Count the string Time Limit: 2000/1000 MS (Java/Other ...
- 凸包模板——Graham扫描法
凸包模板--Graham扫描法 First 标签: 数学方法--计算几何 题目:洛谷P2742[模板]二维凸包/[USACO5.1]圈奶牛Fencing the Cows yyb的讲解:https:/ ...
- spark性能调优06-数据倾斜处理
1.数据倾斜 1.1 数据倾斜的现象 现象一:大部分的task都能快速执行完,剩下几个task执行非常慢 现象二:大部分的task都能快速执行完,但总是执行到某个task时就会报OOM,JVM out ...
- 【接口工具】接口抓包工具之Fiddler
一.Fiddler的基本功能介绍 Fiddler的官方网站: https://www.telerik.com/purchase/fiddler Fiddler是最强大最好用的Web调试工具之一,它能记 ...