Controladores AngularJS con ejemplo de ng-Controller

Por: james hartman james hartman
Hours Actualizado

⚡ Resumen inteligente

Un controlador en AngularJS contiene la lógica de negocio de una pantalla. Recibe datos a través del objeto scope, los procesa y expone el resultado de vuelta a la vista, manteniendoping Marcado de presentación libre de lógica de aplicación.

  • 🎯 Responsabilidad principal: Un controlador rellena el objeto scope y expone métodos a la vista; no manipula el DOM.
  • 🔗 Alambrado: La directiva ng-controller vincula un controlador con nombre a un elemento, otorgando a ese elemento y a sus elementos secundarios acceso al ámbito del controlador.
  • 🔁 Encuadernación bidireccional: ng-model vincula un campo de formulario a una propiedad de ámbito, de modo que las ediciones en la vista actualizan el controlador y viceversa.
  • 🧩 Métodos: Las funciones asociadas al ámbito separan distintas partes de la lógica y se pueden llamar directamente desde expresiones de vista.
  • 🏷️ Sintaxis del controlador: Crear un alias para un controlador y vincularlo a this Elimina la ambigüedad cuando los controladores están anidados unos dentro de otros.
  • 📁 Separación: Trasladar los controladores a un archivo app.js dedicado permite que la capa de vista sea independiente de la capa lógica.
Descubre más

Controladores de AngularJS con ng-controller

¿Qué es el controlador en AngularJS?

A Control En AngularJS, el controlador toma los datos de la vista, los procesa y luego los envía a la vista que se muestra al usuario final. El controlador contiene la lógica de negocio principal. Utiliza el modelo de datos, realiza el procesamiento necesario y luego pasa el resultado a la vista.

⚠️ Nota de versión: AngularJS (la rama 1.x) llegó al final de su ciclo de vida el 31 de diciembre de 2021 y ya no recibe actualizaciones de seguridad. Los conceptos que se describen a continuación siguen siendo válidos para aplicaciones antiguas; en Angular moderno, esta misma función la desempeña una clase de componente en lugar de un controlador.

Saber qué es un controlador deja una pregunta abierta: ¿cómo se comunica realmente con la vista? La siguiente sección responde a esa pregunta.

¿Qué hace Controller desde la perspectiva de Angular?

A continuación se presenta una definición sencilla del funcionamiento de un controlador de AngularJS:

Funcionamiento del controlador AngularJS
Funcionamiento del controlador AngularJS
  • La responsabilidad principal del controlador es controlar los datos que pasan a la vista. El alcance y la vista tienen comunicación bidireccional.
  • Las propiedades y los eventos de la vista pueden llamar a funciones en el ámbito. El siguiente fragmento muestra la función ($ alcance) declarado con el controlador más una función interna que devuelve $scope.firstName y $scope.lastName se unió. En AngularJS, una función definida como una variable es un Método.

Funcionamiento del controlador AngularJS

  • Los datos pasan del controlador al ámbito, y luego van y vienen entre el ámbito y la vista.
  • El ámbito expone el modelo a la vista. El modelo se puede modificar mediante métodos definidos en el ámbito, que se activan mediante eventos de la vista.
  • Los controladores no deben usarse para manipular el DOM. Ese es el trabajo de directivas.
  • La mejor práctica es basar los controladores en la funcionalidad. Si tienes un formulario de entrada que necesita un controlador, crea uno llamado "controlador de formulario".

Una vez comprendido el mecanismo, la siguiente sección crea un controlador a partir de una página vacía.

Cómo construir un controlador básico en AngularJS

A continuación se detallan los pasos para crear un controlador en AngularJS.

Paso 1) Crea una página HTML básica

Antes de crear un controlador, la página HTML básica debe estar lista. El fragmento a continuación es una página simple titulada “Registro de eventos” que hace referencia a Bootstrap y AngularJS.

Construya un controlador básico en AngularJS

  1. Referencias a la Bootstrap Hoja de estilo CSS, utilizada junto con la Bootstrap biblioteca.
  2. Una referencia a la biblioteca AngularJS. Todo lo que se haga con AngularJS a partir de ahora se resolverá desde este archivo.
  3. Una referencia a la Bootstrap biblioteca, que hace que ciertos controles sean receptivos.

⚠️ Corrección: El original cargó jQuery y afirmó que AngularJS depende de él. No es así. AngularJS viene con jqLite, un subconjunto integrado de la API de jQuery, y solo se actualiza a jQuery completo si jQuery se carga. antes Se ha eliminado la referencia.

Paso 2) Verifique los archivos y la estructura de los archivos

