INTRODUCCIÓN A ANGULARJS

AngularJS es un marco estructural para aplicaciones web dinámicas. Le permite

utilizar HTML como idioma de su plantilla y le permite extender la sintaxis de HTML
para expresar los componentes de su aplicación de manera clara y sucinta. El
enlace de datos de Angular y la inyección de dependencia eliminan gran parte del
código que actualmente tiene que escribir. Y todo sucede dentro del navegador, lo
que lo convierte en un socio ideal con cualquier tecnología de servidor.

Características:

 AngularJS es un potente marco de desarrollo basado en JavaScript para

crear aplicaciones de Internet RICH (RIA).
 AngularJS proporciona a los desarrolladores opciones para escribir la
aplicación del lado del cliente (con JavaScript) de una forma MVC
(Controlador de Vista Modelo) limpia.
 La aplicación escrita en AngularJS es compatible con todos los navegadores.
AngularJS maneja automáticamente el código JavaScript adecuado para
cada navegador.
 AngularJS es de código abierto, completamente gratuito y utilizado por miles
de desarrolladores en todo el mundo. Está licenciado bajo la licencia Apache
versión 2.0.
 En general, AngularJS es un marco para crear aplicaciones web a gran
escala y alto rendimiento, a la vez que las mantiene fáciles de mantener.

Características principales

Las siguientes son las características principales más importantes de AngularJS:

Enlace de datos: es la sincronización automática de datos entre los componentes

del modelo y de la vista.
Ámbito: estos son objetos que se refieren al modelo. Actúan como un pegamento
entre el controlador y la vista.
Controlador: estas son funciones de JavaScript que están vinculadas a un ámbito
particular.
Servicios: AngularJS viene con varios servicios integrados, por ejemplo, $ https:
para realizar una solicitud de XMLHttpRequests. Estos son objetos singleton que se
instancian solo una vez en la aplicación.
Filtros: seleccionan un subconjunto de elementos de una matriz y devuelven una
nueva matriz.
Directivas: las directivas son marcadores en elementos DOM (como elementos,
atributos, css y más). Se pueden usar para crear etiquetas HTML personalizadas
que sirven como nuevos widgets personalizados. AngularJS tiene directivas
integradas (ngBind, ngModel ...)
Plantillas: estas son las vistas renderizadas con información del controlador y el
modelo. Estos pueden ser un solo archivo (como index.html) o varias vistas en una
página usando "parciales".

Enrutamiento - Es el concepto de cambio de vistas.

Model View Whatever - MVC es un patrón de diseño para dividir una aplicación en
diferentes partes (llamadas Model, View y Controller), cada una con
responsabilidades distintas. AngularJS no implementa MVC en el sentido
tradicional, sino algo más cercano a MVVM (Model-View-ViewModel). El equipo de
Angular JS lo refiere con humor como Model View Whatever.

Enlace profundo: El enlace profundo le permite codificar el estado de la aplicación

en la URL para que pueda marcarse como favorito. La aplicación se puede restaurar
desde la URL al mismo estado.

Inyección de dependencia: AngularJS tiene un subsistema de inyección de

dependencia incorporado que ayuda al desarrollador al hacer que la aplicación sea
más fácil de desarrollar, comprender y probar.

El siguiente diagrama muestra algunas partes importantes de AngularJS.

Ventajas de AngularJS

 AngularJS proporciona la capacidad de crear aplicaciones de una sola

página de una manera muy limpia y fácil de mantener.
 AngularJS proporciona capacidad de enlace de datos a HTML, lo que le
brinda al usuario una experiencia rica y receptiva
 El código AngularJS es comprobable por unidad.
 AngularJS utiliza la inyección de dependencia y hace uso de la separación
de preocupaciones.
 AngularJS proporciona componentes reutilizables.
 Con AngularJS, el desarrollador escribe menos código y obtiene más
funcionalidad.
 En AngularJS, las vistas son solo páginas HTML, y los controladores escritos
en JavaScript realizan el procesamiento empresarial.
 Además de todo, las aplicaciones AngularJS pueden ejecutarse en todos los
