Arquitectura

Forms

Directivas

Controladores

Animaciones

Filters

Servicios

Beneficios

Conceptos

MV*

Angularjs

Directivas

Factories

Rutas

Definición

En un SPA, toda la aplicación se ejecuta como una sola página web. En este enfoque, la capa de presentación para toda la aplicación ha sido un factor fuera del servidor y es gestionado desde el navegador.

Fuente: Spa Design and Architecture

No SPA

Cada solicitud para una (página HTML) nueva se traduce en una ida y vuelta al servidor, cuando se necesitan datos la solicitud es interceptada por un objeto controlador dentro de la capa de presentación. El controlador entonces interactúa con la capa del modelo a través de la capa de servicio, que determina los componentes necesarios para completar la tarea en las capas de modelo. 

Fuente: Spa Design and Architecture

SPA

Cambiando el proceso para la creación y gestión de vistas en la interfaz de usuario, esta se desacopla del servidor. Desde un punto de vista arquitectónico, esto le da al SPA un beneficio interesante. A menos que se este haciendo presentación parcial en el servidor, el servidor ya no es necesario para la presentación de los datos.

Fuente: Spa Design and Architecture

Arquitectura

Forms

Directivas

Controladores

Animaciones

Filters

Servicios

Beneficios

Conceptos

MV*

Angularjs

Directivas

Factories

Rutas

Angularjs

Es un framework de aplicaciones web de código abierto mantenido principalmente por Google y por una comunidad de desarrolladores y empresas individuales. Su objetivo es simplificar el desarrollo y las pruebas de este tipo de aplicaciones, proporcionando un marco para el lado del cliente modelo-vista-controlador (MVC) y el modelo-vista-ViewModel (MVVM) arquitectura, junto con los componentes de uso común en aplicaciones dinámicas de Internet.

Fuente: https://en.wikipedia.org/wiki/AngularJS

Rutas

• Nombre: Es el identificador de la ruta por ejemplo "Inicio" o "Sesión"
• Verbo: Es el verbo e se va a utilizar para definir la ruta como puede ser "Get" "Route" "When", en angular se usa el "Get", o con  ui-router un paquete de la comunidad con "State"
• Ruta: La dirección URL por ejemplo "/Usuarios"
• Funcionalidad: Es el controlador que va a manejar la funcionalidad de esa vista
• Template: Es lo que se presenta, el contenido HTML

Fuente: Angularjs - Green Seshbadry

Controlador

El controlador es el punto de entrada de la solicitud, la recepción de señales de los controles en la interfaz de usuario. También contiene la lógica que procesa la entrada del usuario y envía comandos al modelo para actualizar su estado basado en la entrada recibida.

Fuente: Angularjs - Green Seshbadry

Services

Los servicios son (única instancia) objetos únicos que llevan a cabo las tareas necesarias para soportar la funcionalidad de la aplicación.

Fuente: Angularjs - Green Seshbadry

Factory

La llamada a la API se utiliza cada vez que tenemos una clase u objeto que necesita una cierta cantidad de la lógica o los parámetros antes de que pueda ser inicializado. Una fábrica es una función que se encarga de la creación de un valor determinado (u objeto).

Fuente: Angularjs - Green Seshbadry

Filter

Los filtros le permiten transformar los datos para mostrar al usuario los datos dentro de una plantilla definida.

La sintaxis para utilizar filtros es:

{{Expresión | filterName: parámetro1: ... parameterN}}

Fuente: Angularjs - Green Seshbadry

Directive

Extienden la sintaxis HTML, y son la manera de asociar el comportamiento y las transformaciones del Document Object Model DOM con elementos y atributos personalizados. A través de ellos, puede crear componentes de interfaz de usuario reutilizables, configurar la aplicación, y hacer casi cualquier cosa que puedas imaginar que quiera hacer en la plantilla de interfaz de usuario.

Fuente: Angularjs - Green Seshbadry

Arquitectura

Forms

Directivas

Controladores

Animaciones

Filters

Servicios

Beneficios

Conceptos

MV*

Angularjs

Directivas

Factories

Rutas

Modules

Contienen a la aplicación de Angularjs, dentro de esta se pueden usar controladores, servicios, factories, Directivas, etc

Fuente: SPA Design and Architectura

Scope

Es lo que actualiza nuestra vista y nuestro controlador, además tiene jerarquias dentro de la aplicacion como un arbol.

Fuente: SPA Design and Architectura

Scope

Se puede acceder a los $scope padres como a los hijos

Fuente: SPA Design and Architectura

Scope

Para comunicarse entre los scopes existen dos métodos, $broadcast y $emit

Fuente: SPA Design and Architectura

Scope - Two way Data binding

El $scope mantiene actualizado tanto la vista como al modelo cuando usamos el "Two way data binding"

Fuente: SPA Design and Architectura

Scope - One way Data binding

El $scope solo actualiza la vista

Fuente: SPA Design and Architectura