Controller as sintaxis en AngularJS
Presentaremos la sintaxis controller as en AngularJS con ejemplos.
Sintaxis Controller as en AngularJS
En la versión 1.1.5 de AngularJS, se introdujo la sintaxis Controller as. Tiene un impacto significativo en la forma en que pensamos acerca de AngularJS.
Esto se agregó como una característica experimental. Esta es una característica esencial y nos ayuda a usar las funciones del controlador de forma más rápida y sencilla.
Podemos usar la sintaxis controller as para llamar al controlador y acceder directamente al controlador. Veamos un ejemplo y creemos un nuevo controlador con una función simple para imprimir un nombre.
Vamos a crear un nuevo proyecto en AngularJS y veamos un ejemplo de sintaxis de controller as. En primer lugar, agregaremos la biblioteca AngularJS usando etiquetas script.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
Ahora definiremos la aplicación AngularJS usando ng-app.
<body ng-app="">
...
</body>
Crearemos un archivo script.js y crearemos un controlador. Este controlador tendrá una función getName que iniciará sesión en la consola, como se muestra a continuación.
import angular from 'angular';
angular.module('app', []).controller('nameController', function() {
this.getName = function(){
console.log("Activated!")
}
});
Crearemos la interfaz para nuestra aplicación en index.html. Como se muestra a continuación, crearemos un botón que llamará a la función getName cada vez que un usuario haga clic en él.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
</head>
<body ng-app="app" ng-cloak>
<div ng-controller="nameController as name">
<input type="button" value="Get Name" ng-click="name.getName()">
</div>
</body>
</html>
Producción:
Salida de la consola:
El ejemplo anterior muestra la sintaxis de controller as, lo que nos facilita llamar a la función y recordar el nombre del controlador como una palabra clave o una palabra corta que se puede escribir fácilmente.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn