Tutorial de controlador AngularJS con ejemplo

¿Qué es Controller 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 Controller tendrá su lógica de negocio principal.

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, usted aprenderá –

Qué hace el controlador desde la perspectiva de Angular

A continuación se presenta una definición simple de trabajo de Angular JS Controller.

  • La responsabilidad principal del controlador es controlar los datos que se pasan a la vista. El alcance y la vista tienen comunicación bidireccional.
  • Las propiedades de la vista pueden llamar a “funciones” en el ámbito. Además, los eventos en la vista pueden llamar “métodos” en el alcance. El siguiente fragmento de código da un ejemplo simple 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 los $scope.firstName y $scope.lastName.
  • En AngularJS cuando se define una función como una variable, se conoce como un método.

  • Los datos de esta manera pasan del controlador al ámbito, y luego los datos pasan de un lado a otro desde el ámbito a la vista.
  • El ámbito se utiliza para exponer el modelo a la vista. El modelo se puede modificar a través de métodos definidos en el alcance que podrían desencadenarse a través de eventos desde la vista. Podemos definir el enlace del modelo de dos vías desde el alcance hasta el modelo.
  • Idealmente, los controladores no deberían usarse para manipular el DOM. Esto debería hacerse con 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 de entrada y necesita un controlador para eso, cree un controlador llamado “controlador de formulario”.

Cómo construir un controlador básico

Antes de comenzar con la creación de un controlador, primero necesitamos tener nuestra configuración básica de la 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.

  1. Estamos agregando referencias a las hojas de estilo CSS bootstrap, que se utilizarán junto con las bibliotecas bootstrap.
  2. Estamos agregando referencias a las bibliotecas angularjs. Así que ahora cualquier cosa que hagamos con angular.js en adelante será referenciado desde esta biblioteca.
  3. Estamos agregando referencias a la biblioteca bootstrap para hacer que nuestra página web sea más receptiva para ciertos controles.
  4. Hemos agregado referencias a bibliotecas jquery que se utilizarán para la manipulación DOM. Esto es requerido por Angular porque parte de la funcionalidad en Angular depende de esta biblioteca.

Por defecto, el fragmento de código anterior estará presente en todos nuestros ejemplos, de modo que podamos mostrar solo el código específico de AngularJS en las secciones siguientes.

En segundo lugar, echemos un vistazo a nuestros archivos y estructura de archivos con los que vamos a empezar durante la duración de nuestro curso.

  1. Primero separamos nuestros archivos en 2 carpetas como se hace con cualquier aplicación web convencional. Tenemos la carpeta “CSS”. Contendrá todos nuestros archivos de hoja de estilo en cascada, y luego tendremos nuestra carpeta “lib” que tendrá todos nuestros archivos JavaScript.
  2. El archivo bootstrap.css se coloca en la carpeta CSS y se utiliza para agregar una buena apariencia para nuestro sitio web.
  3. El angular.js es nuestro archivo principal que se descargó del sitio AngularJS y se mantuvo en nuestra carpeta lib.
  4. El archivo app.js contendrá nuestro código para los controladores.
  5. El archivo bootstrap.js se utiliza para complementar el archivo bootstrap.cs para agregar funcionalidad bootstrap a nuestra aplicación web.
  6. El archivo jquery se usará para agregar la funcionalidad de manipulación DOM a nuestro sitio.

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 ve en el navegador.

Explicación del código:

  1. La palabra clave ng-app se utiliza para denotar que esta aplicación debe considerarse como una aplicación angular. Cualquier cosa que comience con el prefijo ‘ng’ se conoce como directiva. “DemoApp” es el nombre dado a nuestra aplicación Angular.js.
  2. Hemos creado una etiqueta div y en esta etiqueta hemos añadido una directiva ng-controller junto con el nombre de nuestro controlador “DemoController”. Esto básicamente hace que nuestra etiqueta div sea la capacidad de acceder a los contenidos 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.
  3. Estamos creando un enlace de modelo usando la directiva ng-model. Lo que esto hace es que vincula el cuadro de texto para Tutorial Name a la variable de miembro “TutorialName”.
  4. 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 Tutorial Name.
  5. Estamos creando un módulo que se adjuntará a nuestra aplicación DemoApp. Así que este módulo ahora se convierte en parte de nuestra aplicación.
  6. En el módulo, definimos una función que asigna un valor predeterminado de “AngularJS” a nuestra variable TutorialName.

Si el comando se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador.

Salida:


Dado que 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 múltiples métodos en el controlador para separar la lógica comercial.

Por ejemplo, supongamos que si desea que su controlador haga 2 cosas básicas,

1. Realizar la adición de 2 números
2. 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.

Explicación del código:

  1. Aquí, solo estamos definiendo una función que devuelve una cadena de “AngularJS”. La función se adjunta al objeto de ámbito a través de una variable miembro llamada TutorialName.
  2. Si el comando se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute el código en el navegador.

Salida:

Uso de 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 para el controlador en archivos separados.

Vamos a seguir los pasos que se indican a continuación para hacer esto.

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

El código anterior hace las siguientes cosas,

  1. Defina un módulo llamado “aplicación” que mantendrá el controlador junto con la funcionalidad del controlador.
  2. Cree un controlador con el nombre “HelloWorldCtrl”. Este controlador se utilizará para tener una funcionalidad para mostrar un mensaje “Hello World”.
  3. El objeto de ámbito se utiliza para pasar información desde el controlador a la vista. Entonces, en nuestro caso, el objeto scope se usará para contener una variable llamada “message”.
  4. Estamos definiendo el mensaje variable y asignándole el valor “Hello World”.

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 “message”

Además, no olvide agregar una referencia al archivo de script app.js que tiene el código fuente para su controlador.

Si el código anterior se introduce correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

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 puede 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 Vista. Normalmente, esta es una práctica recomendada al crear aplicaciones web.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *