Proyecto web y
móvil con
AngularJS y
Cordova. De
parguela a
parguela
Jon Oyanguren López
AngularJS de parguela a parguela
1
Qué se va a aprender
En este curso se aprenderán los conceptos básico de AngularJS. Se realizará una aplicación demostrativa paso a paso durante el curso.
Se creará una aplicación desde cero y completa paso a paso.
Cosas que necesitas
Editor de texto plano. En el curso se utilizará WebStorm. Conocimientos de HTML5 y CSS3
Conocimientos de Javascript
Para quien es este curso
Para todos aquellos que quieran empezar a utilizar AngularJS no es necesario ser un experto en esta tecnología. De hecho este curso se va a realizar desde 0, viendo todos los pasos necesarios para empezar.
2
Tabla de contenido
Qué se va a aprender ... 1
Cosas que necesitas ... 1
Para quien es este curso ... 1
¿Qué es AngularJS? ... 3
Ventajas de usar AngularJS ... 3
¿Por dónde empiezo?... 3
Instalar AngularJS ... 5
La aplicación angular ... 5
Rutas, rutas y más rutas ... 6
El patrón Modelo Vista Controlador de AngularJS ... 8
Nuestro primer controlador ... 8
$scope, ese gran amigo ... 9
Empieza el jaleo ... 10
Anatomía de la aplicación ... 10
Pero yo lo quiero en el móvil ... 11
Cordova ... 11
Instalar y crear una aplicación con Cordova ... 11
3
¿Qué es AngularJS?
AngularJS es Javascript. Es un proyecto de código abierto, realizado en Javascript que contiene un conjunto de librerías útiles para el desarrollo de aplicaciones web y propone una serie de patrones de diseño para llevarlas a cabo.
Lo que toda la vida se ha llamado Framework. Contiene muchas librerías y herramientas pre-cocinadas para el desarrollo de toda la parte front-end de una aplicación web.
Ventajas de usar AngularJS
Utiliza el patrón MVC (Modelo Vista Controlador). Permite incluir testing muy fácilmente.
Millones de librerías útiles, que luego sirven en la vida real, más allá de la teoría. Llamadas a una API REST sencillas.
Apoyo de compañías gordas (Google). Documentación muy buena.
¿Por dónde empiezo?
Esta pregunta tiene muy fácil solución. Por crear una carpeta ordenada. En este curso vamos a utilizar el editor de texto WebStorm, pero vamos, no vamos a tocar nada más que archivos y carpetas así que cualquier texto plano es recomendable (Notepad++, Sublime,….).
Lo primero es lo primero, y vamos a crear una carpeta con nuestro nombre del proyecto, como por ejemplo “AngularJSParguelas”. Muy importante el orden, quiero esta carpeta como los chorros del oro. Hay una forma de crear un proyecto HTML5 fácil sencillo y para toda la familia. Entrad en
4
5
Bien, pues vamos a crear una carpeta nueva que llamaremos “AngularAPP” y dentro meteremos esto:
Ya iremos viendo qué vamos metiendo en cada carpeta y para qué sirve cada una. Pues ya tenemos nuestro proyecto creado. Tampoco era tan difícil ¿e?
Instalar AngularJS
Puedes descargarte el archivo javascript y referenciarlo en el index.html. Pero teniendo el CDN pues vamos a usar esto.
Añadimos al final de nuestro body el siguiente script. Para copiar y pegar, no os quejéis.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Se comenta por el barrio que meter todos los scripts al final de la etiqueta body (pero dentro) acelera mucho la carga de la página.
La aplicación angular
AngularJS va un poco a su rollo y necesita crear una aplicación para todas sus cositas. Digamos que tenemos que decir dónde va a participar AngularJS en nuestra aplicación web. En nuestro caso vamos a utilizar Angular desde la misma etiqueta body, pero podemos crear la app angular desde cualquier etiqueta hija de body.
Para ello vamos a tener que utilizar la directiva ng-app en la etiqueta body:
<body ng-app="angularApp">
Vale, ya tenemos escrito desde dónde tiene que empezar a montar AngularJS su estructura. Ahora hay que crear esa estructura. Para todos los temas de configuración y creación de la apliación angular hemos creado previamente el archivo “app.js”. Antes que nada vamos a incluirlo en nuestro “index.html”.
<script src="AngularAPP/app.js"></script>
6
Ahora ya podemos crear la app de angular en el código.
var demoApp = angular.module('angularApp', []);
Guardamos la app en una variable (demoApp) global para luego poder utilizarla en el resto de nuestro proyecto web. Si os fijáis bien hemos tenido que especificar el nombre que hemos puesto antes en la etiqueta “body”. Aquí no salen las cosas por que sí.
Rutas, rutas y más rutas
Una de las cosas que más me gustan de este framework es el enrutamiento. Con solo una línea de código vamos a poder dirigir nuestro proyecto web a la dirección que queramos. Ahora veremos cómo.
Lo primero es lo primero. Para todo el tema del enrutamiento, Angular depende de una librería propia suya llamada “angular-route.js” para instalarla vamos a hacer lo mismo que cuando instalamos angular. Tendríamos una cosa del estilo:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script> <script src="AngularAPP/app.js"></script>
Lo Segundo que habría que hacer es empezar a utilizer el enrutamiento. Para ello tenemos que seguir rellenando el archivo “app.js”.
var demoApp = angular.module('angularApp', ['ngRoute']); demoApp.config(['$routeProvider', function ($routeProvider) { $routeProvider
.when('/', { templateUrl: 'AngularApp/Templates/start.html' })
.when('/usuarios', { templateUrl: 'AngularApp/Templates/usuarios.html' }) .otherwise({ redirectTo: '/' });
}]);
Con esto habríamos hecho 3 cosas:
Incluir la dependencia ‘ng-route’. Los caracteres ‘-‘ en angular no existen dentro del javascript (sí dentro del html) por lo que para referenciar a ng-route tenemos que escribir ngRoute.
Crear la configuración del proyecto. Utilizar el enrutamiento.
El routerProvider se puede leer así. “Cuando en la url venga ‘/’ me vas a cargar la plantilla ‘start.html’ (especificándole la ruta).
7
NAVBAR
CONTENIDO Y ya por último. ¿Dónde se va a cargar esa plantilla? Todavía no se lo hemos especificado.
Vamos a ver qué html tenemos.
Nosotros vamos a querer que la navbar sea siempre la misma y que lo que vaya cambiando sea el contenido de la página.
Pues tal y como tenemos la plantilla voy a borrar las capas “container” y “jumbotron”.
Ahora viene la magia (y esto entra para el examen). Vamos a decirle a angular dónde cargar las plantillas. Sencillamente con la directiva ng-view. Tal que así:
<div class="main" ng-view></div>
Ahora, todas las plantillas que vayamos creando se meterán ahí. Vamos a crear la primera. Si vemos el archivo “app.js” nada más entrar en la web cargaríamos la plantilla ‘AngularApp/Templates/start.html’. Pues vamos a crear el susodicho archivo.
Dentro vamos a copiar solamente esto, a ver si funciona.
8
A mí me va como un tiro.
Sobre enrutamiento un apunte más.
A la hora de indicar el atributo “href” en los enlaces para indicarle que utilice el enrutamiento sería así:
<a href=”#/usuarios”>Usuarios</a>
De otra forma iría a buscar el archivo “usuarios.html” que no existe en la raíz del proyecto.
DEBERES: Crear un par de páginas más y enlazarlas con el menú. Ver si todo funciona correctamente.
El patrón Modelo Vista Controlador de AngularJS
Breve resumen del MVC que tiene AngularJS, ya veremos luego más cuando según nos vayamos pegando con cosas prácticas.
[Tal cual de la Wikipedia] El modelo–vista–controlador (MVC) es un patrón de arquitectura de
software que separa los datos y la lógica de negocio (Modelo) de una aplicación de la interfaz de usuario (Vista) y el módulo encargado de gestionar los eventos y las comunicaciones (Controlador).
Donde nosotros tendríamos:
Modelo -> El $scope (ya veremos más adelante qué es). Vista -> Todos los htmls creados.
Controlador -> Cada vista html va a tener asociado un controlador javascript.
Este patrón además de separar estos tres conceptos importantes nos obliga a tener un código ordenado donde cada parte tiene solamente unas funciones. Esto es muy importante.
Nuestro primer controlador
Yo voy a seguir con mi archivo de “start.html” que lo he creado pero no tengo controlador asociado. Supongo que os habréis dado cuenta de que los controladores van a ir dentro de la carpeta “Controllers”.
9
Norma: Los controladores se van a llamar igual que el html seguido de la palabra “Controller”. En este caso, vamos a crear un archivo javascript llamado “startController.js”.
Lo que acabamos de crear es un archivo vacío, y no es nada más que un javascript pobre. Menos mal que con estas líneas de código le vamos a hacer todo un hombre:
demoApp.controller('startController', ['$scope', function ($scope) { //Aquí irá todo el código que queramos ejecutar
}]);
En esta sencilla línea de código ya especificamos a este archivo como un controlador de angular. Nos falta enlazarlo con el html. Para ello vamos a especificar en una etiqueta de la plantilla start.html cuál es su controlador mediante la directiva ng-controller.
Dentro del archivo start.html escribimos esto:
<div ng-controller="startController"> <h2>Index</h2>
</div>
No hará falta decir que el nombre dentro de la directiva es el nombre del controlador.
¡Solo nos falta una cosa! Referenciar el archivo en el start.html, y no el de la plantilla, el archivo principal. Debajo de los scripts.
<!--Controllers-->
<script src="AngularAPP/Controllers/startController.js"></script>
¡Ala! Ya tenemos nuestro controlador listo para usar.
El controlador sigue siendo un archivo javascript, así que podemos utilizar cualquier función dentro de este archivo.
demoApp.controller('startController', ['$scope', function ($scope) { var saludo = "Hola equipo";
alert(saludo); }]);
¡Y al que no le funcione es un parguela!
$scope, ese gran amigo
El $scope es un objeto especial que tiene angular, y que nos va a dar la vida en la mayoría de los casos. Esta variable está enlazada con el html. Y no podemos explicar el $scope sin explicar el concepto de “two data way binding”.
10
Este concepto es bastante novedoso y consiste en la sincronización de la vista con el modelo automáticamente. Lo vemos mejor con un ejemplo.
En nuestro indexController creamos una variable con un nombre.
$scope.nombre = "Jon Oyanguren";
Y en nuestro start.html vamos a sincronizar esta variable y de dos formas:
<p>{{ nombre }}</p>
<input type="text" ng-model="nombre"/>
La primera y mediante las {{ }} (dobles llaves) simplemente escribimos el valor de la variable nombre del $scope en el html.
En la segunda forma, vinculamos un input de tipo texto a dicha variable mediante la directiva ng-model de esta forma, si cambiamos el input, se sincroniza directamente con la variable.
Como conclusión, podemos decir que el $scope es un objeto que vamos a poder utilizar tanto en los controladores como en la vista.
Empieza el jaleo
Bueno, siempre he dicho que a saltar se aprende saltando (con todas las hostias que conlleva). Así que vamos a empezar a saltar y a hacer una aplicación de verdad. Una aplicación web que lo va a petar por todo lo alto, que va a ser más descargada que el Candy Crush y el Flappy Bird juntos.
Sí, estoy hablando de la aplicación de PURETISMOS. ¿Qué es un puretismo?
Un puretismo es algo que si no lo entiendes quiere decir que todavía eres joven.
“¿Pero qué te crees, que soy Brabender?”. Si no has entendido esto todavía eres joven, pero si te estás partiendo la caja ahora mismo, no hay duda, tienes ya una avanzada edad.
Anatomía de la aplicación
Vamos a pensar qué va a tener nuestra aplicación. Lo básico. Se abre y aparece en la pantalla un puretismo aleatorio. Si clickas en la pantalla se pone otro aleatorio.
11
Pero yo lo quiero en el móvil
Seguro que alguno ya se ha quejado “jode, yo quiero eso en el móvil”. Venga, pues para que se calle, vamos a utilizar la misma tecnología que hemos visto hasta ahora para crear una app móvil
multiplataforma.
Para esto hay que ver un par de cositas más. Va a ser rapidito y sin dolor.
Cordova
Cordova es una plataforma que permite crear aplicaciones nativas de móvil utilizando tecnologías HTML, CSS y Javascript (en nuestro caso con AngularJS).
La palabra “nativas” se refiere a que mediante estas tecnologías vamos a poder acceder a cosas del propio teléfono como la cámara, el acelerómetro, el dispositivo, etc.
Tal cual, con esto ya vale.
Instalar y crear una aplicación con Cordova
No me quiero enrollar mucho con este tema ya que la documentación está muy muy muy bien. Es de tener en cuenta que es necesario tener instalado nodejs.
Una vez instalado todo esto podemos crear un proyecto con la consola de la siguiente forma
$ cordova create puretismos
$ cd puretismos
$ cordova platform add ios $ cordova platform add android
Y hasta aquí nos vale, ya tendremos nuestro Proyecto creado. El tema de compilaciones y demás lo vamos a ver cuándo se presente la ocasión.
12
Cordova y AngularJS ¿Se llevan bien?
¡Y tanto que se llevan bien! Son amigüitos de los que no se enfadan por tonterías y pueden convivir juntos en la misma casa.
DEBERES: Repetir el proceso de creación de una app AngularJS que hemos visto antes pero ahora en este proyecto de cordova.
