Upload
norman-arauz
View
216
Download
0
Embed Size (px)
Citation preview
8/15/2019 2- Instalacion de Angular JS
http://slidepdf.com/reader/full/2-instalacion-de-angular-js 1/10
8/15/2019 2- Instalacion de Angular JS
http://slidepdf.com/reader/full/2-instalacion-de-angular-js 2/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:
8/15/2019 2- Instalacion de Angular JS
http://slidepdf.com/reader/full/2-instalacion-de-angular-js 3/10
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/
8/15/2019 2- Instalacion de Angular JS
http://slidepdf.com/reader/full/2-instalacion-de-angular-js 4/10
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.
8/15/2019 2- Instalacion de Angular JS
http://slidepdf.com/reader/full/2-instalacion-de-angular-js 5/10
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
8/15/2019 2- Instalacion de Angular JS
http://slidepdf.com/reader/full/2-instalacion-de-angular-js 6/10
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.
8/15/2019 2- Instalacion de Angular JS
http://slidepdf.com/reader/full/2-instalacion-de-angular-js 7/10
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
8/15/2019 2- Instalacion de Angular JS
http://slidepdf.com/reader/full/2-instalacion-de-angular-js 8/10
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
8/15/2019 2- Instalacion de Angular JS
http://slidepdf.com/reader/full/2-instalacion-de-angular-js 9/10
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:
8/15/2019 2- Instalacion de Angular JS
http://slidepdf.com/reader/full/2-instalacion-de-angular-js 10/10
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.