Primera aplicacion usando AngularJs

Luego de ver algunos conceptos básicos y de la filosofía de angular pasaremos a crear nuestra primera aplicación. Como comenté en el anterior artículo comenzar con angular es muy sencillo, el primer paso es tener un html con un esquema básico y en el que podamos referenciar la última versión del framework (al momento en el que escribo esto se encuentra en la versión 1.4.4)

<!DOCTYPE html>  
<html>  
<head>  
    <title>Our First Application With AngularJs</title>
</head>  
<body data-ng-app="marvelApp">

    <h1>{{appTitle}}</h1>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
    <script src="marvel.init.js"></script>
</body>  
</html>  

Pocas líneas de código y ya tenemos nuestra primera aplicación creada, vamos por partes, el esquema html es lo más simple posible no hay nada que detallar ahí. Veamos la etiqueta body, tenemos una directiva (luego explicaré en más detalle qué son y cómo funcionan) llamada ng-app, ésta directiva nos permite decirle a angular que parte del DOM identificará como una aplicación angular, a partir de acá toda la etiqueta body será usada por angular.
La directiva ng-app toma como valor un nombre, en este caso es marvelApp, pero puede ser cualquiera que se te ocurra, obviamente debe describir a tu aplicación, pero cualquier string es válido para angular.

Luego tenemos una etiqueta h1 que contiene una variable appTitle entre doble llaves. Esto es la forma como representas una variable en una plantilla de angular (en este caso la plantilla es el nuestro archivo index.html).

Pero ¿Cómo podemos asignarle un valor a esa variable? Excelente pregunta y para eso vamos a abrir el archivo marvel.init.js.

Dentro de este archivo podemos ver el código necesario para crear un módulo en angular:

(function () {

    'use strict';

    angular
        .module('marvelApp', [])
        .run(initializeApp);

    function initializeApp ($rootScope) {

        $rootScope.appTitle = 'Marvel Heroes';

    }

})();

Lo primero es llamar al método module de angular, éste método toma 2 parámetros, el primero es el nombre de nuestro módulo, que debe ser el mismo que creamos en nuestra directiva ng-app. El segundo parámetro debe ser un array con las dependencias de nuestro módulo, como es un módulo nuevo no tiene dependencias por lo tanto le enviamos un array vacío.

Luego tenemos el método run que es lo primero que se ejecutará apenas nuestro módulo sea creado, este método recibe como parámetro una función. En este caso le enviamos la función initializeApp. Luego creamos la función con la variable $rootScope, esta variable nos permitirá referenciar la variable appTitle que tenemos en nuestra vista.

Simplemente la agregamos como si fuera una propiedad de $rootScope y ya podemos ver ese valor reflejado en nuestro html. Si ejecutamos nuestro html podrémos ver que la etiqueta h1 muestra ahora el valor que le asignamos, en este caso es Marvel Heroes.
Y listo, ya tenemos nuestra primera aplicación con angular, puedes ver el demo aquí:

La proxima semana veremos como crear un controller y también haremos un request a un API real dónde podremos jugar con data y mostrarla en nuestra aplicación. Iré subiendo todo el código de este minicurso en el siguiente link para que puedas descargarlo y probarlo por ti mismo.

https://github.com/eperedo/marvel-app/tree/step-01

Además si tienes alguna pregunta, no dudes en hacerla en la sección de Issues

https://github.com/eperedo/marvel-app/issues

Recuerda que todos estos conceptos serán explicados en detalle en el curso de Creación de aplicaciones web con AngularJs creado por Abakio, la información de la inscripción la puedes encontrar en su web. Aprovecha el descuento de los primeros días hasta el 15 de setiembre.