Construya un controlador básico en AngularJS

  1. Los archivos se dividen en dos carpetas como en cualquier aplicación web convencional: "css" para hojas de estilo y "lib" para JavaScript archivos.
  2. El archivo bootstrap.css se encuentra en la carpeta css y le da al sitio su apariencia.
  3. angular.js es la biblioteca principal, descargada del sitio de AngularJS y almacenada en lib.
  4. El archivo app.js contendrá el código de los controladores.

Paso 3) Utilice el código AngularJS para mostrar el resultado

El objetivo es mostrar las palabras "AngularJS" tanto en texto plano como dentro de un cuadro de texto cuando se abre la página en el navegador.

Construya un controlador básico en AngularJS

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName}}
</div>

<script src="lib/angular.js"></script>
<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";
}]);
</script>
</body>
</html>

Code Explicación:

  1. aplicación ng marca este elemento como la raíz de una aplicación AngularJS. Atributos con prefijo ng- son directivas integradas. “DemoApp” es el nombre que se le da a la aplicación.
  2. El div lleva controlador ng con el nombre “DemoController”, lo que otorga a ese elemento y a todo lo que contiene acceso al ámbito del controlador.
  3. modelo ng crea la vinculación del modelo, conectando el cuadro de texto Nombre del tutorial a la propiedad del ámbito tutorialName.
  4. El módulo DemoApp se crea y el controlador asigna un valor predeterminado de “AngularJS” a tutorialName.

⚠️ Correcciones aplicadas. El listado original declaraba chrset="UTF 8", que no es ni un atributo válido ni un nombre de codificación válido, y cargó AngularJS dos veces: una vez desde la CDN y otra vez desde lib/angular.jsCargar la biblioteca dos veces vuelve a registrar el sistema de módulos y produce un comportamiento impredecible. La anotación de matriz de dependencias ['$scope', function($scope){…}] También se agregó, sin lo cual el controlador falla en el momento en que se minimiza el archivo.

Salida:

Construya un controlador básico en AngularJS

Gracias tutorialName Se le asignó el valor “AngularJS”, el cual aparece en el cuadro de texto y en la línea de texto sin formato. Una sola propiedad es suficiente para una demostración; los controladores reales suelen exponer también el comportamiento, tema que se aborda en la siguiente sección.

ARTÍCULOS RELACIONADOS

Cómo definir métodos en controladores AngularJS

Normalmente, se definirían varios métodos en un controlador para separar la lógica de negocio. Si el controlador tuviera que sumar dos números y restar...tracSi hay dos números, se crearía un método para cada operación.

El siguiente ejemplo define un método personalizado dentro de un controlador de AngularJS que devuelve una cadena de texto.

Definir métodos en controladores AngularJS

<!-- The head and library references are unchanged from Step 3 -->
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tName()}}
</div>

<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "AngularJS";

  // A method on the scope, callable from the view as tName()
  $scope.tName = function() {
    return $scope.tutorialName;
  };
}]);
</script>

Code Explicación:

  1. Una función se adjunta al objeto de ámbito como miembro. tName. Devuelve el valor actual de tutorialName.
  2. La vista llama al método con {{tName()}}Los paréntesis son importantes: sin ellos, la expresión imprime la función en sí misma en lugar de su resultado.

⚠️ Corrección: El método original lee $scope.tName = function() { return $scope.tName; };. Esa función devuelve sí misma, no el nombre del tutorial, por lo que la página renderizó el cuerpo de la función en lugar de texto. Ahora devuelve $scope.tutorialName.

Salida:

Definir métodos en controladores AngularJS

Hasta ahora, todo se ha almacenado en un solo archivo. Las aplicaciones de producción mantienen los controladores separados, como se muestra en la siguiente sección.

Ejemplo de controlador AngularJS con ng-Controller

El ejemplo “HelloWorld” anterior colocó toda la funcionalidad en un solo archivo. Ahora es el momento de mover el código del controlador a su propio archivo.

Paso 1) En el archivo app.js, agregue el siguiente código para su controlador.

Controlador AngularJS con ng-Controller

angular.module('app', [])
  .controller('HelloWorldCtrl', ['$scope', function($scope) {
    $scope.message = "Hello World";
  }]);

El código anterior hace lo siguiente:

  1. Define un módulo llamado “app” que contiene el controlador.
  2. Crea un controlador llamado “HelloWorldCtrl” que muestra un mensaje de “Hola Mundo”.
  3. Utiliza el objeto scope para pasar información del controlador a la vista, en este caso una variable llamada message.

Paso 2) En Sample.html, agregue un div que contenga la directiva ng-controller y una referencia a la variable miembro. messageRecuerda hacer referencia a app.js, que contiene el código fuente del controlador.

Controlador AngularJS con ng-Controller

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>

<script src="lib/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

