AngularJS入门教程之控制器详解


Posted in Javascript onJuly 27, 2016

AngularJS 控制器

AngularJS 控制器 控制 AngularJS 应用程序的数据。

 AngularJS 控制器是常规的 JavaScript 对象。

AngularJS 控制器

AngularJS 应用程序被控制器控制。

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  }
});
</script>

</body>
</html>

运行结果:

名:
姓:

姓名: John Doe

AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。

ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。

myCtrl 函数是一个 JavaScript 函数。

AngularJS 使用$scope 对象来调用控制器。

在 AngularJS 中, $scope 是一个应用象(属于应用变量和函数)。

控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。

控制器在作用域中创建了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。

控制器方法

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。

控制器也可以有方法(变量和函数):

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  }
});
</script>

</body>
</html>

运行效果:

名: 
姓: 

姓名: John Doe

外部文件中的控制器

在大型的应用程序中,通常是把控制器存储在外部文件中。

只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可:

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script src="personController.js"></script>

</body>
</html>

运行结果:

名: 
姓: 

姓名: John Doe

其他实例

以下实例创建一个新的控制器文件:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
  ];
});

保存文件为  namesController.js:

然后,在应用中使用控制器文件:

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl"> 

<ul>
 <li ng-repeat="x in names">
  {{ x.name + ', ' + x.country }}
 </li>
</ul>

</div>

<script src="namesController.js"></script>

</body>
</html>

运行效果:

  • Jani, Norway
  • Hege, Sweden
  • Kai, Denmark

以上就是对AngularJS 控制器资料的整理,后续继续补充。

Javascript 相关文章推荐
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 #Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 #Javascript
AngularJS入门之动画
Jul 27 #Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 #Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 #Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 #Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 #Javascript
You might like
php指定函数参数默认值示例代码
2013/12/04 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
Promise扫盲贴
2019/06/24 Javascript
用js实现放大镜效果
2020/10/28 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
python基于socket实现网络广播的方法
2015/04/29 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
python 项目目录结构设置
2020/02/14 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
学习雷锋标语
2014/06/25 职场文书
物业消防安全责任书
2014/07/23 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
党员民主评议总结
2014/10/20 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