¿Cómo crear controladores anidados en Angular.js?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *