简述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 相关文章推荐
javascript 正则表达式相关应介绍
Nov 27 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
微信小程序 实现点击添加移除class
Jun 12 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
layui实现数据分页功能
Jul 27 Javascript
原生js无缝轮播插件使用详解
Mar 09 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
简单的过滤字符串中的HTML标记
2006/12/25 PHP
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
python 网络爬虫初级实现代码
2016/02/27 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
python的变量与赋值详细分析
2017/11/08 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python实现桌面壁纸切换功能
2019/01/21 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
Python爬虫之爬取淘女郎照片示例详解
2020/07/28 Python
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
医药大学生求职简历的自我评价
2013/10/17 职场文书
事业单位鉴定材料
2014/05/25 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
2014年销售员工作总结
2014/12/01 职场文书
个人党性锻炼总结
2015/03/05 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS