2- Instalacion de Angular JS

8/15/2019 2- Instalacion de Angular JS

http://slidepdf.com/reader/full/2-instalacion-de-angular-js 1/10



Introducción

En el siguiente tutorial aprenderemos como instalar Angular JS desde la página principal del

proyecto de Google (https://angularjs.org/) con esta dirección web podremos ingresar a la web

principal del proyecto para descargar repositorios, aprender con los manuales y videos en línea

además de la documentación.

Antes de iniciar a decodificar las características 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 básicos un editor de código y un navegador. El editor de código 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 código, para descargarlo podemos ir

directamente a la página brackets.io y nos aparecerá el botón de descarga directa el cual estotalmente gratuito:



Pongamos atención en el botón de color celeste que indica la descarga, el programa se vaactualizando continuamente por lo cual es recomendable bajarlo directamente desde el enlace

proporcionado.

Ahora damos click y a continuación comenzará la

descarga de nuestro editor de código. En seguida

iniciamos la instalación como en cualquier aplicación

Windows seguimos el asistente.

Esta herramienta es gratuita y multiplataforma.

El siguiente elemento es el navegador en cuyo caso utilizaremos Google Chrome que es súper

compatible y popular en el mercado, además que se integra muy bien con las aplicacionesangular. Lo podemos encontrar en la siguiente dirección:

https://www.google.es/chrome/browser/desktop/



Igualmente notemos que hay un botón para descargar donde

daremos click y a continuación 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 hemoselegido 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 acción, 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 básica de HTML, para

ello tomemos en cuenta la estructura del siguiente documento:

Los scripts de Angular están diseñados de tal manera que sean simplificados para utilización en

entorno web, por lo que un script de Angular no es igual que un script de javascript puro en

cuanto a complejidad.

Código de angular iráaquí

Lo demás es cód

html



Ahora veremos la página que estamos visualizando en brackets, pero dentro de google Chrome:

Vamos a probar una de las herramientas más útiles de

este navegador, que es la herramienta de depuración,

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 sinesta herramienta no es posible darnos cuenta si algo

sale mal con nuestro código html, js, o css.



Regresamos al documento en brackets y vamos a incluir una expresión que prácticamente es

un error generado en java script, luego de agregar la línea que veremos a continuación

guardamos el documento y refrescamos al navegador para recargar la página.

Recargamos la página y nos

vamos a la pestaña 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.

Además de eso podemos notar

que se indica el número delínea donde está el erro que

hemos incluido.

Google Chrome te dirá cuál es

el error y cuál es la línea

específica para que lo corrijas,

de esta manera ya tenemos lo necesario para desarrollar aplicaciones en Angular Js.

Línea para que aparezca

el error



Instalación 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 básica para iniciar:

Para instalar Angular, lo primero que haremos será instalar el código fuente del mismo, para

ello tengamos en cuenta la dirección mencionada en el apartado anterior:

(https://angularjs.org/)

Click en esta

opción de

https://angularjs.org/






Utilizaremos la Opción 1 para descargar y nos aparecerán las siguientes opciones:

Las primeras opciones

(Branch) se refiere a la versión

más actual y estable del

Frameworks, elegiremos en

este caso la versión estable, esmuy posible que cuando sigas

este tutorial encuentres una

versión más avanzada.

Segundo vamos a encontrar

diferentes versiones para

descargar, la opción Zip es muy

recomendable cuando

trabajamos en proyectos sin

conexión, o bien cuando

estamos en una intranet que tenga un acceso restringido o no tenga del todo acceso a internet,también tenemos la opción uncompresed que proporciona el código fuente propiamente con

comentarios, espacios en blanco, saltos de línea y documentación etc. Mientras que la versión

minimalista consiste en una versión con el comportamiento y omite las líneas que no son

indispensables para que el código se pueda utilizar. Esta versión del Frameworks no contiene

ningún tipo de documentación para que sea sencillo de leer, ni espacios en blanco. Es la opción

correcta cuando estamos desarrollando una versión web para nuestra aplicación y necesitamos

mayor eficiencia al ejecutar el código, porque utilizamos el mínimo ancho de banda obteniendo

la mayor eficiencia posible. Recomiendo utilizar la versión minified siempre que sea posible.

Luego está la opción CDN, las siglas de una distribución de contenido, generalmente cuando

nuestra app está en línea 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.

También es una

recomendación utilizar la

versión CDN. Para ello

copiaremos el enlace de la

opción CDN y la pegaremos

en la barra de navegación de

Google Chrome:



Lo que nos aparece es la versión minificada del framework que fue la que elegimos en la ventana

anterior, Todo lo que se ve es el código fuente del framework.

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

agregamos las siguientes líneas de código luego de la etiqueta <title>:

De esta manera hemos instalado en nuestra app la librería del framework. Cada vez que seejecute nuestra plantilla HTML, también se llamará al framework del angular que como vimos

se encuentra en esa dirección.

Finalmente para que angular pueda reconocer todos los elementos con los que va a trabajar

dentro de nuestro documento debemos agregarle un fragmento de código que de ahora en

adelante identificará a nuestra página como una app angular, agregamos el siguiente fragmento

de código:

De esta manera hemos terminado de agregar lo necesario para convertir nuestra página en una

app angular.

Documents

2- Instalacion de Angular JS