principales navegadores y teléfonos inteligentes, incluidos los teléfonos /
tabletas basados en Android e iOS.

Desventajas de AngularJS

Aunque AngularJS viene con muchos puntos positivos, pero al mismo tiempo
debemos considerar los siguientes puntos:
  No seguro : al ser un marco de JavaScript, la aplicación escrita en AngularJS
no es segura. La autenticación y autorización del lado del servidor es
necesaria para mantener una aplicación segura.
 No degradable : si el usuario de la aplicación deshabilita JavaScript, el
usuario verá la página básica y nada más.

Los componentes AngularJS

El marco AngularJS se puede dividir en las siguientes tres partes principales:

 ng-app : esta directiva define y vincula una aplicación AngularJS a HTML.

 ng-model : esta directiva vincula los valores de los datos de la aplicación
AngularJS a los controles de entrada HTML.
 ng-bind : esta directiva enlaza los datos de la aplicación AngularJS a las
etiquetas HTML.

Realmente no necesita configurar su propio entorno para comenzar a aprender

AngularJS. La razón es muy simple, ya hemos configurado el entorno de AngularJS
en línea, para que pueda ejecutar todos los ejemplos disponibles en línea al mismo
tiempo que realiza su trabajo de teoría. Esto le da confianza en lo que está leyendo
y para verificar el resultado con diferentes opciones. Siéntase libre de modificar
cualquier ejemplo y ejecutarlo en línea.

Pruebe el siguiente ejemplo utilizando la opción Probar que está

disponible en la esquina superior derecha del cuadro de código
de muestra a continuación:
“Ejemploangular1.html”
script.js

Ejemploangular1.html
Ejemplo de cómo enviar un formulario utilizando:
AJAX,AngularJS,PHP

“Ejemploangular3.html”
Programando el lado del servidor
Vamos a hacer que los datos que se reciban sean escritos en un archivo txt simplemente para
comprobar que realmente se están enviando. En la vida real puede que los guardemos en una
base de datos, o algo así.

Es importante mencionar que AngularJS manda los datos de diferente manera que jQuery. jQuery
por defecto los manda como si fueran un formulario, y accedemos desde PHP con $_POST. En
cambio, AngularJS los manda para poder leerlos en el flujo de entrada de datos.

Otra cosa que hay que mencionar es que se tiene que hacer un echo, pues eso es lo que leerá la
petición como resultado.

recibir.php
 Introducción a la creación de gráficas de barras usando AngularJS.
Usaremos también la librería llamada ChartJS y otra llamada angular-
chart. Lo que hace ésta última es “pegar” o juntar a las dos primeras.

ChartJS puede ser usado sin ningún framework; es decir, podemos

hacerlo con simple javascript, pero no queremos eso ahora.
AngularJS, como todos lo sabemos, refresca la vista cuando detecta que algo en el
controlador cambió, pero como ChartJS no tiene que ver nada con él, las gráficas
no se dibujarán de nuevo cuando algún dato cambie. Aquí es en donde viene
angular-chart que, como lo dije, funciona como un pegamento y hace que
trabajemos con gráficas in the angular way.

Index.html
script.js

Gráfica de pastel
Ahora veremos cómo crear una gráfica, pero de pastel. El código es
casi el mismo que el anterior; sólo cambia el tipo de gráfica a chart-
pie. Queda definida así:
index.html

script.js
 Código de barras cambie al escribir
Ya pusimos nuestro código de barras, pero es estático. Podemos
hacer que sea dinámico y que conforme introduzcamos texto,
cambie. Simplemente tenemos que agregar un input y ligarlo al
modelo. Sólo tenemos que agregar el siguiente código:

index.html
script.js
Capturar la pantalla y descargar:
 Código QR dependiendo de input
Lo que falta ahora es ligar nuestro código QR a un input, para que
se genere el código conforme escribamos. Me gustó mucho el
resultado, ya que el código QR se genera conforme escribimos, y
va cambiando su forma, algo muy entretenido.

Agregaríamos un input y lo ligaríamos. Quedaría así:

Index.html
script.js