Angular js para principiantes

 
 

imagen angular js

 

En este articulo hablamos de Angular JS, la primera version de este popular framework.

Empezamos un tutorial de AngularJS para principiantes. En este caso vamos a fijarnos en la versión 1.
Últimamente veo bastantes proyectos que están hablando del tema y por eso me he decidido a escribir un pequeño artículo para principiantes que quieran aprender AngularJS

Dicho esto, adicionalmente podéis leer el artículo cómo programar un servidor web con Node JS donde se trata de manera muy breve (con un ejemplo) el framework Node JS, que es un framework de Javascript en el lado del servidor.
Sin embargo AngularJS se ejecuta en el lado cliente (en el navegador).

Lo podemos definir como un framework de desarrollo Javascript para generar contenido web dinámico en la parte del front-end.
Nos podemos olvidar (de momento) de la parte del back-end, con sus tecnologías habituales: Java, PHP, o las más nuevas como Rails, Django, etc...
Hay que comentar que el gran Google está detrás de este framework, y se encarga de su mantenimiento.

Uno de los requisitos básicos para empezar con Angular JS es tener conocimientos de HTML, CSS y Javascript, dado que se trata de un framework que utiliza estos lenguajes.

Es una tecnología que se puede complementar bien con jQuery (librería Javascript), bootstrap y JSON (formato para el intercambio de datos), así que tampoco está de más tener conocimientos de ellos.

Cuales son los elementos principales de Angular JS?

Este framework utiliza el patrón MVC (Modelo, Vista, Controlador)
Lleva parte del desarrollo que se implementa habitualmente en el back-end al front-end, por ejemplo el controlador En concreto, y de modo bastante genérico diremos que usa los siguientes elementos principales:

  1.  "directivas", que son atributos adicionales que se añaden a los tags HTML, hacen referencia a funciones o código Javascript. Disparan el comportamiento de la aplicación. Por ejemplo la directiva ng-show permite mostrar un elemento (un div pej.) en función de si una expresión es verdadera o falsa.

  2.  "expresiones", que se usan para insertar contenido dinámico de las variables dentro de los tags HTML. Por ejemplo <b>{{ 10 - 2}}</b>  se muestra en el navegador como 8. Las variables dentro de las llaves dobles toman los valores de las variables de Javascript o de un contenido JSON (estático o dinámico).

  3.  "módulos", que son los diferentes componentes (paquetes, librerías) de Javascript que sirven para separar el código, y que se pueden referenciar entre ellos. Es una manera eficiente y fácil de mantener luego el código de la aplicación.

  4.  "controladores" que son los componentes donde se define el comportamiento de la aplicación mediante la definición de funciones y la asignación y tratamiento de las variables. Se incrustan en los tags HTML, y son invocados cuando se muestran esos tags HTML.


Existen además otros componentes que permiten dar formato a los datos, como los "filtros".
Por ejemplo "currency" que sirve para dar formato a los precios.


Para empezar con Angular JS tenemos varias opciones, la primera es descargarnos la librería javascript que podemos encontrar en http://angularjs.org.
Con la versión angular.min.js (que se deberá incluir en el fichero html con la etiqueta <script>) tendremos lo básico para desarrollar.

La segunda opción es hacer referencia al CDN de Google dentro del fichero html de este modo:

	 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js" ></script>
	


La tercera opción es utilizar el gestor de paquetes npm para instalarlo dentro de un entorno local con node js de este modo:


npm install angular@1.5.5
	

A continuación mostraremos un ejemplo básico con un html, y un fichero app.js.
Podemos desarrollar un típico ejemplo con "Hola Mundo", usando un controlador que llamaremos MiControlador, una estructura JSON con la variable mensaje y color y una directiva ng-show.

Recuerda que puedes poner el código de app.js dentro de la misma html entre las etiquetas <script> y </script>

Se puede cambiar el resultado cambiando el valor de la variable mensaje, el tipo o el color en la estructura datos del fichero app.js.

Si estás interesado en aprender a programar en AngularJS, te recomendamos uno de los mejores cursos en oferta de programación de AngularJS



(function () {
	var app = angular.module('tutorial', []); 
	app.controller('MiControlador', (){ 
		this.cabecera = datos; 
	}); 
	var datos = { "mensaje" : "Hola Mundo!" , "tipo" : 1 , "color" : "red" }; 
})();

<!DOCTYPE html>
<html ng-app="tutorial">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="MiControlador as control">
<div>
<h1 style=" color: {{control.cabecera.color}} " ng-show="control.cabecera.tipo == 1">{{ control.cabecera.mensaje }}</h1>
</div>
</body>
</html>

 

 

javascript

 

 

Comentarios

Deja un comentario