【angularJS】Controller控制器
1. 定义
控制器(Controller)在AngularJS中作用是增强视图(View),AngularJS控制器是一个构造方法,用来向视图(View)中添加额外功能。
ng-controller指令定义AngularJS应用程序控制器。
控制器是JavaScript对象,由标准的JavaScript对象的构造函数创建。
当控制器通过ng-controller指令被添加到DOM页面时,AngularJS会通过控制器构造函数生成一个对象。
在生成构造函数对象过程中,$scope对象作为参数注入其中,并允许访问$scope对象。
通过$scope对象与页面中的元素进行数据绑定,实现数据从控制器(Controller)到视图(View)的过程。$scope对象可以看作是由控制器(Controller)封装后的ViewModel。
<div ng-app="myApp" ng-controller="myCtrl">
ng-controller="myCtrl" 属性【div标签的一个属性】是一个 AngularJS 指令。用于定义一个控制器。myCtrl 函数是一个 JavaScript 函数。
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div> <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
控制器在作用域中创建了两个属性(firstName 和lastName)。还可以创建函数。
ng-model 指令 绑定输入域到控制器的属性(firstName 和 lastName)。
2、controller参数含义
Eg:var app = angular.module('app',['ngPlugin']);
app.controller('frontTourism',['$scope','$http','stModal','$timeout','ngSubmit','alert',function(){/*省略*/}])
第一个参数:控制器名称
第二个参数:模块注入,引入你需要用到的其他模块【js文件】。比如$http就是一个模块。只有注入这些对象,function中才能使用。
$scope 页面传值需要 ,$http http请求需要
一个对象通常有三种方式可以获得对其依赖的控制权:
(1) 在内部创建依赖;
(2) 通过全局变量进行引用;
(3)在需要的地方通过参数进行传递。
Angular的依赖注入是通过第三种方式实现的。其余两种方式会带来各种问题,例如污染全局作用域,使隔离变得异常困难等。
从功能上看,依赖注入会事先自动查找依赖关系,并将注入目标告知被依赖的资源,这样就可以在目标需要时立即将资源注入进去。
Angular有3种注入方式:
a、推断式注入
app.controller('MyCtrl', function($scope) {
});
b、标注式注入
var myFunc=function($scope) {
});
myFunc.$inject = ['$scope'];
app.controller('MyCtrl',myFunc);
c、内联注入
app.controller('MyCtrl', ['$scope', function($scope) {
}]);
第1种是根据写的参数名称,如$scope,内部自己调用$inject把$scope进行依赖注入,如果在前端开发中使用压缩工具,就会把$scope变成另外的字母了,就无法进行推断了,而另外两种方式你可以把function($scope)改成function(a)都没关系;
第2种要多写一行代码;
一般推荐使用第3种。
一个页面一个控制器,,各个控制器中相同的部分放在service中,各控制器去调用。
【angularJS】Controller控制器的更多相关文章
- AngularJs(五)从Controller控制器谈谈$scope作用域
大纲 用于简单示例和简单应用的controller 应用 多个controller应用的作用域问题 controller继承作用域问题 Controller的创建 AngularJs controll ...
- .NET/ASP.NET MVC Controller 控制器(IController控制器的创建过程)
阅读目录: 1.开篇介绍 2.ASP.NETMVC IControllerFactory 控制器工厂接口 3.ASP.NETMVC DefaultControllerFactory 默认控制器工厂 4 ...
- .NET/ASP.NET MVC Controller 控制器(深入解析控制器运行原理)
阅读目录: 1.开篇介绍 2.ASP.NETMVC Controller 控制器的入口(Controller的执行流程) 3.ASP.NETMVC Controller 控制器的入口(Controll ...
- MVC(Model(模型) View(视图) Controller(控制器))
复习 1. 商品表 增删改查 index.php add.php view.php edit.php action.php 2. MVC(Model(模型) Vie ...
- Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- 【转】Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- (十六)JQuery Ready和angularJS controller的运行顺序问题
项目中使用了JQuery和AngularJS框架,近期定位一个问题,原因就是JQuery Ready写在了angularJS controller之前,导致JQuery选择器无法选中须要的元素(由于a ...
- 三、ASP.NET MVC Controller 控制器(二:IController控制器的创建过程)
阅读目录: 1.开篇介绍 2.ASP.NETMVC IControllerFactory 控制器工厂接口 3.ASP.NETMVC DefaultControllerFactory 默认控制器工厂 4 ...
- 二、ASP.NET MVC Controller 控制器(一:深入解析控制器运行原理)
阅读目录: 1.开篇介绍 2.ASP.NETMVC Controller 控制器的入口(Controller的执行流程) 3.ASP.NETMVC Controller 控制器的入口(Controll ...
- loadrunner入门篇-Controller控制器
Controller组件是LR的控制中心,主要包括场景设计和场景执行两部分.在VuGen中编辑完脚本并将脚本加载到Controller组件中,即开始对脚本运行时的场景进行设计,当场景设计完成后,即可执 ...
随机推荐
- i++为什么是线程不安全的
主要是因为i++这个操作不是原子性的,它会编译成 i = i +1: 其实是做了3个步骤,一个是读取,修改,写入 .所以会出现多线程访问冲突问题. 可以结合Java内存模型来进行说明.
- CentOS开端口问题
关闭SELINUX ##查看SELINUX状态 /usr/sbin/sestatus -v getenforce #修改config配置文件,重启后即可 vi /etc/selinux/config ...
- HDU-4123-树形dp+rmq+尺取
Bob’s Race Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- 普通for循环遍历LinkedList弊端
java开发过程中,用到的最多的List集合就属ArrayList与LinkedList.对于ArrayList的遍历,通常是下面的方法: public static void main(String ...
- Django 中设置分页页码,只显示当前页以及左右两页
设置后的效果如下: Django 给我们提供了分页的功能:`Paginator`和`Page`类都是用来做分页的.他们在Django中的路径为:`from django.core.paginator ...
- 【2018 “百度之星”程序设计大赛 - 初赛(B)-1004】p1m2(迷之二分)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6383 题目就是让你求一个整数数组,在进行任意元素 + 1. - 2 操作后,请问在所有可能达到的稳定数 ...
- 通过ping 主机名,或者主机名对应的IP地址
通过ping 主机名,或者主机名对应的IP地址: 如下图: 懵了吧? 但是你用 ping 主机名 -4
- 剑指offer--44.两个链表的第一个公共结点
@selfboot 牛逼的代码,长度相同,一遍出结果, 长度不同,短的点跑完,变成长的,当长的跑完变成短的链表的时候,较长的链表已经走过了多的结点. ------------------------- ...
- .net的session详解
http://blog.csdn.net/justin_wkf/article/details/5746914#comments
- React 与 可视化
一般会想到 canvas 和 svg ; svg更适合画图, 但由于cavans在移动端的良好兼容性, 使用的更广; 什么是svg, scalable vector graphics 全称 可缩放矢 ...