El sistema de plantillas en AngularJS es diferente del utilizado en otros frameworks.
Por lo general es el servidor el encargado de mezclar la plantilla con los datos y
devolver el resultado al navegador. En AngularJS el servidor proporciona los
contenidos estáticos (plantillas) y la información que se va a representar (modelo) y
es el cliente el encargado de mezclar la información del modelo con la plantilla para
generar la vista.
MVC
La idea de la estructura MVC no es otra que presentar una organización en el código,
donde el manejo de los datos (Modelo) estará separado de la lógica (Controlador) de
la aplicación, y a su vez la información presentada al usuario (Vistas) se encontrará
totalmente independiente. Es un proceso bastante sencillo donde el usuario
interactúa con las vistas de la aplicación, éstas se comunican con los controladores
notificando las acciones del usuario, los controladores realizan peticiones a los
modelos y estos gestionan la solicitud según la información brindada. Esta estructura
provee una organización esencial a la hora de desarrollar aplicaciones de gran escala,
de lo contrario sería muy difícil mantenerlas o extenderlas. Es importante aclarar
mencionar que en esta estructura el modelo se refiere a los diferentes tipos de
servicios que creamos con Angular.
El patrón Modelo Vista Controlador se sigue en AngularJS, separando la parte visual
de la funcionalidad y las estructuras de datos.
El archivo HTML de la aplicación representa la vista y debe ser separada del
controlador y el modelo.
El controlador es un objeto JavaScript que debe ser importado en el HTML que se
encarga de capturar los eventos de la vista y realizar las acciones pertinentes sobre el
modelo para modificar los datos. (inicialmente usaremos métodos del Scope, luego
mas estrictamente serian Factorias y/o Servicios de angular)
El modelo son objetos JavaScript que seran organizados dentro del objeto angular:
$scope (ámbito).
MVVM (Model-View-View-Model)
Algunos autores dicen que el modelo que usa Angujar es MVVM porque junto a los
modelos que representan nuestro dominio (Model) hay otros objetos (Model View)
que son de la vista necesarios para la infraestructura de la misma (permisos,
confguracion de la pantalla, etc.)
Inyección de dependencia:
Es un patrón de diseño de software que gestiona como los componentes obtienen
sus dependencias.
AngularJS posee un subsistema de inyección de dependencias que es el encargado
de crear los componentes resolviendo sus dependencias proveyendoles otros
componentes en la medida que estos son requeridos
De esta forma los componentes no necesitan saber cómo funcionan sus dependencia
ni cuáles son las acciones que crear dichos objetos.
Es la parte declarativa del codigo html con las elementos nativos que nos provee
AngularJS, así como las que hagamos nosotros mismos o terceros desarrolladores.
ng-app, ng-controller, {{}} son algunos de los elementos nativos de AngularJs
El controlador lo definiremos en javascript como una función
que acepta parámetros que generalmente son objetos provistos
por medio de inyección de dependencias.
Habitualmente uno de ellos es $scope, que es el objeto que
contiene el modelo de datos.
$scope (ámbito) es un objeto que contiene los modelos de la aplicación y otros
objetos para gestionar la vista. Es un contexto de ejecución sobre el que se evalúan
las expresiones. En una aplicación puede haber varios ambitos,. Estos se organizan en
una estructura jerárquica que imita la estructura DOM de la aplicación.
Los scopes se manejan principalmente desde los controllers y desde las
directives
$RootScope (ámbito raíz)
Cada aplicación tiene un único ámbito de raíz. Todos los demás ámbitos son ámbitos
de descendencia del ámbito raíz. Los ámbitos proporcionan separación entre el
modelo y la vista, los cuales se vinculan mediante un enlace a través de un
mecanismo de observación de cambios del modelo. También proporcionan
posibilidad de emitir eventos y suscribirse a los mismos.
Scope proporciona la función $apply para propagar cualquier cambio del modelo a
través del sistema en la vista, cuando es realizado fuera del AngularJs
Scope proporciona la función $watch para monitorear las modificaciones del
modelo y ejecutar código asociado a este cambio.
Es posible desencadenar eventos hacia los ambitos hijos mediante $broadcast y hacia
los ambitos padres mediante $emit
La function $on se utiliza para suscribirse a eventos (generados por $broadcast y
$emit)
Sobre un esquema básico de una pagina html seguir los pasos enunciados.
Cuando se inicia una aplicación angular, un servicio denominado “compilador” recorre el
DOM de nuestro html, buscando los elementos y atributos de angular que extienden la
sintaxis del html de nuestra aplicación transformándolo y/o adjuntandole un
comportamiento personalizable; a estas extensiones del html se las denomina directivas.
Ejemplos de directivas
La directiva ng-app inicializa una aplicación AngularJS.
Ej: <body ng-app="myApp">
La directiva ng-controller inicializa un controlador en una aplicación AngularJS.
Ej: <div ng-controller="myCtrl">
La directiva ng-init inicializa datos en una aplicación AngularJS.
Ej: <div ng-init="curso=’Angular’">
Como valor se le asigna generalmente (aunque es opcional) el nombre del
módulo a cargar. En donde se encuentra el código javascript asociado a la
aplicación.
Ej directiva ng-app sin nombre del módulo
<body ng-app>
Ej directiva ng-app con nombre del módulo.
<body ng-app="myApp">
Busca el código del módulo definido en javascript e inicializa una instancia del
mismo.
Se le llama Data-binding a la manera de enlazar datos entre el modelo y la
vista, de forma que ésta sea actualizada instantáneamente siempre que el
modelo cambie. Existen dos maneras de mostrar una variable del modelo
($scope) en la vista (HTML): si se trata de un texto dentro de algún elemento
de la vista podemos incluir cualquier variable del $scope delimitando su
nombre entre llaves dobles {{}}, si se trata de un elemento que va a contener
en su interior el contenido de una variable del modelo, podemos usar la
directiva ng-bind para reemplazar el contenido del elemento por el contenido
de la variable especificada en la directiva.
En las expresiones JavaScript no se puede acceder a los objetos globales (y
sus funciones) como window, location o document.
Si la propiedad a enlazar no existe, angular la creará en forma automática y la
agregará al $scope.
Los módulos son una forma de definir un espacio organizativo para nuestra
aplicación o parte de la aplicación ya que una aplicación puede constar de
varios módulos que se comunican entre sí. La directiva ng-app es la que
define cual es el módulo que usaremos para ese ámbito de la aplicación.
Los módulos en AngularJS son una pieza fundamental en el desarrollo de
angular, ya que nos sirven para organizar el código en librerías, evitando
aplicaciones monoliticas. Podríamos decir que los módulos son contenedores
de diferentes partes de nuestra aplicación. Siendo su uso más comun la
definición de los controladores.
Si tiene una colección de objetos, la directiva ng-repeat es perfecta para crear una
tabla HTML, mostrando una fila de tabla para cada objeto de la colección
y una celda para cada propiedad del objeto.
** el objeto Lista debe existir en el $scope, el objeto item se genera en forma
dinamica
La directiva ng-click generalmente se usa para ejecutar una acción definida como un
función dentro del objeto $scope
ej:
angular.module("myApp", [])
.controller("myCtrl",
function ($scope) {
$scope.Contador= 0;
$scope.incrementar = function () { $scope.Contador++; };
});
Directivas que permiten manipular eventos en angular
•ng-blur
•ng-change
•ng-click
•ng-copy
•ng-cut
•ng-dblclick
•ng-focus
•ng-keydown
•ng-keypress
•ng-keyup
•ng-mousedown
•ng-mouseenter
•ng-mouseleave
•ng-mousemove
•ng-mouseover
•ng-mouseup
•ng-paste
$event: en una expresión de esta directiva el elemento $event representa el código
ascii de la tecla pulsada.
Existen muliples opciones para la expresión ng-options, la más sencilla, trabaja con
un array y sigue el siguiente patrón: “x for x in collection” la cual nos genera un
opción por cada elemento del array cuyo text y values son iguales y corresponden al
valor del elemento del array.
Consultar mas opciones en la documentación oficial:
https://docs.angularjs.org/api/ng/directive/ngOptions
En muchos casos, ngRepeat se puede utilizar en elementos <option> en lugar de
ngOptions para obtener un resultado similar. Sin embargo, ngOptions ofrece algunos
beneficios:
•Más flexibilidad en cómo el modelo de <select> se asigna a través del select como
parte de la expresión de comprensión.
•Reducción del consumo de memoria al no crear un nuevo ámbito para cada
instancia repetida.
• Aumento de la velocidad de renderización mediante la creación de las opciones
juntas en lugar de individualmente.
Generalmente se da el caso de que tenemos un objeto del cual queremos ver su
Descripción y al seleccionar elegir su propiedad identificatoria; para la cual la sintaxis
sería la siguiente:
<select ng-options="obj.Id as obj.Descripcion for obj in ArticulosFamilias"></select>
En la actualidad los formularios son una parte imprescindible de cualquier aplicación
y la vía principal por la que el usuario intercambia información con el servidor.Dada
la necesidad de la veracidad de los datos intercambiados con el servidor, la validación
es la parte más importante si queremos obtener una información correcta y útil.
Entre otras ventajas, una correcta validación de los datos antes de ser procesados
ayuda al usuario a rectificar la información y evita hacer peticiones innecesarias al
servidor. AngularJS nos provee de una infraestructura completa para la validación de
formularios. En este caso los enriquece permitiéndole declarar estado valido, invalido
o modificado para cada elemento. De esta forma podremos comprobar si los datos
que ha introducido el usuario son válidos antes de procesar la información o
enviarlos al servidor. Él framework se basa en las reglas de validación de los
elementos HTML5, así como directivas para validaciones que no existen aún en el
estándar HTML, pero son necesarias en muchos de los casos que trabajamos con
formularios. Además de la validación HTML5 AngularJS nos brinda directivas para
validar elementos del formulario incluso sin el uso de código extra.
Reglas de Validación
El elemento HTML <input> es el que recibe las reglas de validación en dos formas.
Primero con la propiedad type donde especificando un tipo de elemento como email,
number o url AngularJS validará que sean correctos por su definición. La segunda
forma de validación es mediante propiedades como es required que hace que el
elemento tenga al menos un valor. Esta última es una de las reglas más utilizada
Además de las reglas básicas de HTML5 angular provee otras tres directivas de
validación aplicable a la mayoría de los elementos. Estas reglas son las siguientes.
● Valor mínimo
Para validar un elemento <input> y hacer que posea un valor mínimo de caracteres
utilizaremos la directiva ng-minlength que recibe como valor un número.
● Valor máximo
Al contrario de la directiva anterior la directiva ng-maxlength es definida para validar
un máximo de caracteres.
● Expresión regular
La directiva ng-pattern asegura que el valor cumpla con una expresión regular de
JavaScript para que este sea válido.
● Envío de los datos al servidor
El rol del formulario en una aplicación angular es distinto del que el de una aplicación
clásica que tiene idas y vueltas al servidor (round trips), por lo cual no queremos que
el browser envie los datos tradicionalmente (submit) recargando luego la página. En
cambio un código de javascript interceptada este submit para hacer una llamada
asíncrona al servidor.
Se pueden usar dos técnicas para que javascript maneje el envío de datos.
● ng-submit: con esta directiva usada en el elemento form (si hay botón
submit), se captura el evento submit y se lo deriva a una función de
javascript que hace el envio de datos mediante el servicio $http
● ng-click: con esta directiva en un o varios botones (no hay botón
submit), que representaría un submit y se lo deriva a una función de
javascript que hace el envio de datos mediante el servicio $http
En el momento en que declaramos un formulario, AngularJS enriquece este con
varios estados que podremos utilizar para dar información al usuario de la veracidad
de sus datos.Para poder referirnos al formulario este debe tener definida la
propiedad name la cual será automáticamente definida en el $scope para referirnos
a este.
• $valid: Devolverá verdadero o falso dependiendo de si el contenido del formulario
es válido.Cada uno de sus elementos <input> debe ser válido.
• $invalid: Devolverá verdadero o falso dependiendo de si el contenido del
formulario es erróneo. Si alguno de los elementos <input> es erróneo el resultado de
este será falso.
•$dirty: Devolverá verdadero si el usuario ha interactuado con el formulario
introduciendo algún dato o modificando alguno de los que están de lo contrario
tendrá valor falso.
• $pristine: Devolverá verdadero si el usuario no ha interactuado con el formulario
aún. Desde que el usuario introduzca algún dato devolverá falso.
• $submitted: Este estado nos devolverá verdadero o falso dependiendo si el
formulario ha sido procesado o no.
Puede utilizar los estados del formulario y del los campos para mostrar mensajes
significativos para el usuario.
Como en el ejempo, si se requiere un campo, y el usuario deja en blanco, se debe dar al
usuario una advertencia
Las clases se eliminan si el valor que representan es falso.
Agregar estilos para estas clases para hacer una interfaz de usuario mejor y más
intuitiva.
Las clases se eliminan si el valor que representan es falso.
Agregar estilos para estas clases para hacer una interfaz de usuario mejor y más
intuitiva.
Si el dato no tiene valor, se establece a true las siguientes expresiones:
•FormularioNombre.CampoNombre.$error.required
•FormularioNombre.CampoNombre.$invalid
La directiva en relación con el atributo html tiene como ventaja que puede activarse
según una expresión (es decir que seria requerido segun reglas de la aplicacion).
Si la expresión regular no valida el dato ingresado, el validador establece a true las
siguientes expresiones:
•FormularioNombre.CampoNombre.$error.pattern
•FormularioNombre.CampoNombre.$invalid
Ej de pattern
ng-pattern="/^[0-9]{1,7}$/“ //1 a 7 dígitos entre 0 y 9 , es decir un numero entero
sin comas ni punto de 0 a 9999999
Si se supera el máximo establecido, el validador establece a true las siguientes
expresiones:
•FormularioNombre.CampoNombre.$error.maxlength
•FormularioNombre.CampoNombre.$invalid
En relación con el atributo html, tenemos como ventaja que puede ser una
expresión (no un valor fijo)
La forma en la que podemos trabajar nuestras aplicaciones y su interfaz de usuario
pueden implicar cambios en los estilos, estos cambios se reflejan mayormente en las
aplicaciones más modernas con cambios en las clases CSS de los elementos, con ello
podemos lograr colocar colores, cambiar de disposición, etc., nuestros elementos
HTML.
AngularJS nos permite hacer estos cambios de manera dinámica cuando el modelo
cambia, así podremos vincular como luce la aplicación en conjunto a su
funcionamiento, para ello tenemos dos formas una utilizando interpolación
(evaluando una expresión {{}}, usado en el ejemplo de la ppt ) y la segunda con la
directiva ng-class.
Sintaxis segunda opción
ng-class="{'btn':true, 'btn-danger': tipoDangerSuccess, 'btn-success':
!tipoDangerSuccess}“
donde la expresión en un objeto cuyas propiedades son las clases seteadas si se
evalúan en true;
Metodos de los Modulos:
● Controller(): permite definir los controladores de la aplicacion.
● Config(): En el ciclo de vida de la aplicación AngularJS nos permite configurar
ciertos elementos antes de que los módulos y servicios sean cargados. Esta
configuración la podemos hacer mediante el módulo que vamos a utilizar
para la aplicación. El módulo posee un método config() que aceptará como
parámetro una función donde inyectaremos las dependencias y las
configuraremos. Este método es ejecutado antes de que el propio módulo sea
cargado.
● Run(): En algunas ocasiones necesitaremos configurar otros servicios que no
hayan sido declarados con el método provider del módulo. Para esto el
método config del módulo no nos funcionará ya que los servicios aún no han
sido cargados, incluso ni siquiera el módulo. AngularJS nos permite configurar
los demás elementos necesarios de la aplicación justo después de que todos
los módulos, servicios han sido cargados completamente y están listos para
usarse. El método run() del módulo se ejecutará justo después de terminar
con la carga de todos los elementos necesarios de la aplicación. Este método
también acepta una función como parámetro y en esta puedes hacer
inyección de dependencia. Como todos los elementos han sido cargados
puedes inyectar lo que sea necesario. Este método es un lugar ideal para
configurar los eventos ya que tendremos acceso al $rootScope donde
podremos configurar eventos para la aplicación de forma global. Otro de los
usos más comunes es hacer un chequeo de autenticación con el servidor,
escuchar para si el servidor cierra la sesión del usuario por tiempo de
inactividad cerrarla también en la aplicación cliente. Escuchar los eventos de
cambios de la ruta y del servicio $location. La Sintaxis es esencialmente igual
a la del método config.
● Directivas: permite definir nuestras propias directivas que usamos en el html
como se usan las directivas provistas por angular.
● Filtros: permite definir filtros personalizados, que se usarán para formatear
una expresión al presentarla en la vista.
● Cada aplicación web está compuesta de objetos que colaboran para conseguir el
objetivo de la misma. Estos objetos deben ser instanciados y comunicados entre
sí para que la aplicación funcione. En las aplicaciones AngularJS la mayoría de
estos objetos se instancian y comunican entre si automaticamente mediante un
servicio denominado Inyector. El inyector necesita saber cómo instanciar estos
objetos, y debemos indicarme mediante una “receta” como hacerlo. En angular
existen 5 recetas para instanciar estos objetos. La más detallada, pero también la
más amplia es la receta “Provider”. Las cuatro restantes Services, Factory,
Value y Constant tienen diferencias sintácticas pero siempre basadas en la
receta “Provider”.
● El servicio $http es un servicio AngularJS que facilita la comunicación con los
servidores HTTP remotos a través del objeto XMLHttpRequest del navegador.
● La API de $http se basa en las API de promesas expuestos por el servicio $q.
Mientras que para los patrones de uso simples, esto no importa mucho, para el
uso avanzado es importante que se familiarice con estas API y las garantías que
ofrecen.
● El servicio $http es una función que toma un solo argumento - un objeto de
configuración - que se utiliza para generar una petición HTTP y devuelve una
promesa.
El objeto de configuracion tiene entre otras las siguientes propiedades:
● method Cadena de texto que describe e lmétodo HTTP que se usará para la
petición(‘GET’, ‘POST’,‘PUT’,‘PATCH’,‘DELETE’,etc.).
● url Dirección absoluta o relativa a la que se hará la petición.
● params Objeto de clave:valor que será enviado después de la
url(?clave=valor&llave2=valor2). Si el valor no es una cadena de texto será
convertido a JSON.
El objeto response devuelta por las funciones de exito o error, tiene estas propiedades:
● data - {string | Object} - El cuerpo de la respuesta transformada con las funciones
de transformación.
Habitualmente desde el servidor devolveremos objeto serializados como json que
vendrán dentro de response.data.
● Status - código de estado HTTP de la respuesta - {número}.
● headers - {function ([headerName])} - Función de obtener cabecera.
● Config - {objeto} - El objeto de configuración que se utilizó para generar la
solicitud.
● StatusText - {cadena} - HTTP texto de estado de la respuesta.
Un código de estado de respuesta entre 200 y 299 se considera un estado de éxito y
hara que se ejecute la funcion successCallback; cualquier otro código de estado de
respuesta fuera de esa gama se considera un estado de error y hara que se ejecute la
funcion errorCallback.
Existen sintaxis alternativas de $http según el verbo http a usar; por ej $http.get usa el
método get para hacer la petición al servidor:
myApp.controller("ArticulosFamiliasController",
function ($scope, $http) {
$http.get('/api/ArticulosFamilias')
.then(function (response) {
$scope.Lista = response.data;
});
}
);
Explicación de ejemplo: se invoca el Controlador ArticulosFamlias con el verbo get y si la
respuesta es exitosa devuelve una lista de ArticulosFamilias, en este caso si la respuesta
da error no se ejecuta ninguna función porque esta no se ha definido.
Ejemplo get con parametros (en c# cada parametro debe tener el mismo nombre que
cada propiedad del objeto params)
params = { Nombre: $scope.DtoFiltro.Nombre, Activo: $scope.DtoFiltro.Activo,
numeroPagina: 1 };
$http.get('/api/Articulos', { params: params }).then(function (response) {
...
});
Ejemplo post con parametros (un objeto) (en c# el objeto recibido de parametro debe
tener los mismos nombre de propiedades que el objeto pasado desde javascritp; en este
caso Articulo)
$http.post('/api/Articulos/', $scope.Articulo).then(function (response) {
...
});
● Existen muchos escenarios cuando se necesita capturar y realizar algunos
cambios en cada solicitud, por ejemplo, si desea insertar un token de sesión en
cada solicitud web para la autorización de manera similar, puede ser necesario
capturar cada respuesta para realizar algunas acciones en datos como el
tratamiento global de errores para ello se crean interceptores de API para estos
escenarios
● Los interceptores HTTP de angulare se pueden utilizar para pre y postproceso
solicitudes HTTP. Pre-procesamiento ocurre antes de ejecutar solicitudes. Esto
se puede utilizar para cambiar las configuraciones de la petición. Postprocesado
sucede una vez que se han recibido respuestas. Las respuestas pueden ser
transformados a través de post-procesamiento. el manejo global de error, la
autenticación, animaciones de carga y muchos más temas transversales se
pueden implementar con interceptores HTTP. El siguiente listado muestra cómo
se pueden utilizar una petición (pre-procesamiento) y la respuesta del interceptor
(post-procesamiento).
● Los interceptores están registrados en el servicio $httpProvider añadiéndolos al
array $httpProvider.interceptors. Los interceptores ejecutan en el orden en el que
aparecen en el array mencionado anteriormente, durante la fase de petición.
Para la fase de respuesta, que se ejecutan en orden inverso. La siguiente imagen
ilustra el proceso y debe ayudar a entender la parte orden inverso.
$q: Un servicio que le ayuda a ejecutar funciones de forma asíncrona y utilizar sus
valores de retorno (o excepciones) cuando se terminan de procesar.
Hay cuatro interceptores diferentes que se puede manejar, y estas cuatro funciones
deben estar en una Factory de interceptor en donde personalizar el comportamiento de
cada una.
● Request Interceptor:
Un interceptor de solicitud se invoca en cada petición de http, puede cambiar los
datos de solicitud aquí como agregar un de token de autorización.
● Response Interceptor:
Un interceptor de respuesta se invoca en cada respuesta del servidor remoto,
aqui puede verificar los datos de la respuesta para ejecutar algunas acciones
segun dichos datos.
● Request Error Interceptor:
Un interceptor de petición erronea será invocada si hay algún error al invocar la
peticion al servidor remoto, tales como si faltara algun encabezado o no hubiese
conexion a Internet. Aquí se puede validar la solicitud y reenviarla al servidor
remoto.
● Response Error Interceptor:
Un interceptor de respuesta erronea será invocada si hay error en la respuesta
del servidor remoto, como alguna excepción no controlada en el servidor. Aquí
se puede manejar la petición, mostrando el mensaje adecuado al usuario o
volver a enviar la solicitud a la misma URL o alguana alternativa si está
disponible.
$httpProvider es un objeto intrinseco de Angular que contiene una serie de
interceptores registrados. Un Interceptor es una Factory de AngularJS, puede registrar su
propio inteceptor agregandolo al array de interceptores de httpProvider.Inteceptors al
configurar su Aplicacion.
Los filtros para filtrar y order datos son:
● El filtro filter permite filtrar el array de datos, recibe de parámetro una
expresión de filtro.
● El filtro OrderBy permite ordenar un array de datos.
Existe un uso más avanzado cuando trabajamos con una lista de objetos en la cual
podemos definir sobre que propiedad filtrar y ordenar.
Los filtros de transformación/formatéo se aplican en expresiones, luego de la
expresión se usa el carácter “|” y el nombre del filtro
● Lowercase / Uppercase
● Currency
● Number
● LimitTo: Limita un array / string, en un número especificado de elementos /
caracteres
● Date
● Json: Formatea un objetos Json como string
Un single-page application (SPA), o aplicación de página única es una aplicación web
o es un sitio web que cabe en una sola página con el propósito de dar una experiencia
más fluida a los usuarios como una aplicación de escritorio. En un SPA todos (o la gran
mayoria) los códigos de HTML, JavaScript, y CSS se carga de una vez o los recursos
necesarios se cargan dinámicamente en forma asíncrona, a medida que se requieran en
la página y se van agregando, normalmente como respuesta de las acciones del usuario.
Si deseamos que nuestra aplicacion tenga varias páginas de la aplicación, pero también
desea que la aplicación sea un SPA, sin recarga la página, haremos uso del módulo
ngRoute ( angular-route.js )
Ej.
angular.module("myApp",['ngRoute'])
// fase de configuracion
.config(['$routeProvider', function ($routeProvider)
{
$routeProvider.
when('/inicio',
{
templateUrl: '/VistasAng/_inicio.html'
}).
when('/articulos', // url que en el html va
precedida de #,
// ej <li><a
href="#/articulos">Articulos</
a></li>
{
templateUrl:
'/VistasAng/_Articulos.html', // url de la plantilla
html
controller: 'ArticulosController' //
nombre del controlador de angular
}).
otherwise( // valor por defecto si
{
redirectTo: '/VistasAng/inicio' //si no
existe la ruta pedida, redirige a /inicio
});
}]);
Seguridad
La seguridad es algo que es muy importante tener en cuenta, cuando
trabajamos en web estamos expuestos a que nuestros servicios sean
atacados, donde el mismo puede ser para denegar el servicio, así como para
obtener de forma ilegal nuestros datos.
En AngularJS el formato JSON es particularmente el punto que debemos
proteger más, ya que es parte vital de la confección de nuestra aplicación,
aquí debemos tener en cuenta que los datos más delicados no podemos
darlos con una petición GET, ya que podríamos tener problemas de accesos
no autorizados.
Una de las formas de protegernos es siempre utilizar un método POST
cuando estamos trabajando con información delicada para la integridad de
nuestro ecosistema.
El CSRF (del inglés Cross-site request forgery o falsificación de petición en
sitios cruzados) es un tipo de exploit malicioso de un sitio web en el que
comandos no autorizados son transmitidos por un usuario en el cual el sitio
web confía.
Para evitarlo debemos trabajar con mecanismos como uso de Tokens que
solo nuestro sitio y su cliente reconozcan, así en la primera consulta se
establece esta cabecera y las siguientes peticiones si no vienen con dicha
cabecera deben ser rechazadas.
