Angular JS: Creando una aplicación desde cero

Muchas veces cuando se comienza a utilizar AngularJS, sucede que uno no se acuerda cómo se utiliza correctamente a la hora de empezar un proyecto de cero, o bien, no se sabe como se configura de manera básica para poder iniciar, y es por eso que en este post se va a tratar puntualmente el cómo empezar una aplicación o un desarrollo desde cero con AngularJS.

Antes de profundizar en el tema, es necesario mencionar que existe un video tutorial de como se utiliza AngularJS y que también posee ejemplos que ayudan a reforzar los conocimientos. Este curso esta disponible en la pagina de Code School y se llama Shaping with AngularJS (el mismo, hasta el momento, solo se encuentra disponible en inglés)En este curso se ven las nociones básicas de su uso y se ejemplifican muchos de los conceptos para que sean más gráficos y ayuden a la comprensión.

¿Por dónde empezar?

AngularJS es un framework de lenguaje Javascript, y como tál, este no se compila, sino que los errores se dan en tiempo de ejecución, y es por esto que es complicado darse cuenta que esta mal, o que le falta a la aplicacion desarrollada en AngularJS para que funcione bien.

Es fácil perderse de como empezar puesto se requieren 2 cosas fundamentales para que funcione correctamente, y es acá cuando muchos se olvidan de realizar este segundo paso y dicen “Esto no me funciona”. Por eso es importante tener presente que no solo alcanza con crear la aplicación javascript con AngularJS, sino que también, es necesario agregar las directivas correspondientes en el HTML. Veamos mas desatalladamente estos 2 pasos mencionados anteriormente:

  • Paso 1

Creamos un archivo javascript el cual contendrá el core de la aplicación en AngularJS. Este puede tomar el nombre que más deseen, no tiene porque llamarse igual que la aplicación pero en general tiende a llamarse app.js

Dentro de app.js (que creamos recién) agregamos lo siguiente:

Lo que se logra con la utilizacion de los closure de funciones como el que aparece en el siguiente ejemplo:

es lograr encapsular toda la funcionalidad que se quiere en un solo método o funcion que tendra su propio scope teniendo asi, la tranquilidad de que ningun otro archivo javascript pueda modificar o acceder a algun atributo o funcionalidad que debe, asi como tambien, tener la certeza de que ningun otro javascript con una definicion de variables o funciones similares a las nuestras no entren en conflicto, que es lo que pasa muchas veces cuando se utilizan dependencias o plugins de terceros que no responden a las buenas prácticas en la codificacion en javascript. La ventaja de utilizar los módulos propios de angular y de los desarrollos de la comunidad de AngularJS es que todos estan programados con los closures de funciones evitando todo tipo de conflictos.

Tambien, a destacar, son los ultimos dos parentecis que aparecen al final de la funcion, los cuales sirven para autoinvocarse o autollamarse a penas se ejecuta el código. Esto es importante ya que no se utiliza ningun tipo de nombre de funcion o variable para denotar al mismo, y eso as asi puesto que al inyectarse el archivo javascript como tag en el HTML, que en este caso es app.js se ejecuta automaticamente teniendo conocimiento de la misma en toda la ejecucion.

Lo referido a la dependencia $scope y su utilización se describirá en posts siguientes puesto que es un tema bastante grande como para abordar en este post volviendolo bastante difuso y borroso, imposibilitando sacar una idea y un objetivo claro.

Lo descripto hasta el momento es lo básico que se necesita para tener una aplicación desarrollada con AngularJS, pero esto no es suficiente para que funcione en un navegador ya que todavía falta el binding de la misma. Lo que viene a continuación es el segundo paso, que en innumerables ocaciones, es el que nos olvidamos de realizar cuando empezamos el desarrollo.

Para hacer que el HTML “entienda” a AngularJS es necesario realizar 2 pasos. Primero, antes que nada, hay que agregar el tag de script del framework, ya que sin este, el HTML no tomaría conocimiento de las directivas necesarias para que la aplicación funcione. Esto se realiza agregando el tag correspondiente (ya sea al final del body o bien dentro de los tag de head) dentro del index de la aplicación:

Existen cuestiones inherentes al temas de la carga de la pagina o aplicación que hacen que sea una buena practica agregarlo dentro del body ya que frente a cualquier error que pueda sufrir la aplicación a la hora de cargar el framework este no rompa el diseño de la misma.

Como se observa, la ruta especifica una carpeta llamada bower_components. Esta carpeta es auto generada luego de instalar el gestor de dependencias javascript conocido como Bower. Este maravilloso framework es sumamente útil ya que nos permite gestionar todos los plugins, frameworks y librerías necesarias para el desarrollo de una aplicación javascript, centralizando así, la instalación y actualización de las mismas. Para más información de como instalar Bower pueden visitar el post “AngularJS: La facilidad del desarrollo web” donde se explica brevemente como utilizar bower para AngularJS o bien, puede visitar la página oficial de la librería.

  • Paso 2

