Controladores AngularJS con ejemplo de ng-Controller

¿Qué hace el controlador desde la perspectiva de Angular?

A continuación se muestra una definición simple del 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 de la vista pueden llamar "funciones" en el alcance. 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.
• El sistema función ($ alcance) 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.
• In AngularJS, cuando defines 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 van y vienen del alcance 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 un enlace de modelo bidireccional desde el alcance al modelo.
• Lo ideal es que los controladores no se utilicen para manipular el DOM. Esto se debe hacer mediante directivas que veremos más adelante.
• La mejor práctica es tener controladores basados ​​en funcionalidades. Por ejemplo, si tiene un formulario para ingresar datos y necesita un controlador para eso, cree un controlador llamado "controlador de formulario".

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 comenzar con la creación de un controlador, primero debemos tener configurada nuestra página HTML básica.

El siguiente fragmento de código es una página HTML simple que tiene el título "Registro de eventos" y tiene referencias a bibliotecas importantes como Bootstrap, jQuery y Angular.

1. Estamos agregando referencias a las hojas de estilo CSS de bootstrap, que se usarán junto con las bibliotecas de bootstrap.
2. Estamos agregando referencias a las bibliotecas angularjs. Entonces, ahora todo lo que hagamos con angular.js en el futuro será referenciado desde esta biblioteca.
3. Estamos agregando referencias a la biblioteca bootstrap para que nuestra página web responda mejor a ciertos controles.
4. Hemos agregado referencias a bibliotecas jquery que se utilizarán para la manipulación DOM. Angular lo requiere porque algunas de las funciones de Angular dependen de esta biblioteca.

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.

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

En segundo lugar, veamos nuestros archivos y la estructura de archivos con los que comenzaremos durante nuestro curso.

1. 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 contendrá todos nuestros JavaGuión archivos.
2. El archivo bootstrap.css se coloca en la carpeta CSS y se utiliza para agregar una buena apariencia a nuestro sitio web.
3. Angular.js es nuestro archivo principal que se descargó del sitio angularJS y se guardó 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 de arranque a nuestra aplicación web.
6. El archivo jquery se utilizará para agregar la funcionalidad de manipulación DOM a nuestro sitio.

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

Lo que queremos hacer aquí es simplemente mostrar las palabras “AngularJS” tanto en formato de texto como en un cuadro de texto cuando se visualiza la página en el navegador. Veamos un ejemplo de cómo usar angular.js para hacer esto:

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">

	Tutorial Name : <input type="text" ng-model="tutorialName"><br>

	This tutorial is {{tutorialName}}
</div>
<script>
	var app = angular.module('DemoApp',[]);

	app.controller('DemoController', function($scope){
	$scope.tutorialName = "Angular JS";
	});
</script>

</body>
</html>

Explicación del código:

1. El sistema aplicación ng La palabra clave se utiliza para indicar que esta aplicación debe considerarse como una aplicación angular. Todo lo que comience con el prefijo 'ng' es conocido como Directivas. “DemoApp” es el nombre que recibe nuestra aplicación Angular.JS.
2. 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 según la directiva para asegurarse de poder acceder a la funcionalidad definida dentro del controlador.
3. Estamos creando un enlace de modelo mediante la directiva ng-model. Esto hace que el cuadro de texto para el nombre del tutorial se vincule con la variable 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 Nombre del tutorial.
5. Estamos creando un módulo que se adjuntará a nuestra aplicación DemoApp. Entonces este módulo ahora pasa a formar 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 su código en el navegador.

Salida:

Como 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 controladores AngularJS

Normalmente, sería deseable definir varios métodos en el controlador para separar la lógica empresarial.

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

1. Realizar la suma de 2 números.
2. Realizar la resta de 2 números.

Luego, lo ideal sería crear 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 puedes definir métodos personalizados dentro de un controlador Angular.JS. El controlador simplemente devolverá una cadena.

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

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

<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
	$scope.tName = function() {
        return $scope.tName;
    };
});
</script>	
</body>
</html>

Explicación del código:

1. Aquí, simplemente 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.
2. Si el comando se ejecuta correctamente, se mostrará la siguiente salida cuando ejecute su código en el navegador.

Salida:

Ejemplo de controlador AngularJS con ng-Controller

Veamos un ejemplo de "HelloWorld" donde todas las funciones se colocaron 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 lo siguiente:

1. Defina un módulo llamado "aplicación" que contendrá el controlador junto con la funcionalidad del controlador.
2. Cree un controlador con el nombre "HelloWorldCtrl". Este controlador se utilizará para tener una funcionalidad que muestre un mensaje "Hola mundo".
3. El objeto de alcance se utiliza para pasar información desde el controlador a la vista. Entonces, en nuestro caso, el objeto de alcance se usará para contener una variable llamada "mensaje".
4. 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.

<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta chrset="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="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<script src="app.js"></script>

</body>
</html>

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

Salida:

Resum

• La responsabilidad principal del controlador es crear un objeto de alcance que a su vez 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. Normalmente, esta es una práctica recomendada al crear aplicaciones web.