⚠️ Corrección: Se debe cargar el archivo app.js. después angular.js, ya que llama angular.module. El original también cargó la biblioteca dos veces y llevó el mismo chrset error de tipografía.

Salida:

Controlador AngularJS con ng-Controller

Todos los ejemplos hasta ahora han leído y escrito propiedades directamente en $scopeLa sección siguiente describe la alternativa que recomienda el equipo de AngularJS.

Cómo usar la sintaxis controllerAs en AngularJS

Vinculación directa con $scope funciona, pero se vuelve ambiguo tan pronto como los controladores se anidan. Una expresión de vista como {{name}} no da ninguna pista de qué controlador es el propietario namey debido a que los ámbitos secundarios heredan prototípicamente de los ámbitos principales, un controlador anidado que escribe en una primitiva heredada crea silenciosamente su propia copia en la sombra. controllerAs La sintaxis elimina ambos problemas al asignar un alias a cada controlador.

Paso 1) Alias ​​el controlador en la vista usando el as palabra clave, luego anteponga ese alias a cada enlace.

Paso 2) Dentro del controlador, adjunte propiedades a this en lugar de $scope.

<div ng-controller="DemoController as demo">
Tutorial Name : <input type="text" ng-model="demo.tutorialName">
This tutorial is {{demo.tutorialName}}
</div>

<script>
app.controller('DemoController', function() {
  // 'vm' is captured so nested functions keep the right reference
  var vm = this;
  vm.tutorialName = "AngularJS";

  vm.tName = function() {
    return vm.tutorialName;
  };
});
</script>

Se obtienen tres ventajas. Los enlaces se vuelven autodocumentados, porque demo.tutorialName nombra a su propietario. Los controladores anidados dejan de colisionar, ya que un padre tiene un alias. outer y un niño alias inner ambos pueden exponer nameLos valores también se vinculan a través de un objeto en lugar de un tipo primitivo simple, lo que permite evitar problemas.ping La trampa en la que una edición en un elemento hijo nunca llega al elemento padre.

👍 Tip: Capturar this en una variable como vm en la parte superior del controlador. Dentro de una función de devolución de llamada, this Se refiere a algo completamente distinto, y la referencia capturada mantiene la vinculación correcta.

Elegir un estilo de enlace es una decisión. Decidir qué debe incluirse en un controlador es otra, y la comparación que aparece a continuación traza esa línea.

Controlador vs. Servicio en AngularJS

Los principiantes suelen sobrecargar el controlador con tareas que deberían estar en un servicio. La diferencia radica en el ciclo de vida y la reutilización: un controlador existe solo mientras su vista está en pantalla, mientras que un servicio es un singleton que existe durante toda la vida útil de la aplicación.

Aspecto Control Servicio
Dura toda la vida Creado y destruido con la vista Una única instancia para toda la aplicación.
Propósito Prepare los datos para una vista Lógica compartida, estado y llamadas al servidor
Reutilizable No, vinculado a su visión Sí, inyectable en cualquier parte.
Mantiene el estado entre vistas No, el estado se pierde en la navegación. Sí, el estado persiste.
Contenido típico Propiedades del ámbito y métodos de vista Llamadas HTTP, almacenamiento en caché, reglas de negocio

Mantén los controladores sencillos. Si dos controladores necesitan la misma lógica, o si un valor debe conservarse al navegar entre vistas, trasládalo a un servicio e inyéctalo donde sea necesario. Una prueba práctica consiste en preguntarse si el código seguiría teniendo sentido con la pantalla actual cerrada. Si la respuesta es afirmativa, entonces debería estar en un servicio.

Preguntas Frecuentes

Sí. AngularJS crea una instancia y un ámbito independientes para cada elemento que contiene la directiva. Las instancias no comparten estado, por lo que un cambio en una no se refleja en la otra.

Decláralo en la ruta cuando el controlador pertenece a una vista completa cargada por enrutamientoUtilice ng-controller para un componente que aparezca dentro de una página independientemente de la ruta actual. Nunca declare ambos, o el controlador se ejecutará dos veces.

Utilice la anotación de matriz, enumerando los nombres de las dependencias como cadenas antes de la función. Los minificadores renombran los argumentos de la función, pero nunca las cadenas literales, por lo que el inyector sigue resolviendo correctamente $scope y cualquier servicio.

Sí. AI Los asistentes generan las vinculaciones de módulos, controladores y ámbitos a partir de una descripción simple de la pantalla. Siempre verifique la anotación de dependencia, ya que el código generado a menudo la omite.

Las herramientas de IA reescriben las asignaciones de ámbito como propiedades en una variable de máquina virtual capturada y anteponen el alias a cada enlace de vista coincidente. RevVea las llamadas a $watch y los detectores de eventos manualmente, porque todavía requieren el objeto scope.

Resumir este post con: