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. IntelliJ IDEA 缓存和索引介绍

    转自:https://www.cnblogs.com/zhanghaibinblogs/p/6722061.html IDEA 在首次加载项目的时候都会创建索引,IDEA 的缓存和索引主要是用来加快文 ...

  2. springcloud 向Eureka中注册服务异常java.net.ConnectException: Connection refused: connect

    异常如下: 通过debug发现,服务端的url地址仍然是默认的http://localhost:8761/eureka/apps/,也就是说yml文件中配置没有生效,检查后发现yml中相关配置多写了一 ...

  3. Rails5 layout 和 template

    layout是布局,比如页面的头(head), 脚(foot), 内容(body) template是布局的一部分的内容   这两货实在太像了,写了这些我也是一脸懵逼. 换个说法,layout和tem ...

  4. 栗染-git命令搭建简单的个人的网页

    本来一个很简单的东西被自己搞了很久 可能是对于一个小白来说第一次认识到github的魅力吧,以前只是听别人说过用github搭建网站,听起来很厉害的样子,一直也没有尝试过,突然兴起今天去网上找一些教程 ...

  5. codevs1297 硬币(背包dp,方案数)

    1297 硬币  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold   题目描述 Description 我们知道即使是同一种面值的硬币,它们的重量也有可能不一样, ...

  6. Manacher BestCoder Round #49 ($) 1002 Three Palindromes

    题目传送门 /* Manacher:该算法能求最长回文串,思路时依据回文半径p数组找到第一个和第三个会文串,然后暴力枚举判断是否存在中间的回文串 另外,在原字符串没啥用时可以直接覆盖,省去一个数组空间 ...

  7. ADB Usage Complete / ADB 用法大全

    ADB,即 Android Debug Bridge,它是 Android 开发/测试人员不可替代的强大工具,也是 Android 设备玩家的好玩具. 持续更新中,欢迎提 PR 和 Issue 补充指 ...

  8. 论tab切换的几种实现方法

    tab切换在网页中很常见,故最近总结了4种实现方法. 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head> ...

  9. linux 常用shell命令 ls

    ls:查看文件名和目录,用法:$ ls [选项] 1. $ ls 直接输入ls命令,则列出当前目录下的所有文件和目录,不显示详细信息,如类型,大小,日期权限等. 2. $ ls -l -l 选项,每行 ...

  10. dive into python:模块的导入和搜索文件路径的配置

    1.Python中导入模块:import sys:相当于Java中的导入包.类. 比如,我们导入sys模块,使用:import sys; 2.Python中调用函数的时候,会从默认配置的库文件夹中(s ...