angularJS学习之路(三)---控制器
时间:2022-06-25
本文章向大家介绍angularJS学习之路(三)---控制器,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</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 type="text/javascript" src="../js/angular.min.js" ></script>
<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>
AngularJS 应用程序(模块)由 ng-app 定义。应用程序在 <div> 内运行(作用域)。
ng-controller="myCtrl" 用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中, $scope 代表:应用变量和函数。
控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。
上面的例子中:
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。
PS:控制器 只负责 从数据模型向视图模型传递信息(数据) 和 设置事件监听器
不做DOM操作 和 数据操作 以及对象状态操作
控制器其实 可以 理解为一个类结构,有变量有方法 只是用来存储数据 只是一个媒介 桥梁 不要有其他的操作
将业务逻辑放在 自定义指令 和 服务 中
对变量还可以用类的形式进行定义 比如:
app.controller('myController',function($scope){
$scope.person = {
name : 'abc dd'
};
});
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ZeroLogon漏洞(CVE-2020-1472)防御性指南
- 原创 | 随机数大家都会用,但是你知道生成随机数的算法吗?
- 原创 | codeforces 1425E,一万种情况的简单题
- 原创 | codeforces 1417C,逆向思考的数据结构题
- 原创 | 操作失误不要慌,这个命令给你的Git一次反悔的机会
- 原创 | 想做推荐算法?先把FM模型搞懂再说
- 活见鬼,明明删除了数据,空间却没减少!
- 原创 | Git仓库的提交记录乱成一团,怎么办?
- 原创 | 平面内有N个点,如何快速求出距离最近的点对?
- 原创 | codeforces 1426F,初学者也能做,div3的最难题
- 安全研究 | YARA规则阻止Windows事件日志记录
- 研究人员如何使用Shhgit搜索GitHub中的敏感数据
- 使用nProbe监控移动网络(2G,3G和LTE)
- Mykings僵尸网络新变种已感染超5万台电脑
- 谁告诉你鸿蒙(HarmonyOS)不能在macOS下玩,一副没见过世面的样子!