AngularJS 控制器


AngularJS 控制器 控制 AngularJS 应用程序的数据。

AngularJS 控制器是常规的 JavaScript 对象


AngularJS 控制器

AngularJS 应用程序被控制器控制。

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

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

  1. <div ng-app="myApp" ng-controller="myCtrl">
  2. 名:<input type="text" ng-model="firstName"><br>
  3. 名:<input type="text" ng-model="lastName"><br>
  4. <br>
  5. 姓名:{{firstName +" "+ lastName}}
  6. </div>
  7. <script>
  8. var app = angular.module('myApp',[]);
  9. app.controller('myCtrl',function($scope){
  10. $scope.firstName ="John";
  11. $scope.lastName ="Doe";
  12. });
  13. </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 这两个属性的控制器对象。

控制器也可以有方法(变量和函数):(魔芋:可以自定义方法)

  1. <div ng-app="myApp" ng-controller="personCtrl">
  2. 名:<input type="text" ng-model="firstName"><br>
  3. 姓:<input type="text" ng-model="lastName"><br>
  4. <br>
  5. 姓名:{{fullName()}}
  6. </div>
  7. <script>
  8. var app = angular.module('myApp',[]);
  9. app.controller('personCtrl',function($scope){
  10. $scope.firstName ="John";
  11. $scope.lastName ="Doe";
  12. $scope.fullName =function(){
  13. return $scope.firstName +" "+ $scope.lastName;
  14. }
  15. });
  16. </script>
 

外部文件中的控制器

在大型的应用程序中,通常是把控制器存储在外部文件中。

只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可:

  1. <div ng-app="myApp" ng-controller="personCtrl">
  2. FirstName:<input type="text" ng-model="firstName"><br>
  3. LastName:<input type="text" ng-model="lastName"><br>
  4. <br>
  5. FullName:{{firstName +" "+ lastName}}
  6. </div>
  7. <script src="personController.js"></script>
 personController.js 
  1. angular.module('myApp',[]).controller('personCtrl',function($scope){
  2. $scope.firstName ="John",
  3. $scope.lastName ="Doe",
  4. $scope.fullName =function(){
  5. return $scope.firstName +" "+ $scope.lastName;
  6. }
  7. });
 

其他实例

以下实例创建一个新的控制器文件:

  1. angular.module('myApp',[]).controller('namesCtrl',function($scope){
  2. $scope.names =[
  3. {name:'Jani',country:'Norway'},
  4. {name:'Hege',country:'Sweden'},
  5. {name:'Kai',country:'Denmark'}
  6. ];
  7. });
 

保存文件为namesController.js:

然后,在应用中使用控制器文件:

  1. <div ng-app="myApp" ng-controller="namesCtrl">
  2. <ul>
  3. <li ng-repeat="x in names">
  4. {{ x.name +', '+ x.country }}
  5. </li>
  6. </ul>
  7. </div>
  8. <script src="namesController.js"></script>
 

【06】AngularJS 控制器的更多相关文章

  1. AngularJS控制器

    AngularJS 控制器 控制 AngularJS 应用程序的数据,控制器是常规的 JavaScript 对象. 1. angular.module(name, [requires], [confi ...

  2. AngularJS 控制器

    AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 控制器 AngularJS 应用程序被控制 ...

  3. AngularJS 控制器 ng-controller

    AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 应用程序被控制器控制. ng-contro ...

  4. angularjs控制器之间通信,事件通知服务

    service要记住一点就是所有的services都是singleton(单例)的,service更多的是做一些业务逻辑,数据交互.当然,利用单例这特点也可以用来做不同控制器间的通信.控制器间的通信也 ...

  5. AngularJS学习之旅—AngularJS 控制器(六)

    1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...

  6. AngularJS 1.x系列:AngularJS控制器(3)

    1. 控制器(Controller)定义 控制器(Controller)在AngularJS中作用是增强视图(View),AngularJS控制器是一个构造方法,用来向视图(View)中添加额外功能. ...

  7. AngularJS控制器和AngularJS过滤器的学习(3)

    前面简单的学习了AngularJS的表达式和指令,就可以说大概对AngularJS有了一定的了解吧,嘿嘿,下面就来总结学习一下AngularJS的控制器和过滤器哦. 说起来AngularJS控制器,其 ...

  8. AngularJS 控制器的方法

    AngularJS 控制器也有方法(变量和函数) <!DOCTYPE html><html><head><meta http-equiv="Cont ...

  9. AngularJS 控制器通信

    指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是通过scope的继承 ...

随机推荐

  1. 一句powershell调用mimikatz抓密码

    mimikatz神器大家都知道吧,可以抓取系统内的明文密码,但是平时我们测试的时候需要把mimikatz的几个文件上传到目标系统上面,然后再手工执行几个命令才能搞定,今天无意访问一个大神的博客,发现其 ...

  2. unable to unroll loop 报错

    unable to unroll loop, loop does not appear to terminate in a timely manner (1024 iterations) 原本代码 f ...

  3. CF17C Balance

    题意 [题目描述] 一个仅由a,b,c三种字符组成的字符串,可以对其进行如下两种操作: 选择两个相邻字符,将第一个字符替换成第二个. 选择两个相邻字符,将第二个字符替换成第一个. 这样,通过任意多次的 ...

  4. 向Linus学习,让代码具有good taste

    在最近关于 Linus Torvalds 的一个采访中,这位 Linux 的创始人,在采访过程中大约 14:20 的时候,提及了关于代码的 “good taste”.good taste?采访者请他展 ...

  5. java 分解整数 【个 十 百】(数组案例)

    求一个数两位数的个位数,十位数,百位数及千位: int num = 53; int g = (num / 1) % 10;  //个位 int s = (num / 10) % 10; //十位 in ...

  6. Java 8 (1) 行为参数化

    行为参数化就是可以帮助你处理频繁变更需求的一种软件开发模式.它意味着拿出一个代码块,把它准备好却不去执行它.这个代码块以后可以被你程序的其他部分调用,这意味着你可以推迟这块代码的执行.例如:你可以将代 ...

  7. Android 滚动RecyclerView加载图片时的流畅度优化

    实现:使用onScrollStateChanged回调检测滚动状态,并在RecyclerViewAdapter内部设置类似isScrolling的状态值来控制网络图片的加载. 下面是代码举例: // ...

  8. java实现麦克风自动录音

    最近在研究语音识别,使用百度的sdk.发现只有识别的部分,而我需要保存音频文件,并且实现当有声音传入时自动生成音频文件. 先上代码: public class EngineeCore { String ...

  9. Redux 中的CombineReducer的函数详解

    combineReducers(reducers) 随着应用变得复杂,需要对 reducer 函数 进行拆分,拆分后的每一块独立负责管理 state 的一部分. combineReducers 辅助函 ...

  10. Android基础TOP7_1:ListView制作列表

    结构: Activity: activity_main: <RelativeLayout xmlns:android="http://schemas.android.com/apk/r ...