AngularJS控制器详解及示例代码


Posted in Javascript onAugust 16, 2016

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控制器详解及示例代码

以上就是AngularJS控制器的资料整理,后续继续整理相关知识,谢谢大家对本站的支持。

Javascript 相关文章推荐
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 Javascript
AngularJS表达式讲解及示例代码
Aug 16 #Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 #Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 #Javascript
AngularJS指令详解及示例代码
Aug 16 #Javascript
AngularJS教程之简单应用程序示例
Aug 16 #Javascript
AngularJS教程之MVC体系结构详解
Aug 16 #Javascript
超实用的javascript时间处理总结
Aug 16 #Javascript
You might like
服务器web工具 php环境下
2010/12/29 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
javascript简单性能问题及学习笔记
2014/02/04 Javascript
JavaScript跨域方法汇总
2014/10/16 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
JavaScript验证知识整理
2017/03/24 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
Angular ng-animate和ng-cookies用法详解
2018/04/18 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python常用小技巧总结
2015/06/01 Python
使用tensorflow实现线性回归
2018/09/08 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
建筑人员岗位职责
2013/12/25 职场文书
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
管理专员自荐信
2014/01/26 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
同志主要表现材料
2014/08/21 职场文书
会计工作能力自我评价
2015/03/05 职场文书
教师节老师寄语
2015/05/28 职场文书
八年级英语教学反思
2016/02/15 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS