简述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入门教程(2) JS基础知识
Jan 31 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 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读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
文本框的字数限制功能jquery插件
2009/11/24 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
freemarker判断对象是否为空的方法
2015/08/13 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
python和ruby,我选谁?
2017/09/13 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
教师年度考核自我鉴定
2014/01/19 职场文书
群众路线剖析材料
2014/02/02 职场文书
辩论赛主持词
2014/03/18 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
走进毛泽东观后感
2015/06/04 职场文书
Python实现位图分割的效果
2021/11/20 Python
nginx 配置指令之location使用详解
2022/05/25 Servers
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS