¿Cómo empezar a usar JavaScript con Angular?

Si lo que quieres es saber qué necesitas ahora mismo para empezar a utilizar Angular, has llegado al sitio indicado. Angular es una excelente herramienta que te otorgará una excelente y singular forma de programar en JavaScript.

Incluyendo los  scripts de AngularJS desde la CDN de Google

La forma más rápida de empezar a utilizar esta poderosa herramienta, es utilizar tu ya conocida tu etiqueta de lenguaje  html <script> a una URL de Google CDN. De esta manera, no tendrás que descargar nada a tu computador personal, ni tendrás la necesidad de mantener una copia local.

Hay dos tipos de URLs de scripts AngularJS que puedes utilizar. Es muy simple, solo debes elegir uno de ellos; existe uno para desarrollo y otro para producción:

  • angular.js: Esta es la versión legible para los seres humanos,  ya que no está modificada,  y es sumamente recomendada paraadecuada para el desarrollo web.
  • angular.min.js: Esta ya es la versión minada, la cual te recomiendo con hincapié la utilices más que todo para la producción.

Para dirigir tu código a un script de AngularJS alojado en el servidor CDN de Google, utiliza la plantilla mostrada en la parte inferior de este párrafo, es importante recalcarte que este ejemplo va dirigido especialmente a la versión minimizada 1.5.6. Aquí te lo dejo:


<!DOCTYPE html>
<html ng-app>
<head>
<title>Mi primer proyecto en Angular JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">
</script>
</head>
<body>
</body>
</html>

📝 Nota: Ten en cuenta que sólo las versiones 1.0.1 y superiores a esta están disponibles en la CDN. Si necesitas una versión anterior (que no deberías necesitarla ni utilizarla) puedes utilizar la URL https://code.angularjs.org/, la cual es la ubicación recomendada anteriormente para el código fuente de versiones anteriores. Si todavía estas utilizando el servidor AngularJS, deberias cambiar a la versión CDN para obtener tiempos de carga aún más rápidos.

Descarga y alojamiento de archivos AngularJS localmente

Esta opción es para aquellos que quieren trabajar con AngularJS offline, o para aquellos que quieren alojar los archivos AngularJS en sus propios servidores.

Si navegas a https://code.angularjs.org/, veras un listado de directorios con todas las versiones de AngularJS desde que empezamos a lanzar los artefactos de construcción versionados. Cada directorio contiene todos los artefactos que liberamos para una versión en particular. Descarga la versión que quieras y diviértete.

Nota: Puedes ignorar los directorios que empiezan por 2. (por ejemplo, 2.0.0.0-beta.17) – no están relacionados con AngularJS. Contienen artefactos de construcción de las versiones Angular.

Cada directorio bajo https://code.angularjs.org/ incluye un conjunto de archivos que comprenden la versión correspondiente. Todos los archivos JavaScript (a excepción de los de tipo angular, que sólo se utilizan durante el desarrollo) vienen en dos versiones: una adecuada para el desarrollo y otra para la producción:

  • <filename>.js – Estos archivos no están ocultos, no están modificados y son legibles por el ser humano al abrirlos en cualquier editor o navegador. Para obtener mejores mensajes de error durante el desarrollo, siempre debe utilizar estos scripts no modificados.
  • <filename>.min.js – Son versiones minimizadas y ofuscadas, creadas con el compilador de Closure. Utilice estas versiones para la producción con el fin de minimizar el tamaño de la aplicación que descarga el navegador de su usuario.
  • <filename>.min.js.map – Estos son archivos sourcemap. Puede servirlos junto con los archivos.min.js para poder depurar el código minificado (por ejemplo, en una implementación de producción) más fácilmente, pero sin afectar al rendimiento.

El conjunto de archivos incluidos en cada directorio de versiones es:

  • angular.zip – Este es un archivo zip que contiene todos los archivos liberados para esta versión de AngularJS. Utilice este archivo para obtener todo en una sola descarga.
  • angular.js – El núcleo de la estructura AngularJS. Esto es todo lo que necesita para que su aplicación AngularJS funcione.
  • angular-csp.css – Sólo necesita este archivo si está usando CSP (Content Security Policy). Vea aquí para más información.
  • angular-mocks.js – Este archivo contiene una implementación de mocks que hace que las pruebas de aplicaciones angulares sean aún más fáciles. Su arnés de prueba de unidad/integración debe cargar este archivo después de cargar el archivo angular.js.
  • angular-loader.js – Cargador de módulos para módulos AngularJS. Si está cargando múltiples archivos de script que contienen módulos AngularJS, puede cargarlos asincrónicamente y en cualquier orden siempre y cuando cargue primero este archivo. A menudo el contenido de este archivo se copia y pega en el index.html para evitar incluso la petición inicial al cargador angular[.min].js. Vea Semillas angulares para un ejemplo de uso.
  • Módulos AngularJS adicionales: Módulos opcionales con funcionalidad adicional. Estos archivos deben cargarse después del archivo[.min].js angular del núcleo:
    • angular-animate.js – Habilitar el soporte de animación. (API docs)
    • angular-aria.js – Haga que sus aplicaciones sean accesibles a los usuarios de tecnologías de asistencia. (API docs)
    • angular-cookies.js – Un envoltorio conveniente para leer y escribir las cookies del navegador. (API docs)
    • angular-message-format.js – Soporte mejorado para la pluralización y mensajes específicos de género en texto interpolado. (API docs)
    • angular-messages.js – Soporte mejorado para mostrar mensajes de validación. (API docs)
    • angular-parse-ext.js – Permitir caracteres Unicode en identificadores dentro de expresiones AngularJS. (API docs)
    • angular-resource.js – Fácil interacción con los servicios de RESTful. (API docs)
    • angular-route.js – Servicios de enrutamiento y deep-linking y directivas para aplicaciones AngularJS. (API docs)
    • angular-sanitize.js – Funcionalidad para desinfectar HTML. (API docs)
    • angular-touch.js – Eventos táctiles para dispositivos táctiles. (API docs)
  • docs/ – Este directorio contiene todos los archivos que componen la aplicación de documentación https://docs.angularjs.org/ Estos archivos son útiles para ver las versiones anteriores de nuestros documentos o, lo que es más importante, para ver los documentos sin conexión.
  • i18n/ – Este directorio contiene módulos ngLocale AngularJS específicos de la localidad para anular los valores predeterminados definidos en el módulo ng principal.

