Angular es un framework JavaScript de código abierto. Angular es probablemente uno de los frameworks más populares de la actualidad. Este framework se utiliza principalmente para desarrollar aplicaciones de página única, las SPA (Single Page Application).

Se basa completamente en HTML y JavaScript, por lo que no hay necesidad de aprender otra sintaxis o lenguaje. Angular cambia el HTML estático por el dinámico. Amplía la capacidad de HTML añadiendo atributos y componentes incorporados y también ofrece la posibilidad de crear atributos personalizados utilizando un simple JavaScript.

Arquitectura de Angular 

Angular usa la arquitectura Modelo-Vista-Controlador (MVC). Es un patrón de diseño de software para desarrollar aplicaciones web. Es muy popular porque aísla la lógica de la aplicación de la capa de la interfaz de usuario y soporta la separación de preocupaciones.

El patrón MVC se compone de las siguientes tres partes:

• Modelo: Se encarga de gestionar los datos de la aplicación. Responde a las peticiones de la vista y a las instrucciones del controlador para actualizarse.

• Vista: Se encarga de mostrar todos los datos o sólo una parte de ellos a los usuarios. También especifica los datos en un formato particular provocado por la decisión del controlador de presentar los datos. Son sistemas de plantillas basados en scripts como JSP, ASP, PHP y muy fáciles de integrar con la tecnología AJAX.

• Controlador: Se encarga de controlar la relación entre los modelos y las vistas. Responde a la entrada del usuario y realiza interacciones sobre los objetos del modelo de datos. El controlador recibe entradas, las valida y luego realiza operaciones de negocio que modifican el estado del modelo de datos.

En el contexto de Angular, el modelo es el framework, mientras que la vista es HTML y el control es JavaScript.
Para hacerlo más simple:

1) Angular une JavaScript y HTML.

2) JavaScript acepta la entrada del usuario y la envía a Angular.

3)Angular usa la entrada para modificar HTML.

4) Con el framework que vincula JavaScript y HTML, el código entre ellos se sincroniza. Este mecanismo facilita el trabajo de los desarrolladores porque reduce la cantidad de código necesario para escribir.

¿Qué es una directiva en Angular?

Una directiva es un comando que da una nueva funcionalidad al HTML. Cuando Angular recorre el código HTML, primero encontrará las directivas en la página y luego analizará la página HTML en consecuencia.

¿Cómo se usa una directiva en Angular? Mediante el conjunto de directivas integradas, Angular puede ofrecer funcionalidad a las aplicaciones. Además, con Angular, se puede definir y personalizar un conjunto de directivas propias.

Las directivas son atributos especiales que comienzan con el prefijo ng-. Las siguientes son las directivas más comunes:

ng-app: Arranca automáticamente la aplicación Angular.
ng-init: Inicializa las variables de Angular.
ng-model: Se utiliza para vincular los controles HTML a los datos de la aplicación.
ng-controller: Adjunta el controlador de MVC a la vista.
ng-bind: Reemplaza el valor del control HTML con el valor de la expresión Angular especificada.
ng-repeat: Repite la plantilla HTML una vez por cada elemento de la colección especificada.
ng-show: Muestra el elemento HTML basado en el valor de la expresión especificada.
ng-readonly: Hace que el elemento HTML sea de sólo lectura basándose en el valor de la expresión especificada.
ng-disabled: Establece el atributo disable en el elemento HTML si la expresión especificada se evalúa como verdadera.
ng-if: Elimina o recrea el elemento HTML basándose en una expresión.
ng-click: Especifica un comportamiento personalizado cuando se hace clic en un elemento.

¿Qué necesitas para usar Angular?

Node Package Manager (npm)

Esta es una herramienta necesaria para todos los desarrolladores web en estos días. Todo en Angular se distribuye en varios paquetes npm. Por lo que es muy probable que en algún momento necesites instalar algunos paquetes útiles que no sean Angular, por lo que es conveniente saber cómo hacerlo para cuando lo requieras.

CLI angular

