简述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 相关文章推荐
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
详解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模板原理讲解
2013/11/13 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
《悯农》教学反思
2014/04/28 职场文书
生日庆典策划方案
2014/06/02 职场文书
2014年评职称工作总结
2014/11/20 职场文书
儿园租房协议书范本
2014/12/02 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
python如何利用traceback获取详细的异常信息
2021/06/05 Python
详解nginx location指令
2022/01/18 Servers