25 DE ABRIL DE 2016

ANGULAR JS DE 0 A 100
INSTALACIN DE ANGULAR JS
MSC. NORMAN ARAUZ
NORMAN SALVADOR ARUZ LPEZ
UNAN MANAGUA, FAREM MATAGALPA

Introduccin
En el siguiente tutorial aprenderemos como instalar Angular JS desde la pgina principal del
proyecto de Google (https://angularjs.org/) con esta direccin web podremos ingresar a la web
principal del proyecto para descargar repositorios, aprender con los manuales y videos en lnea
adems de la documentacin.

Antes de iniciar a decodificar las caractersticas de nuestro Frameworks necesitamos primero

conocer algunas herramientas de desarrollo.
Herramientas de desarrollo con Angular JS
Para iniciarte en el mundo de aplicaciones de Angular JS necesitaras solamente de dos
elementos bsicos un editor de cdigo y un navegador. El editor de cdigo puede ser un
programa de tu preferencia como Adobe Dream Weaver, Sublime Text o bien Adobe brackets.
El navegador puede ser Google Chrome o Mozilla Firefox de preferencia. En este tutorial
haremos uso de Adobe brackets como editor de cdigo, para descargarlo podemos ir
directamente a la pgina brackets.io y nos aparecer el botn de descarga directa el cual es
totalmente gratuito:

Pongamos atencin en el botn de color celeste que indica la descarga, el programa se va

actualizando continuamente por lo cual es recomendable bajarlo directamente desde el enlace
proporcionado.
Ahora damos click y a continuacin comenzar la
descarga de nuestro editor de cdigo. En seguida
iniciamos la instalacin como en cualquier aplicacin
Windows seguimos el asistente.
Esta herramienta es gratuita y multiplataforma.
El siguiente elemento es el navegador en cuyo caso utilizaremos Google Chrome que es sper
compatible y popular en el mercado, adems que se integra muy bien con las aplicaciones
angular.
Lo
podemos
encontrar
en
la
siguiente
direccin:
https://www.google.es/chrome/browser/desktop/

Igualmente notemos que hay un botn para descargar donde

daremos click y a continuacin aparecer una ventana con las
opciones de descarga, luego de lo cual daremos aceptar e
instalar.

Igualmente podemos utilizar Mozilla Firefox o el navegador Opera, si queremos omitir este
paso, lo anterior es para efectos de llevar a cabo el tutorial. Otra de las razones por la que hemos
elegido este navegador es por la cantidad de plug-ins que se le pueden agregar para desarrollo
web, lo que permite una gama completa o entorno de desarrollo que aporta gran flexibilidad a
la hora de desarrollar aplicaciones web.
Ahora veremos estas dos herramientas en accin, lo primero ser abrir un documento en
brackets, en este editor se pueden manipular documentos HTML, CSS o JavaScript.
Dentro del editor
Para efectos del curso es interesante notar que utilizaremos la sintaxis bsica de HTML, para
ello tomemos en cuenta la estructura del siguiente documento:

Lo dems es cdigo
html

Cdigo de angular ir
aqu

Los scripts de Angular estn diseados de tal manera que sean simplificados para utilizacin en
entorno web, por lo que un script de Angular no es igual que un script de javascript puro en
cuanto a complejidad.

Ahora veremos la pgina que estamos visualizando en brackets, pero dentro de google Chrome:

Vamos a probar una de las herramientas ms tiles de

este navegador, que es la herramienta de depuracin,
solo necesitamos pinchar en cualquier parte del
documento, click derecho y seleccionamos
Inspeccionar elemento:
Luego veremos que nuestro documento en google
Chrome aparece separada la parte de la vista y las
propiedades actuales de nuestro html, esto es de
mucha utilidad puesto que java script genera por lo
regular errores silenciosos lo cual significa que sin
esta herramienta no es posible darnos cuenta si algo
sale mal con nuestro cdigo html, js, o css.

Regresamos al documento en brackets y vamos a incluir una expresin que prcticamente es

un error generado en java script, luego de agregar la lnea que veremos a continuacin
guardamos el documento y refrescamos al navegador para recargar la pgina.

Lnea para que aparezca

el error

Recargamos la pgina y nos

vamos a la pestaa consola,
donde podremos apreciar que
aparece el error que hemos
agregado
de
manera
intencional para mostrar el uso
de la herramienta.

De esta manera es que

podremos ir visualizando uno
a uno los errores que pudieran
generarse
en
nuestros
documentos java script.
Adems de eso podemos notar
que se indica el nmero de
lnea donde est el erro que
hemos incluido.
Google Chrome te dir cul es
el error y cul es la lnea
especfica para que lo corrijas,
de esta manera ya tenemos lo necesario para desarrollar aplicaciones en Angular Js.

Instalacin de Angular JS
Vamos a proceder a instalar Angular JS en un documento utilizando brackets para ello vamos
al editor y crearemos la siguiente estructura HTML bsica para iniciar:

Para instalar Angular, lo primero que haremos ser instalar el cdigo fuente del mismo, para
ello tengamos en cuenta la direccin mencionada en el apartado anterior:
(https://angularjs.org/)

Click en esta
opcin de
descarga

Utilizaremos la Opcin 1 para descargar y nos aparecern las siguientes opciones:

Las
primeras
opciones
(Branch) se refiere a la versin
ms actual y estable del
Frameworks, elegiremos en
este caso la versin estable, es
muy posible que cuando sigas
este tutorial encuentres una
versin ms avanzada.
Segundo vamos a encontrar
diferentes
versiones
para
descargar, la opcin Zip es muy
recomendable
cuando
trabajamos en proyectos sin
conexin, o bien cuando
estamos en una intranet que tenga un acceso restringido o no tenga del todo acceso a internet,
tambin tenemos la opcin uncompresed que proporciona el cdigo fuente propiamente con
comentarios, espacios en blanco, saltos de lnea y documentacin etc. Mientras que la versin
minimalista consiste en una versin con el comportamiento y omite las lneas que no son
indispensables para que el cdigo se pueda utilizar. Esta versin del Frameworks no contiene
ningn tipo de documentacin para que sea sencillo de leer, ni espacios en blanco. Es la opcin
correcta cuando estamos desarrollando una versin web para nuestra aplicacin y necesitamos
mayor eficiencia al ejecutar el cdigo, porque utilizamos el mnimo ancho de banda obteniendo
la mayor eficiencia posible. Recomiendo utilizar la versin minified siempre que sea posible.
Luego est la opcin CDN, las siglas de una distribucin de contenido, generalmente cuando
nuestra app est en lnea vamos a garantizar que nuestro usuario tenga acceso a internet y
podremos por tanto tener acceso a recursos alojados en otros servidores, en el caso de estos
distribuidores de contenido,
va a permitir que angular se
distribuya desde un servidor
cercano, gracias a que el
archivo no est alojado en
nuestro servidor lograremos
ahorrar ancho de banda cada
vez que nuestra app quiera
accesar a este archivo.
Tambin
es
una
recomendacin utilizar la
versin CDN. Para ello
copiaremos el enlace de la
opcin CDN y la pegaremos
en la barra de navegacin de
Google Chrome:

Lo que nos aparece es la versin minificada del framework que fue la que elegimos en la ventana
anterior, Todo lo que se ve es el cdigo fuente del framework.

Voy a seguir utilizando el mismo enlace en el documento html, regresamos a brackets y

agregamos las siguientes lneas de cdigo luego de la etiqueta <title>:

De esta manera hemos instalado en nuestra app la librera del framework. Cada vez que se
ejecute nuestra plantilla HTML, tambin se llamar al framework del angular que como vimos
se encuentra en esa direccin.
Finalmente para que angular pueda reconocer todos los elementos con los que va a trabajar
dentro de nuestro documento debemos agregarle un fragmento de cdigo que de ahora en
adelante identificar a nuestra pgina como una app angular, agregamos el siguiente fragmento
de cdigo:

De esta manera hemos terminado de agregar lo necesario para convertir nuestra pgina en una
app angular.