简述AngularJS的控制器的使用


Posted in Javascript onJune 16, 2015

 AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动。控制器采用ng-controller指令定义。控制器是一个包含属性/属性和JavaScript对象的功能。每个控制器接受$scope参数指定应用程序/模块,由控制器控制。

<div ng-app="" ng-controller="studentController">
...
</div>

在这里,我们已经声明采用ng-controller指令的控制器studentController。作为下一步,我们将定义studentController如下

    <script>
    function studentController($scope) {
      $scope.student = {
       firstName: "yiibai",
       lastName: "com",
       fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName + " " + studentObject.lastName;
       }
      };
    }
    </script>
  •     studentController 定义 $scope 作为JavaScript对象参数。
  •     $scope 表示应用程序,使用studentController对象。
  •     $scope.student 是studentController对象的属性。
  •     firstName和lastName是$scope.student 对象的两个属性。我们已经通过了默认值给他们。
  •     fullName 是$scope.student对象的函数,它的任务是返回合并的名称。
  •     在fullName函数中,我们现在要学生对象返回组合的名字。
  •     作为一个说明,还可以定义控制器对象在单独的JS文件,并把有关文件中的HTML页面。

现在可以使用ng-model或使用表达式如下使用studentController学生的属性。

    Enter first name: <input type="text" ng-model="student.firstName"><br>
    Enter last name: <input type="text" ng-model="student.lastName"><br>
    <br>
    You are entering: {{student.fullName()}}
  •     现在有 student.firstName 和 student.lastname 两个输入框。
  •     现在有 student.fullName()方法添加到HTML。
  •     现在,只要输入first name和lastname输入框中输入什么,可以看到两个名称自动更新。

例子

下面的例子将展示使用控制器。
testAngularJS.html 文件内容如下:

<html>
<head>
<title>Angular JS Controller</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">

Enter first name: <input type="text" ng-model="student.firstName"><br><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
</div>
<script>
function studentController($scope) {
  $scope.student = {
   firstName: "Mahesh",
   lastName: "Parashar",
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

输出

在Web浏览器打开textAngularJS.html,看到以下结果:

简述AngularJS的控制器的使用

Javascript 相关文章推荐
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
详解AngularJS中的表达式使用
Jun 16 #Javascript
整理AngularJS中的一些常用指令
Jun 16 #Javascript
创建你的第一个AngularJS应用的方法
Jun 16 #Javascript
详解JavaScript中的表单验证
Jun 16 #Javascript
详解JavaScript中的异常处理方法
Jun 16 #Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 #Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 #Javascript
You might like
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
php对称加密算法示例
2014/05/07 PHP
php数组和链表的区别总结
2019/09/20 PHP
Javascript !!的作用
2008/12/04 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
python计数排序和基数排序算法实例
2014/04/25 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Pytorch释放显存占用方式
2020/01/13 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
python 如何将office文件转换为PDF
2020/09/22 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
企业演讲稿范文
2013/12/28 职场文书
竞选演讲稿范文
2013/12/28 职场文书
客服部工作职责范本
2014/02/14 职场文书
开票员岗位职责
2015/02/12 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
单身证明格式样本
2015/06/15 职场文书
狂人日记读书笔记
2015/06/30 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang