【06】AngularJS 控制器
AngularJS 控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
AngularJS 控制器
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象,由标准的 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>
应用解析:
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller="myCtrl" 是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中, $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。
控制器方法
上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。
控制器也可以有方法(变量和函数):(魔芋:可以自定义方法)
<div ng-app="myApp" ng-controller="personCtrl">
名:<input type="text" ng-model="firstName"><br>
姓:<input type="text" ng-model="lastName"><br>
<br>
姓名:{{fullName()}}
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('personCtrl',function($scope){
$scope.firstName ="John";
$scope.lastName ="Doe";
$scope.fullName =function(){
return $scope.firstName +" "+ $scope.lastName;
}
});
</script>
外部文件中的控制器
在大型的应用程序中,通常是把控制器存储在外部文件中。
只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可:
<div ng-app="myApp" ng-controller="personCtrl">
FirstName:<input type="text" ng-model="firstName"><br>
LastName:<input type="text" ng-model="lastName"><br>
<br>
FullName:{{firstName +" "+ lastName}}
</div>
<script src="personController.js"></script>
angular.module('myApp',[]).controller('personCtrl',function($scope){
$scope.firstName ="John",
$scope.lastName ="Doe",
$scope.fullName =function(){
return $scope.firstName +" "+ $scope.lastName;
}
});
其他实例
以下实例创建一个新的控制器文件:
angular.module('myApp',[]).controller('namesCtrl',function($scope){
$scope.names =[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
保存文件为namesController.js:
然后,在应用中使用控制器文件:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.name +', '+ x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
【06】AngularJS 控制器的更多相关文章
- AngularJS控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据,控制器是常规的 JavaScript 对象. 1. angular.module(name, [requires], [confi ...
- AngularJS 控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 控制器 AngularJS 应用程序被控制 ...
- AngularJS 控制器 ng-controller
AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 应用程序被控制器控制. ng-contro ...
- angularjs控制器之间通信,事件通知服务
service要记住一点就是所有的services都是singleton(单例)的,service更多的是做一些业务逻辑,数据交互.当然,利用单例这特点也可以用来做不同控制器间的通信.控制器间的通信也 ...
- AngularJS学习之旅—AngularJS 控制器(六)
1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...
- AngularJS 1.x系列:AngularJS控制器(3)
1. 控制器(Controller)定义 控制器(Controller)在AngularJS中作用是增强视图(View),AngularJS控制器是一个构造方法,用来向视图(View)中添加额外功能. ...
- AngularJS控制器和AngularJS过滤器的学习(3)
前面简单的学习了AngularJS的表达式和指令,就可以说大概对AngularJS有了一定的了解吧,嘿嘿,下面就来总结学习一下AngularJS的控制器和过滤器哦. 说起来AngularJS控制器,其 ...
- AngularJS 控制器的方法
AngularJS 控制器也有方法(变量和函数) <!DOCTYPE html><html><head><meta http-equiv="Cont ...
- AngularJS 控制器通信
指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是通过scope的继承 ...
随机推荐
- 一句powershell调用mimikatz抓密码
mimikatz神器大家都知道吧,可以抓取系统内的明文密码,但是平时我们测试的时候需要把mimikatz的几个文件上传到目标系统上面,然后再手工执行几个命令才能搞定,今天无意访问一个大神的博客,发现其 ...
- unable to unroll loop 报错
unable to unroll loop, loop does not appear to terminate in a timely manner (1024 iterations) 原本代码 f ...
- CF17C Balance
题意 [题目描述] 一个仅由a,b,c三种字符组成的字符串,可以对其进行如下两种操作: 选择两个相邻字符,将第一个字符替换成第二个. 选择两个相邻字符,将第二个字符替换成第一个. 这样,通过任意多次的 ...
- 向Linus学习,让代码具有good taste
在最近关于 Linus Torvalds 的一个采访中,这位 Linux 的创始人,在采访过程中大约 14:20 的时候,提及了关于代码的 “good taste”.good taste?采访者请他展 ...
- java 分解整数 【个 十 百】(数组案例)
求一个数两位数的个位数,十位数,百位数及千位: int num = 53; int g = (num / 1) % 10; //个位 int s = (num / 10) % 10; //十位 in ...
- Java 8 (1) 行为参数化
行为参数化就是可以帮助你处理频繁变更需求的一种软件开发模式.它意味着拿出一个代码块,把它准备好却不去执行它.这个代码块以后可以被你程序的其他部分调用,这意味着你可以推迟这块代码的执行.例如:你可以将代 ...
- Android 滚动RecyclerView加载图片时的流畅度优化
实现:使用onScrollStateChanged回调检测滚动状态,并在RecyclerViewAdapter内部设置类似isScrolling的状态值来控制网络图片的加载. 下面是代码举例: // ...
- java实现麦克风自动录音
最近在研究语音识别,使用百度的sdk.发现只有识别的部分,而我需要保存音频文件,并且实现当有声音传入时自动生成音频文件. 先上代码: public class EngineeCore { String ...
- Redux 中的CombineReducer的函数详解
combineReducers(reducers) 随着应用变得复杂,需要对 reducer 函数 进行拆分,拆分后的每一块独立负责管理 state 的一部分. combineReducers 辅助函 ...
- Android基础TOP7_1:ListView制作列表
结构: Activity: activity_main: <RelativeLayout xmlns:android="http://schemas.android.com/apk/r ...