Los controladores AngularJS juegan un papel importante en las aplicaciones AngularJS. Toda la aplicación AngularJS se basa principalmente en los controladores para controlar el flujo de datos en esa aplicación. Básicamente, controla los datos de las aplicaciones AngularJS y el controlador es un objeto Javascript , creado por un constructor de objetos JavaScript estándar .
La directiva ng-controller define el controlador de la aplicación. En AngularJS, un controlador se define mediante una función de construcción de Javascript y se usa el alcance de AngularJS y también la función $scope) se define cuando el controlador se define y devuelve la concatenación de $scope.firstname y $scope.lastname .
Sintaxis:
<element ng-controller="expression">Contents...</element>
Ejemplo: este ejemplo utiliza la directiva ng-controller para mostrar la concatenación de la primera y la segunda entrada de un usuario.
Javascript
<!DOCTYPE html>
<html>
<head>
<title>ng-controller Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "Geeks";
$scope.lastName = "Geeks";
});
</script>
</head>
<center>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-controller Directive</h2>
<div ng-app="myApp" ng-controller="myCtrl">
First Name:
<input type="text" ng-model="firstName">
<br> Last Name:
<input type="text" ng-model="lastName">
<br>
<br> Full Name: {{firstName + "for" + lastName}}
</div>
</body>
</center>
</html>
Producción:
Métodos de controlador
Este primer ejemplo demostró un objeto de controlador con dos propiedades: Fname y Lname. En AngularJS, la función ($scope) se define cuando el controlador está definiendo y devuelve la concatenación de $scope.firstname y $scope.lastname. Aquí un controlador también puede tener métodos (variables como funciones):
Ejemplo:
Javascript
<!DOCTYPE html>
<html>
<head>
<title>ng-controller Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script>
var app = angular.module('geeks', []);
app.controller('personCtrl', function($scope) {
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
</head>
<center>
<body style="padding: 30px">
<div ng-app="geeks" ng-controller="personCtrl">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-controller Directive</h2> First Name:
<input type="text" ng-model="firstName">
<br><br> Last Name:
<input type="text" ng-model="lastName">
<br>
<br> Full Name: {{fullName()}}
</div>
</body>
</center>
</html>
Salida:
Antes de escribir el nombre:
Después de escribir el nombre:
Controladores en archivos externos
En aplicaciones más grandes, es común almacenar los controladores en un archivo externo, solo necesita copiar ese nombre de archivo y pegarlo en una etiqueta <script>. Aquí el nombre del archivo externo es «geeksforgeeks.js»
Ejemplo:
Javascript
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<script src="geeksforgeeks.js"></script>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-controller Directive</h2>
<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName">
<br>
Last Name: <input type="text" ng-model="lastName">
<br><br>
Full Name: {{fullName()}}
</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por arjun20111996 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA