简述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 相关文章推荐
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
js实现小时钟效果
Mar 25 Javascript
react-intl实现React国际化多语言的方法
Sep 27 Javascript
详解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 &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
ThinkPHP3.2框架操作Redis的方法分析
2019/05/05 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
python计算文本文件行数的方法
2015/07/06 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
实习教师自我鉴定
2013/09/27 职场文书
个人简历自我评价八例
2013/10/31 职场文书
教师实习自我鉴定
2013/12/18 职场文书
小学教师师德感言
2014/02/10 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
Vue3.0 手写放大镜效果
2021/07/25 Vue.js