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'

};

});