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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
js脚本实现数据去重
Nov 27 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 Javascript
通过实例了解Render Props回调地狱解决方案
Nov 04 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
php制作文本式留言板
2015/03/18 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
React项目动态设置title标题的方法示例
2018/09/26 Javascript
js实现简单的倒计时
2021/01/28 Javascript
python实现批量修改文件名代码
2017/09/10 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
python3 读取Excel表格中的数据
2018/10/16 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
Opencv求取连通区域重心实例
2020/06/04 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
python实现自动清理重复文件
2020/08/24 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
J2EE包括哪些技术
2016/11/25 面试题
护士节活动总结
2014/08/29 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers
python playwright之元素定位示例详解
2022/07/23 Python