¿Por qué este proyecto se llama «AngularJS»? ¿Por qué se llama «ng» al espacio de nombres?

Porque HTML tiene corchetes angulares y «ng» suena como «AngularJS».

¿Es AngularJS una biblioteca, framework, plugin o una extensión de navegador?

AngularJS se ajusta mejor a la definición de un framework, aunque es mucho más ligero que un framework típico y por eso muchos lo confunden con una librería.

AngularJS es 100% JavaScript, 100% cliente y compatible con navegadores de escritorio y móviles. Así que definitivamente no es un plugin o alguna otra extensión nativa del navegador.

¿Qué es la estrategia de versionado de AngularJS?

En AngularJS no permitimos que aparezcan cambios intencionales de rotura en versiones donde sólo cambia el número del «parche». Por ejemplo, entre 1.3.12 y 1.3.13 no puede haber cambios de ruptura. Permitimos que los cambios de ruptura ocurran entre cambios de números «menores». Por ejemplo, entre 1.3.15 y 1.4.0 hay una serie de cambios de ruptura. Esto significa que AngularJS no sigue el versionado semántico (semver) donde los cambios de ruptura sólo se permiten cuando cambia la versión «mayor».

También permitimos cambios de ruptura entre las versiones beta de AngularJS. Por ejemplo, entre 1.4.0-beta.4 y 1.4.0-beta.5 puede haber cambios de ruptura. Nos esforzamos por minimizar este tipo de cambios sólo en aquellos casos en los que existe un fuerte caso de uso, como en el caso de una mejora de las características muy solicitada, una simplificación considerable del código, una mejora mensurable del rendimiento o una mejor experiencia del desarrollador (especialmente en lo que se refiere a la actualización a Angular).

Cuando estamos haciendo un lanzamiento generamos actualizaciones al registro de cambios directamente desde las confirmaciones. Esta actualización generada contiene una sección resaltada que contiene todos los cambios de ruptura que se han extraído de las confirmaciones. Podemos ver rápidamente en el nuevo registro de cambios exactamente qué confirmaciones contienen cambios de ruptura y también lo pueden hacer los desarrolladores de aplicaciones cuando están decidiendo si actualizarse a una nueva versión de AngularJS.

Las características con cambios que no se rompen también pueden aparecer en la versión «patch», por ejemplo, en la versión 1.6.3 puede haber una característica que no esté disponible en la 1.6.2.

Por último, la deprecación de las características también puede aparecer en las actualizaciones de versiones «menores». Esto significa que las características seguirán funcionando en esta versión, pero a veces deben activarse específicamente.

¿Cuándo se eliminan las funciones obsoletas de la biblioteca?

La mayoría de las veces eliminamos una característica obsoleta en una nueva versión menor. Por ejemplo, el método preAssignBindingsEnabled $compileProvider fue definido en AngularJS 1.5.10, obsoleto en 1.6 y será eliminado en 1.7.

En el caso de jqLite aplicamos una estrategia diferente – desaprobamos las características que tienen un equivalente en jQuery que también es desaprobado, pero sólo eliminamos la característica una vez que se elimina de jQuery para mejorar la compatibilidad entre jqLite y jQuery. Un ejemplo de ello es el método bind, obsoleto a favor de on pero que no es probable que sea eliminado de jqLite en un futuro cercano.

¿Es AngularJS un sistema de plantillas?

En el nivel más alto, AngularJS parece un sistema de plantillas más. Pero hay una razón importante por la que el sistema de plantillas AngularJS es diferente, que lo hace muy adecuado para el desarrollo de aplicaciones: la vinculación de datos bidireccional. La plantilla se compila en el navegador y el paso de compilación produce una vista en vivo. Esto significa que ustedes, los desarrolladores, no necesitan escribir código para sincronizar constantemente la vista con el modelo y el modelo con la vista como en otros sistemas de plantillas.