El primer paquete Angular que debes instalar con npm es Angular CLI (Interfaz de línea de comandos). Aunque es posible instalar paquetes Angular individualmente y escribir todo el código a mano para configurar su nueva aplicación, la CLI hace que ese proceso sea mucho más fácil y asegura que su aplicación cumplirá con las mejores prácticas aceptadas.

HTML y CSS

Tres tecnologías forman las herramientas básicas involucradas en prácticamente todos los aspectos del desarrollo web: HTML, CSS y JavaScript. Las dos primeras son de vital conocimiento para todo desarrollador Angular, si bien este framework proporciona los componentes básicos que necesitas para crear aplicaciones rápidas y funcionales, esas aplicaciones aún deben procesarse en un navegador y eso significa crear interfaces de usuario con HTML y CSS.

TypeScript

Las aplicaciones web del lado del cliente se han escrito tradicionalmente con JavaScript. TypeScript es un superconjunto de JavaScript que incluye soporte para escritura fuerte. Angular está escrito en TypeScript. Es el lenguaje recomendado para crear aplicaciones con Angular

Ventajas de usar Angular

Una de las ventajas más significativas de Angular es que cuenta con características que lo hacen ideal para crear tipos específicos de sitios con ciertas funcionalidades. A continuación, enseñaremos algunas de las ventajas de usar Angular.

Google lo mantiene

Los ingenieros de Google desarrollaron y siguen manteniendo Angular. Por lo tanto, puedes estar seguro de que es fiable. Además, cuentas con una enorme comunidad que te respalda y te inspira a aprender, y que está dispuesta a ayudarte a afrontar los retos que se presenten en el camino.

Fácil comienzo

Empezar con Angular es muy fácil. Puedes añadir unos pocos atributos a tu HTML y construir una simple aplicación Angular en sólo unos minutos.

Rápido desarrollo y creación de prototipos

Angular ahorra mucho tiempo, esfuerzo y recursos porque reduce significativamente la cantidad de código que necesitas escribir. Lo que significa que la creación de prototipos es más rápida, por lo que puedes implementar rápidamente los cambios o probar la funcionalidad antes del lanzamiento.

Vinculación de datos bidireccional

La vinculación de datos bidireccional es posible en Angular, por lo que puedes crear plantillas y realizar cambios mucho más rápido. Con esta característica, cualquier cambio realizado en el "Modelo" se implementa en la "Vista", lo que significa que se traslada a la interfaz de usuario.

Es bueno señalar que las arquitecturas MVVM y MVC utilizadas en AngularJS son también ventajas en sí mismas.

Rendimiento del servidor mejorado y respuesta más rápida

Dado que Angular sólo sirve archivos estáticos y responde directamente a la API, disminuye la carga en el rendimiento del servidor, lo que se traduce en aplicaciones más rápidas y receptivas con una navegación más fluida.

Pruebas

Angular permite a los desarrolladores construir productos altamente comprobables, haciendo que las pruebas y la depuración sean extremadamente fáciles. Puedes utilizar la inyección de dependencias para aislar y simular varios componentes; además, ya no tienes que buscar dependencias (o hacerlas tú mismo).

Directivas

Las directivas son una de las características de Angular favoritas de muchos desarrolladores, ya que les da la libertad de construir sus diseños y funcionalidades personalizadas en lugar de depender de las predefinidas. También puedes utilizarlas para repetir funciones específicas o crear código independiente. Además de mantener las páginas HTML organizadas y despejadas.

Plantillas HTML simples

Angular utiliza plantillas HTML simples que contienen ciertos elementos y atributos del framework, lo que facilita a los desarrolladores la manipulación de un flujo de trabajo más fluido. Los desarrolladores también pueden reutilizar estas plantillas varias veces.

Desventajas de AngularJS

Aunque Angular es un gran framework y uno que es utilizado por muchos desarrolladores en todo el mundo, tiene sus desventajas. Aquí hay algunas desventajas que puedes encontrar al usarlo.

JavaScript obligatorio

No todo el hardware es compatible con JavaScript, especialmente los ordenadores más antiguos. Lo que limita el alcance de una página Angular ya que requiere un software y hardware adecuados para funcionar. Esto significa que potencialmente podrías perder una parte de la clientela que no puede acceder a tu aplicación.

