Cargando



AngularJS - Invocando la Librería

En este tutorial veremos cómo invocar AngularJS en nuestra aplicación y como empezar a utilizar estas valiosas herramientas.


jul 06 2014 03:01
Profesional
jul 09 2014 18:13
Como AngularJS es una librería que contiene una cantidad de funcionalidades y métodos, la forma en la que podemos empezar a utilizarla es invocándola, esto no tiene ningún misterio de por sí, de hecho si hemos manejado otras librerías como jQuery o Mootools seguramente entenderemos a que nos referimos.

Sin embargo una vez que hemos invocado a la librería para que pueda servirnos debemos cumplir ciertas estructuras y convenciones que harán que nuestras aplicaciones puedan beneficiarse de todas las cosas que ofrece AngularJS.

Incluyendo la Librería


Para incluir la librería como mencionamos al inicio del tutorial podemos hacerlo como cualquier otra librería Javascript, sin embargo tenemos dos opciones que podemos tomar:

Primera Opción
Es utilizar la CDN de Google lo que nos permite tener la librería disponible desde una red donde se puede hacer cache de la librería, es decir, que si la persona que utiliza nuestra aplicación ya ha utilizado otra aplicación que usa AngularJS no tendrá que descargar el archivo completo ya que estará en el cache del navegador.

Segunda Opción
Es incluir la librería en nuestra aplicación y servirla desde nuestros servidores, esta opción no es muy popular en la actualidad debido a la alta velocidad y la disponibilidad de las CDN de Google sin embargo si es imperativo, podemos descargar el archivo y almacenarlo en nuestro proyecto y hacer la referencia correspondiente.


Veamos en la siguiente imagen un ejemplo de cómo incluir AngularJS en nuestra aplicación utilizando la primera opción de llamar a la librería desde la CDN de Google.


En caso que necesitemos otra versión podemos consultar en Google las diferentes versiones disponibles que tienen, para así hacer el llamado correspondiente.

Delimitando la Influencia de AngularJS


Una vez que ya tenemos a AngularJS dentro de nuestra aplicación, debemos indicarle donde puede actuar, esto tal vez no suene como algo importante, pero si lo es, al indicarle donde puede actuar podemos incorporar diferentes librerías sin tener temor que se puedan estorbar unas a otras.

¿Cómo delimitar?
Para indicarle cuales son los elementos sobre los cuales puede actuar debemos utilizar la propiedad personalizada ng-app de esta manera no afectará a nuestro HTML estándar y así podremos especificar donde queremos que actúe.


Veamos en el siguiente ejemplo como decirle a AngularJS que puede aplicarse sobre todo nuestro HTML:


angular_invocando_lib2.jpg


Al aplicar la propiedad sobre la etiqueta HTML hace que AngularJS tome en cuenta a todas las etiquetas hijas. En caso que solo queramos definir un elemento por separado podemos aplicar lo siguiente:


angular_invocando_lib3.jpg


Vemos que este ejemplo es muy parecido al anterior, solo que en vez de aplicar la propiedad sobre la etiqueta HTML, lo hemos hecho sobre una etiqueta div, por lo que lo que esté fuera de dicha etiqueta no será afectado por AngularJS a menos que le coloquemos la propiedad ng-app.

Hemos dado un paso importante en el camino del aprendizaje de cómo utilizar esta librería tan importante en la actualidad, como vemos se aplican conceptos muy similares a los que siempre hemos empleado con algunas pequeñas diferencias.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X