控制器AngularJS

AngularJS 应用程序主要依靠控制器来控制应用程序中的数据流。控制器是使用ng-controller指令定义的。控制器是一个 JavaScript 对象，其中包含属性/属性和函数。每个控制器都接受 $scope 作为参数，它表示控制器需要处理的应用程序/模块。

<div ng-app = "" ng-controller="studentController">
　　　...</div>

Aquí, usamos ng-La directiva controller declara un controlador llamadostudentControllerdel controlador. Lo definimos así-

<script>
　　　function studentController($scope) {
　　　　　　$scope.student = {
　　　　　　　　　firstName: "Mahesh",
　　　　　　　　　lastName: "Parashar",
　　　　　　　　　
　　　　　　　　　fullName: function() {
　　　　　　　　　　　　var studentObject;
　　　　　　　　　　　　studentObject = $scope.student;
　　　　　　　　　　　　return studentObject.firstName　+　"　"　+　studentObject.lastName;
　　　　　　　　　}
　　　　　　};
　　　}
</script>

studentController se define como un objeto JavaScript y se pasa $scope como parámetro.
$scope hace referencia a la aplicación que utiliza el objeto studentController.
$scope.student es una propiedad del objeto studentController.
firstName y lastName son dos propiedades del objeto $scope.student. Les pasamos valores por defecto.
La propiedad fullName es una función del objeto $scope.student, que devuelve el nombre combinado.
En la función fullName, obtenemos el objeto Student y luego devolvemos el nombre combinado.
Nota: También podemos definir el objeto controlador en un archivo JS separado y referenciarlo en la página HTML.

Ahora podemos usar ng-model o la siguiente expresión utiliza la propiedad student del studentController:

Ingrese nombre: <input type="text" ng-model="student.firstName"><br>
Ingrese apellido: <input type="text" ng-model="student.lastName"><br><br>
您正在输入: {{student.fullName()}}

Vamos a vincular student.firstName y student.lastname a dos cuadros de texto.
Vamos a vincular student.fullName() al HTML.
Ahora, siempre que escriba algo en los cuadros de texto de apellido y nombre, verá que el nombre completo se actualizará automáticamente.

Ejemplo en línea

A continuación se muestra un ejemplo de uso del controlador-

testAngularJS.htm

Ejemplo

<html>
　　　<head>
　　　　　　<title>Controlador AngularJS</title>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">.
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>Ejemplo de controlador AngularJS</h2>
　　　　　　
　　　　　　<div ng-app="mainApp" ng-controller="studentController">
　　　　　　　　　Ingrese nombre: <input type="text" ng-model="student.firstName"><br>
　　　　　　　　　<br>
　　　　　　　　　Ingrese apellido: <input type="text" ng-model = "student.lastName"><br>"}}
　　　　　　　　　<br>
　　　　　　　　　您正在输入: {{student.fullName()}}
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", []);
　　　　　　　　　
　　　　　　　　　mainApp.controller('studentController', function($scope) {
　　　　　　　　　　　　$scope.student = {
　　　　　　　　　　　　　　　firstName: "Mahesh",
　　　　　　　　　　　　　　　lastName: "Parashar",
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　fullName: function() {
　　　　　　　　　　　　　　　　　　var studentObject;
　　　　　　　　　　　　　　　　　　studentObject = $scope.student;
　　　　　　　　　　　　　　　　　　return studentObject.firstName　+　"　"　+　studentObject.lastName;
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　};
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>

测试看看‹/›

输出结果

在网页浏览器中打开文件testAngularJS.htm并查看结果。

过滤器AngularJS 表达式AngularJS

AngularJS 基础教程

控制器AngularJS

Ejemplo en línea

testAngularJS.htm