Bibliotecas específicas de Angular

Angular tiene limitaciones si no se utilizan herramientas o bibliotecas específicas del framework, lo que puede añadir más tiempo y carga de trabajo para un desarrollador.

Curva de aprendizaje empinada

Como propietario de un negocio o empresario autodidacta, es posible que esté buscando construir su aplicación utilizando Angular. Pero la curva de aprendizaje para ello es empinada, y a menudo requiere la ayuda de un profesional que es un experto en el marco para hacerlo bien.

Problemas de rendimiento

Cuando una aplicación Angular experimenta demasiado tráfico o dinámica, puede sufrir algunos lags o fallos de rendimiento. El comportamiento con errores puede ser un rechazo para los usuarios y clientes potenciales, lo que es especialmente desventajoso si eres un tipo de negocio que necesita manejar muchos datos a la vez.

Opciones de SEO limitadas

Angular ofrece opciones limitadas que cumplan con las métricas SEO necesarias y poca accesibilidad para los rastreadores de motores de búsqueda.

Ejemplos de uso

Para utilizar Angular, en nuestro html debemos incluir la librería javascript angular.js. Podemos cogerla directamente de las google apis con:

<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

</head>

Ahora toca crear la función que mostrará nuestro Hola Mundo en la aplicación. Añade esta función de Javascript en la sección head de tu aplicación.

<script>

function HelloWorl($scope) {

$scope.test = 'Mundo';

}

</script>

Aquí, hemos creado una función llamada "HelloWorld". En esta función HelloWorld, $scope crea la conexión entre la función y la vista, o en otras palabras, la parte de diseño. "Test" es una variable que tendrá "Mundo" como valor por defecto.

Ahora crearemos un div, un textbox y varios labels para mostrar el ejemplo del Hola Mundo.

<body>

<div ng-controller="HelloWorld">

Tu nombre: <input type="text" ng-model="test"/>

<hr/>

Hola {{test || "Mundo"}}!

</div>

</body>

Aquí en el div, puedes ver que utilizo una directiva llamada "ng-controller", cuyo valor consiste en el nombre de la función JavaScript que se quiere aplicar a un Div, Span o cualquier elemento HTML específico.

Después, en el campo de texto utilizo la directiva "ng-model" que proporciona la unión entre la Vista y el Modelo. En ng-model, cuyo valor es "test", significa que el valor introducido en este campo se reemplazará con el valor predeterminado, establecido en la función JavaScript.

Una cosa más que hay que hacer y que es muy importante. Hay que añadir la directica "ng-app" en la etiqueta HTML.

<html ng-app xmlns="http:/www.w3.org/1999/xhtml">

ng-app declara que esto es una página Angular. Si no agregas esta directiva en la etiqueta HTML, tu aplicación no funcionará correctamente porque no podrá detectar las demás directivas de Angular.

Ahora nuestra aplicación de Hola Mundo está lista para ser ejecutada.

El código completo de la aplicación es el siguiente:

<html ng-app xmlns="//www.w3.org/1999/xhtml>

<head>

<script src="angular.min.js"></script>

<script>

function HelloWorld($scope) {

$scope.test = 'Mundo';

}

</script>

</head>

<body>

<div ng-controller="HelloWorld">

Tu nombre: <input type="text" ng-model="test"/>

<hr/>

Hola {{test || "Mundo"}}!

</div>

</body>

</html>

Empresas que utilizan Angular

Entre las empresas que han hecho uso de este framework para sus páginas y aplicaciones se encuentran: GitHub (foro), Google, Forbes, Indiegogo, BMW (calculadora de precios, buscador de ofertas), portal de desarrolladores de Deutsche Bank, Crunchbase, Nike, Xbox, Udacity , YoutubeTV, Firebase, AT&T y Adobe.

Si quieres conocer más sobre angular y los distintos frameworks que utiliza el desarrollo web, lee nuestros posts React vs Angular vs Vue, y ¿Qué es React?

También puedes visitar nuestro curso sobre Fundamentos de la programación y JavaScript y HTML.