Luego de haber agregado este tag solo queda realizar el binding con la aplicación AngularJS y para esto tenemos que agregar 2 directivas que en este caso van a ir dentro del index.html, u otra página de inicio que tengamos definida que el webserver reconocerá como inicial.

Las directivas a agregar son las siguientes:

ng-app

Esta directiva se debe agregar en el tag html del index.html ya es que la encargada de realizar el binding de la aplicación AngularJS con el HTML dándole conocimiento de que existe una aplicación Angular y es esta la que va a controlar todo el HTML que este dentro. Anteriormente dentro del archivo app.js, se declaró un módulo de angular llamado “WebApp” y este es el que vendría a ser el nombre de la aplicación y es el que va a utilizarse como valor de la directiva ng-app. Para esto agregamos en el tag html de la pagina la directiva ng-app quedando lo siguiente:

Con este tag ya se puede decir que tenemos una aplicación desarrollada en Angular y que el HTML lo entiende. Ahora bien, con esto solo no basta puesto que lo próximo que se desarrolle en AngularJS no va a surtir efecto en el HTML ya que no existe un controlador especificado en el HTML que le de el comportamiento al mismo.

ng-controller

Para esto esta la segunda directiva que mencionamos anteriormente como requisito que se llama ng-controller. Esta directiva no esta fuertemente declarada como para que vaya en un tag único y especifico, pero es buena practica añadir esta directiva en el tag del body por diferentes cuestiones, que entre la mas importante se destaca que al estar en un nivel alto de jerarquía dentro del HTML se puede acceder al controlador desde niveles mas profundos del árbol de tags, y esto se puede hacer fácilmente con un alias que vamos a ver a continuación.

Como se definió un controlador en AngularJS anteriormente dentro del archivo app.js, el cual llamamos “WebController”, este será el que se va a utilizar dentro de la directiva de ng-controller. Entonces se puede concluir en agregar lo siguiente dentro del HTML:

Gracias a esta directiva ahora la aplicación web se puede agregar comportamiento dentro del controlador definido en el archivo app.js y la página o aplicación responderá frente a este comportamiento definido. También cabe mencionar que dentro de la directiva se define un “alias” del controlador para acceder a funcionalidades definidas dentro del mismo sin tener que escribir todo el nombre del controlador en caso de utilizar nombres muy largos y engorrosos, gracias a esto el codigo se vuelve mas lejible y entendible por cualquier persona que tiene que leer el HTML

Luego de haber definido el controlador dentro del HTML vamos a agregar un tag h1 que contener el mensaje programado en AngularJS para verificar efectivamente que la aplicación desarrollada en Angular esta bien inyectada y que tiene conocimiento del controlador. Para esto agregamos el tag h1 dentro del body de la forma siguiente:

{{holaMundo}}

Luego de haber realizado lo anterior y previamente guardado debería visualizarse en el navegador

Hola Mundo!

Con esto se verifica que todo este correctamente escrito y bien ubicado, teniendo así una aplicación desarrollada en AngularJS correctamente definida y con el binding correcto.

Existen muchas otras características o cualidades que se pueden agregar tanto al modulo de la aplicación que llamamos “WebApp” como configuraciones de dependencias y configuraciones de ejecución, como así también, especificar características y cualidades propias de los controladores. Ya que este post esta dedicado a empezar una aplicación desde cero con AngularJS no se va a hacer mucho hincapié en esos temas ya que no son el propósito del mismo, sino ayudar a empezar desde el inicio sin mucho trabajo.

Para mas información de AngularJS pueden revisar la documentación propia del framework.

You may also like...

2 Responses

  1. luis dice:

    Una consulta, estoy tratando de hacer o siguiente
    en mi html si muestro los valores de $scope.valor estos se muestran bien pero en js si evaluo esto siempre entra en el else y si imprimo en colsole valor1 me arroja undefined , pero sin envargo en mi vista si lo mustra
    $scope.valor = data;
    if($scope.valor.valor1 == “ok”){

    }else{
    }

    • Teraswap Teraswap dice:

      Dos aclaraciones Luis:

      1) tene en cuenta el tema del operador ternario del === que hace que evalua que $scope.valor.valor1 sea del tipo string y que su valor sea “ok”, cosa que puede que no este viniendo como string

      2) Si yo copio y pego tu codigo y lo ejecuto tiene un error de sintaxis por las comillas del “ok” por el cual comparas.

      Te dejo esta porción de codigo que a mi me funcionó, y creo que te puede ayudar. Aclaro que este ejemplo esta adaptado a la cantidad de informacion que brindaste puesto no se de donde sale data, si es de un servicio o populado de algun lado.


      var data = { valor1 : "ok" };
      $scope.valor = data;
      $scope.valor.valor1 === "ok" ? alert("if") : alert("else");

      Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *