Un controlador en AngularJS es un objeto de JavaScript creado con la ayuda de un constructor de objetos de JavaScript. Un controlador puede contener propiedades y funciones. Los controladores se utilizan para controlar los datos de aplicación de una aplicación AngularJS.
En este artículo, veremos los controladores anidados en AngularJS y comprenderemos su implementación con la ayuda de ejemplos.
El enfoque utilizado para crear un controlador en AngularJS es crear un controlador, primero necesitamos crear un módulo de aplicación . Un módulo se utiliza para definir una aplicación.
Sintaxis:
var app=angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
...
});
Descripción:
- Una vez que se crea un módulo, le agregamos un controlador usando el método controller() .
- El primer parámetro dentro del método controller() es el nombre del controlador.
- El segundo parámetro es una función que tiene $scope como parámetro. El marco AngularJS inyecta el objeto $scope en cada controlador.
- Se pueden adjuntar diferentes propiedades y métodos al objeto $scope dentro de la función del controlador.
- Para usar una propiedad de un controlador o mantener los datos en un elemento HTML, debe especificar el controlador en la directiva ng-controller.
Ejemplo 1: Este ejemplo ilustrará cómo crear un controlador
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example 1</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h1>{{title}}</h1>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.title = "AngularJS Controller";
});
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo ilustrará la conexión de diferentes propiedades al controlador
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example 2</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h1>{{properties.name}}</h1>
<p>{{properties.subject}}</p>
<label>First name:</label>
<input type="text" ng-model="firstname">
<br><br>
<label>Last name:</label>
<input type="text" ng-model="lastname">
<br><br>
<p ng-show="firstname!=undefined && lastname!=undefined">
Hello {{displayname()}}
</p>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.properties = {
"name": "GeeksforGeeks",
"subject": "AngularJS Controllers"
};
$scope.displayname = function () {
return $scope.firstname + " " + $scope.lastname;
};
});
</script>
</body>
</html>
Producción:
Ejemplo 2
En el ejemplo anterior, hemos agregado propiedades al controlador «myCtrl». Un controlador puede tener diferentes propiedades como string, número, objeto, array, función.
Controladores anidados: AngularJS permite usar controladores anidados. Significa que ha especificado un controlador en un elemento HTML que es hijo de otro elemento HTML usando otro controlador. Un punto importante a tener en cuenta aquí es que un controlador secundario puede acceder a las propiedades y métodos que pertenecen a un controlador principal, pero un controlador principal no puede acceder a las propiedades y métodos de un controlador secundario.
Sintaxis:
<div ng-controller="controller">
<div ng-controller="subcontroller">
</div>
</div>
Ejemplo 1: este ejemplo ilustrará cómo crear controladores anidados
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example 3</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="parentController">
<div ng-controller="childController">
<p>{{title}}</p>
</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("parentController", function ($scope) {
$scope.title = "This is parent controller.";
});
app.controller("childController", function ($scope) {
});
</script>
</body>
</html>
Producción:
Ejemplo 3
Aquí puede observar que el controlador principal tiene una propiedad llamada título que hereda el controlador secundario.
Ejemplo 2: si agregamos la misma propiedad a los controladores principal y secundario
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example 4</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="parentController">
<div ng-controller="childController">
<p>{{title}}</p>
</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("parentController", function ($scope) {
$scope.title = "This is parent controller.";
});
app.controller("childController", function ($scope) {
$scope.title = "This is child controller.";
});
</script>
</body>
</html>
Producción:
Ejemplo 4
Aquí puede observar que tanto el controlador principal como el secundario tienen la propiedad denominada título. La propiedad del controlador secundario anula la del controlador principal.
Ejemplo 5: El siguiente ejemplo muestra cómo podemos usar controladores anidados en AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Example 5</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="parentController">
<div ng-controller="childController">
<div ng-controller="subtopicsController">
<h1>{{title}}</h1>
<p>Topics:</p>
<div>
<ul ng-repeat="x in topics">
<li>{{x}}</li>
</ul>
</div>
<div>
<p>Subtopics:</p>
<ul ng-repeat="y in subtopics">
<li>{{y}}</li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.controller("parentController", function ($scope) {
$scope.title = "GeeksforGeeks";
});
app.controller("childController", function ($scope) {
$scope.topics = ["Expressions", "Modules", "Controllers"];
});
app.controller("subtopicsController", function ($scope) {
$scope.subtopics = [
"What are expressions?",
"How are they used in data binding?",
"What are modules in AngularJS?",
"What is their importance?",
"What are controllers?",
"What are nested controllers?"
];
});
</script>
</body>
</html>
Producción:
Ejemplo 5
Publicación traducida automáticamente
Artículo escrito por divyasharma5d12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA