¿Qué es el controlador en AngularJs?
Un controlador en AngularJs toma los datos de la Vista, procesa los datos y luego envía esos datos a la vista que se muestra al usuario final. El controlador tendrá su lógica empresarial central.
El controlador utilizará el modelo de datos, llevará a cabo el procesamiento requerido y luego pasará la salida a la vista que a su vez se muestra al usuario final.
En este tutorial, aprenderá:
- Qué hace Controller desde la perspectiva de Angular
- Cómo construir un controlador básico
- Cómo definir métodos en el controlador
- Usando ng-controller en archivos externos
- La responsabilidad principal del controlador es controlar los datos que se transmiten a la vista. El alcance y la vista tienen comunicación bidireccional.
- Las propiedades de la vista pueden llamar "funciones" en el ámbito. Además, los eventos en la vista pueden llamar "métodos" en el alcance. El siguiente fragmento de código ofrece un ejemplo sencillo de una función.
- La función ($ scope) que se define al definir el controlador y una función interna que se utiliza para devolver la concatenación de $ scope.firstName y $ scope.lastName.
- En AngularJS, cuando define una función como una variable, se conoce como Método.
- De esta manera, los datos pasan del controlador al alcance, y luego los datos pasan de un alcance a otro a la vista.
- El alcance se utiliza para exponer el modelo a la vista. El modelo se puede modificar mediante métodos definidos en el alcance que podrían activarse mediante eventos de la vista. Podemos definir el enlace de modelo bidireccional desde el alcance hasta el modelo.
- Lo ideal es que los controladores no se utilicen para manipular el DOM. Esto debería hacerse mediante las directivas que veremos más adelante.
- La mejor práctica es tener el controlador basado en la funcionalidad. Por ejemplo, si tiene un formulario para la entrada y necesita un controlador para eso, cree un controlador llamado "controlador de formulario".
- Estamos agregando referencias a las hojas de estilo CSS de arranque, que se utilizarán junto con las bibliotecas de arranque.
- Estamos agregando referencias a las bibliotecas de angularjs. Así que ahora todo lo que hagamos con angular.js en el futuro será referenciado desde esta biblioteca.
- Estamos agregando referencias a la biblioteca de arranque para hacer que nuestra página web responda mejor a ciertos controles.
- Hemos agregado referencias a las bibliotecas jquery que se utilizarán para la manipulación de DOM. Angular requiere esto porque algunas de las funciones de Angular dependen de esta biblioteca.
- Primero, segregamos nuestros archivos en 2 carpetas como se hace con cualquier aplicación web convencional. Tenemos la carpeta "CSS". Contendrá todos nuestros archivos de hojas de estilo en cascada, y luego tendremos nuestra carpeta "lib" que tendrá todos nuestros archivos JavaScript.
- El archivo bootstrap.css se coloca en la carpeta CSS y se usa para agregar una buena apariencia a nuestro sitio web.
- El angular.js es nuestro archivo principal que se descargó del sitio de angularJS y se guardó en nuestra carpeta lib.
- El archivo app.js contendrá nuestro código para los controladores.
- El archivo bootstrap.js se usa para complementar el archivo bootstrap.cs para agregar la funcionalidad de bootstrap a nuestra aplicación web.
- El archivo jquery se utilizará para agregar la funcionalidad de manipulación DOM a nuestro sitio.
Que hace Controller desde la perspectiva de Angular
A continuación se muestra una definición simple del funcionamiento de Angular JS Controller.
Cómo construir un controlador básico
Antes de comenzar con la creación de un controlador, primero debemos tener nuestra configuración básica de página HTML en su lugar.
El siguiente fragmento de código es una página HTML simple que tiene un título de "Registro de eventos" y tiene referencias a bibliotecas importantes como Bootstrap, jquery y Angular.
De forma predeterminada, el fragmento de código anterior estará presente en todos nuestros ejemplos, de modo que podamos mostrar solo el código angularJS específico en las secciones siguientes.
En segundo lugar, veamos nuestros archivos y la estructura de archivos con los que vamos a comenzar durante la duración de nuestro curso.
Veamos un ejemplo sobre cómo usar angular.js,
Lo que queremos hacer aquí es mostrar las palabras "AngularJS" tanto en formato de texto como en un cuadro de texto cuando la página se visualiza en el navegador.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Explicación del código:
- La palabra clave ng-app se usa para indicar que esta aplicación debe considerarse como una aplicación angular. Todo lo que comience con el prefijo 'ng' se conoce como directiva. "DemoApp" es el nombre que se le da a nuestra aplicación Angular.JS.
- Hemos creado una etiqueta div y en esta etiqueta hemos agregado una directiva ng-controller junto con el nombre de nuestro controlador "DemoController". Básicamente, esto hace que nuestra etiqueta div tenga la capacidad de acceder al contenido del controlador de demostración. Debe mencionar el nombre del controlador bajo la directiva para asegurarse de que puede acceder a la funcionalidad definida dentro del controlador.
- Estamos creando un enlace de modelo utilizando la directiva ng-model. Lo que esto hace es que enlaza el cuadro de texto para que el nombre del tutorial se vincule a la variable miembro "tutorialName".
- Estamos creando una variable miembro llamada "tutorialName" que se utilizará para mostrar la información que el usuario escribe en el cuadro de texto para el nombre del tutorial.
- Estamos creando un módulo que se adjuntará a nuestra aplicación DemoApp. Entonces, este módulo ahora se convierte en parte de nuestra aplicación.
- En el módulo, definimos una función que asigna un valor predeterminado de "AngularJS" a nuestra variable tutorialName.
Si el comando se ejecuta con éxito, la siguiente salida se mostrará cuando ejecute su código en el navegador.
Producción:
Dado que le asignamos a la variable tutorialName un valor de "Angular JS", esto se muestra en el cuadro de texto y en la línea de texto sin formato.
Cómo definir métodos en el controlador
Normalmente, uno querría definir varios métodos en el controlador para separar la lógica empresarial.
Por ejemplo, suponga que si quisiera que su controlador hiciera 2 cosas básicas,
- Realiza la suma de 2 números
- Realizar la resta de 2 números
Entonces, idealmente crearía 2 métodos dentro de su controlador, uno para realizar la suma y el otro para realizar la resta.
Veamos un ejemplo simple de cómo puede definir métodos personalizados dentro de un controlador Angular.JS. El controlador simplemente devolverá una cadena.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Explicación del código:
- Aquí, solo estamos definiendo una función que devuelve una cadena de "AngularJS". La función se adjunta al objeto de alcance a través de una variable miembro llamada tutorialName.
- Si el comando se ejecuta con éxito, la siguiente salida se mostrará cuando ejecute su código en el navegador.
Producción:
Usando ng-controller en archivos externos
Veamos un ejemplo de "HelloWorld" donde toda la funcionalidad se colocó en un solo archivo. Ahora es el momento de colocar el código del controlador en archivos separados.
Sigamos los pasos a continuación para hacer esto.
Paso 1) En el archivo app.js, agregue el siguiente código para su controlador
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
El código anterior hace las siguientes cosas,
- Defina un módulo llamado "aplicación" que contendrá el controlador junto con la funcionalidad del controlador.
- Cree un controlador con el nombre "HelloWorldCtrl". Este controlador se utilizará para tener una funcionalidad para mostrar un mensaje "Hola mundo".
- El objeto de alcance se utiliza para pasar información del controlador a la vista. Entonces, en nuestro caso, el objeto de alcance se usará para contener una variable llamada "mensaje".
- Estamos definiendo la variable mensaje y asignándole el valor "Hola mundo".
Paso 2) Ahora, en su archivo Sample.html agregue una clase div que contendrá la directiva ng-controller y luego agregue una referencia a la variable miembro "mensaje"
Además, no olvide agregar una referencia al archivo de script app.js que tiene el código fuente de su controlador.
Event Registration Guru99 Global Event
{{message}}
Si el código anterior se ingresa correctamente, la siguiente salida se mostrará cuando ejecute su código en el navegador.
Producción:
Resumen
- La responsabilidad principal del controlador es crear un objeto de alcance que a su vez se pasa a la vista
- Cómo construir un controlador simple usando las directivas ng-app, ng-controller y ng-model
- Cómo agregar métodos personalizados a un controlador que se pueden usar para separar varias funcionalidades dentro de un módulo angularjs.
- Los controladores se pueden definir en archivos externos para separar esta capa de la capa Ver. Esta es normalmente una de las mejores prácticas al crear aplicaciones web.
