martes, 30 de abril de 2019

AngularJS: Directivas y expresiones

En este post hablaremos de directivas en AngularJS. Pero antes que nada debemos instalar un sencillo y muy útil servidor:


$ npm install -g http-server 

Para ponerlo activo tecleamos desde una terminal:
$ http-server carpetaProyecto/

Abrimos nuestro navegador en http://localhost:8080/ para cerrar tecleamos en la terminal Ctrl + C.

Como vimos en el anterior post AngularJS posee etiquetas especiales llamadas directivas.Éstas directivas son atributos que se agregan a los elementos HTML, por lo regular comienzan con ng-.

Directivas comunes:

  • ng-app: para especificar una aplicación.
  • ng-controller: para especificar un controlador.
  • ng-model: asocia el valor de una variable con el elemento HTML.
  • ng-click: para soltar o ejecutar un evento.
  • ng-bind: para enlazar un valor del scope con un elemento HTML sin necesidad de {{ }}

Ejemplo. Creamos un módulo y un controlador.

app.js
/*Módulo 'miApp'*/
var app = angular.module('miApp', []);

/*Controlador 'miControlador'*/
app.controller('miControlador', function($scope) {});

En HTML:

view.html

<!-- Definimos la app -->
<html ng-app='miApp'>

<!-- Definimos el controlador -->
<body ng-controller='miControlador'>
   <!-- contenido -->
</body>

¿Cómo defino las expresiones?
Existen dos formas para definir una expresión.

 Primera forma:
{{ expresion }}
Segunda forma:
ng-bind="expresion".

Ejemplo. Algunas expresiones:
{{ 34 + 32 }}

{{ cadena }}

{{ edad>18? "Eres mayor de edad" : "Eres menor de edad" }}

Ejemplo. Una página simple usando AngularJS.
<html ng-app="miApp">

<script src="js/angular.min.js"></script>


<body ng-controller="miControlador">
<h1>{{ titulo }}</h1>

<script>
/*Módulo 'miApp'*/
var app = angular.module('miApp', []);

/*Controlador 'miControlador'*/
app.controller('miControlador', function($scope) {
 
 //$scope es la variable principal
 $scope.titulo ="Codemonkey Junior";

});

</script>

</body>
</html>

Es todo por hoy.

No hay comentarios:

Publicar un comentario

Vibe Coding (la programación vía IA): ¿el futuro de la programación?

Vibe Coding es un nuevo paradigma de programación, una nueva forma de crear código. Es un enfoque emergente en el desarrollo de sof...

Etiquetas

Archivo del blog