简述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之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
Nuxt 项目性能优化调研分析
Nov 07 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 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
用户的详细注册和判断
2006/10/09 PHP
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
Jquery中attr与prop的区别详解
2017/05/27 jQuery
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
100行python代码实现跳一跳辅助程序
2018/01/15 Python
python多维数组切片方法
2018/04/13 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
Pygame的程序开始示例代码
2020/05/07 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
python实现简单文件读写函数
2021/02/25 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
安全生产演讲稿
2014/05/09 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
PHP RabbitMQ消息列队
2022/05/11 PHP
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS