![Page 1: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/1.jpg)
© 2016 InterSystems Corporation. All rights reserved.
Connecting JSON, REST and AngularJS
![Page 2: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/2.jpg)
1 | © 2016 InterSystems Corporation. All Rights Reserved.
Objetivoq Orientación en REST, JSON y AngularJSq ¿Cómo usar estas tecnologías de forma conjunta?q Explorar los conceptos con ejemplos
Escenarioq Caché 2016.2 + Atelier
Introducción
![Page 3: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/3.jpg)
2 | © 2016 InterSystems Corporation. All Rights Reserved.
Trabajando con JSON
Connecting JSON, REST and AngularJS
![Page 4: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/4.jpg)
3 | © 2016 InterSystems Corporation. All Rights Reserved.
Esquema general
![Page 5: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/5.jpg)
4 | © 2016 InterSystems Corporation. All Rights Reserved.
Uso de formato JSON
![Page 6: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/6.jpg)
5 | © 2016 InterSystems Corporation. All Rights Reserved.
• http://json.org• JSON: JavaScript Object Notation• Formato de lectura legible• Contiene datos sin esquema• Basado en parejas clave/valor• Claves y cadenas literales se representan entre
comillas dobles• Se ignoran los espacios en blanco fuera de los
nombres de claves y valores
JSON – Introducción
![Page 7: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/7.jpg)
6 | © 2016 InterSystems Corporation. All Rights Reserved.
JSON – Representación de tipos de datosTipo Ejemplo
string ”iPhone6”
number 530.6
true true
false false
null – no value null
object {”model” : ”iPhone5”}
array [”red”,”green”,”blue”]
![Page 8: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/8.jpg)
7 | © 2016 InterSystems Corporation. All Rights Reserved.
Los objetos se encierran entre llaves — { … }Ejemplo…
{"model" : "iphone5" }
… es un objeto que contiene una propiedad “model” con el valor “iphone5”
JSON – Objetos
![Page 9: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/9.jpg)
8 | © 2016 InterSystems Corporation. All Rights Reserved.
En caso de varias parejas clave-valor, estas se separan por comasEjemplo…
{"model" : "iphone5","color" : "red","manufacturer" : "Apple"
}
JSON – Objetos
![Page 10: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/10.jpg)
9 | © 2016 InterSystems Corporation. All Rights Reserved.
• Los Arrays se encierran entre corchetes — [ … ]• Listas ordenadas que contienen cualquier tipo de datos• Cada elemento se separa por coma• Ejemplo…
["red", "green", "blue"]
[{"model" : "iphone4"},{"model" : "iphone5"}]
JSON – Arrays
![Page 11: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/11.jpg)
10 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Cuáles de estos cadenas es una sintaxis JSON válida?
JSON – Si has prestado atención
{ model } : { iphone5 }
{ "model" : "iphone5" }
A
B
![Page 12: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/12.jpg)
11 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Cuáles de estos cadenas es una sintaxis JSON válida?
JSON – Si has prestado atención
{ model } : { iphone5 }
{ "model" : "iphone5" }
Incorrecto
Correcto
![Page 13: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/13.jpg)
12 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Qué es necesario cambiar para que sea un Array JSON válido?
JSON – Si has prestado atención
["red", "green", blue]
![Page 14: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/14.jpg)
13 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Qué es necesario cambiar para que sea un Array JSON válido?
JSON – Si has prestado atención
["red", "green", blue]
["red", "green", "blue"]
Incorrect
Correcto
![Page 15: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/15.jpg)
14 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Cómo corregir la cadena para hacer un formato JSON válido?
JSON – Si has prestado atención
[{"model": "iphone5"} , ]
![Page 16: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/16.jpg)
15 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Cómo corregir la cadena para hacer un formato JSON válido?
JSON – Si has prestado atención
[{"model": "iphone5"} , ]
[{"model": "iphone5"}]
[{"model": "iphone5"},{"model": "nexus6"}]
Ununicoobjeto
Añadirotroobjeto
![Page 17: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/17.jpg)
16 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Cómo corregir la cadena para hacer un formato JSON válido?
JSON – Si has prestado atención
[ ["model" : "iphone5"] ]
![Page 18: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/18.jpg)
17 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Cómo corregir la cadena para hacer un formato JSON válido?
JSON – Si has prestado atención
[ ["model" : "iphone5"] ]
[ {"model" : "iphone5"} ]
Incorrecto
Correcto
![Page 19: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/19.jpg)
18 | © 2016 InterSystems Corporation. All Rights Reserved.
JSON
JSON vs. XMLXML
[
{"model" : "iphone5" },
{"model" : "iphone6" }
]
• Ligero• Sin esquema• Estructuras de datos complejas
creadas manualmente• Integración con Javascript
<devices>
<device model="iphone5"></device>
<device model="iphone6"></device>
</devices>
• Muy pesado• Estricto al esquema• Nuevos tipos de datos
completos reusables en el esquema
• Validable contra el esquema
![Page 20: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/20.jpg)
19 | © 2016 InterSystems Corporation. All Rights Reserved.
• API 2016.2• Implementada en el kernel de Caché (muy rápida)
• Creación de objetos JSON — %DynamicObject
JSON en Caché
Set json = {"model": "iphone5"}
![Page 21: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/21.jpg)
20 | © 2016 InterSystems Corporation. All Rights Reserved.
• Se pueden establecer propiedades directamenteset phone = {"model": "iphone5"}
set phone.price = 115.50
• Podemos obtener el valor de una propiedad por su nombrewrite phone.%Get("price")
write phone.%IsDefined("manufacturer")
• Podemos establecer el valor o eliminarlo a través del nombredo phone.%Set("manufacturer","Apple")
do phone.%Remove("price")
%DynamicObject API
![Page 22: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/22.jpg)
21 | © 2016 InterSystems Corporation. All Rights Reserved.
• Convertir de %DynamicObject a JSON string
set phone = {"model": "iphone5"}
write phone.%ToJSON()
• Convertir a %DynamicObject desde un JSON string
set jsonString = "{""model"": ""iphone5""}"
set obj = ##class(%DynamicObject)
.%FromJSON(jsonString)
%DynamicObject API
![Page 23: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/23.jpg)
22 | © 2016 InterSystems Corporation. All Rights Reserved.
• %GetIterator() devuelve un iterador util para recorrer todas sus propiedades
• Ejemplo…set iterator = phone.%GetIterator()
while iterator.%GetNext(.key,.value) {
write !, "Phone property name: ",key
write !, "Phone property value: ",value
}
%DynamicObject API
![Page 24: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/24.jpg)
23 | © 2016 InterSystems Corporation. All Rights Reserved.
• Creación de JSON arrays — %DynamicArrayset array = ["iphone5","nexus6"]
• El indice es 0-based (y no 1-based como $list, por ejemplo)
• Obtener el número de elementos del Array:write array.%Size()
• Valor del elemento i-esimo:write array.%Get(0)
write array."1"
%DynamicArray API
23
![Page 25: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/25.jpg)
24 | © 2016 InterSystems Corporation. All Rights Reserved.
• Establecer valores en el array:set array."1" = "HTC One"
do array.%Set(0,"LG G4")
• Establecer un indice mayor que el tamaño insertará nulos en los espacios intermediosEjemplo…
USER>set array = [1,2,3]
USER>set array."10" = 10
USER>write array.%ToJSON()
[1,2,3,null,null,null,null,null,null,null,10]
%DynamicArray API
24
![Page 26: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/26.jpg)
25 | © 2016 InterSystems Corporation. All Rights Reserved.
• %Push() añade elemento al final del array• %Pop() saca elelemento del final del array y lo devuelve
• %DynamicArray tambien implementa los métodos• %GetIterator()• %ToJSON()• %FromJSON()• %IsDefined() – El parámetro no será una propiedad sino un índice
%DynamicArray API
25
![Page 27: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/27.jpg)
26 | © 2016 InterSystems Corporation. All Rights Reserved.
Trabajando con REST
Connecting JSON, REST and AngularJS
![Page 28: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/28.jpg)
27 | © 2016 InterSystems Corporation. All Rights Reserved.
REST – Introducción
27
![Page 29: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/29.jpg)
28 | © 2016 InterSystems Corporation. All Rights Reserved.
• REST: Representational State Transfer• Es un patrón de diseño para servicios basados en web
• Diseño RESTful:• Cliente-Servidor• Sin estado• Interfaz uniforme
• Protocolo: HTTP• Formato de intercambio: JSON, XML, etc.• Síntaxis: URLs
REST – Introducción
28
![Page 30: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/30.jpg)
29 | © 2016 InterSystems Corporation. All Rights Reserved.
• HTTP: HyperText Transfer Protocol• REST se implementa sobre HTTP• Usa "verbos" para discriminar entre los tipos de solicitud• Con REST, los verbos se mapean con funciones "CRUD" para
aplicaciones con bases de datos
REST – un poco de HTTP
29
Verbo Operación CRUDPOST CreateGET ReadPUT UpdateDELETE Delete
![Page 31: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/31.jpg)
30 | © 2016 InterSystems Corporation. All Rights Reserved.
• En REST las URLs contienen información sobre:• Protocolo esperado• Localización del servidor• Recurso solicitado
http://www.mobilephones.com/phones/iPhone5
Protocolo Dirección del Servidor Recurso solciitado
REST – URLs
30
![Page 32: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/32.jpg)
31 | © 2016 InterSystems Corporation. All Rights Reserved.
• Es una URL RESTful?http://www.example.com/phonestore/getorder?id=12345
• No, aunque funcione como se espera y devuelva datos.• El prefijo "get" no es necesario en la URL; El verbo HTTP ya lo deja claro
• Un mejor ejemplo:http://www.example.com/phonestore/orders/12345
• Un punto importante acerca de la arquitectura REST: El criterio RESTfulno se ciñe a restricciones técnicas.
REST – Diseño de URLs RESTful
31
![Page 33: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/33.jpg)
32 | © 2016 InterSystems Corporation. All Rights Reserved.
• Para publicar servicios REST en Caché, se hace uso de una aplicación Web
• Las solicitudes se enrutan hacia la Dispatch Class definida para su procesamiento
REST – Usando REST en Caché
![Page 34: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/34.jpg)
33 | © 2016 InterSystems Corporation. All Rights Reserved.
• Las clases Dispatch heredan de %CSP.REST• Las clases REST contienen un bloque XData llamado UrlMap• El tag <Routes> contiene un número entradas <Route> para cada
patrón de URL que puede ser manejada por el servicio.
XData UrlMap [ XMLNamespace = "http://www.intersystems.com/urlmap" ]
{
<Routes>
<Route Url="/phones" Method="GET" Call="GetAllPhones" />
<Route Url="/phones/:id" Method="GET" Call="GetPhone" />
</Routes>
}
REST – Código de Dispatch Class
![Page 35: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/35.jpg)
34 | © 2016 InterSystems Corporation. All Rights Reserved.
<Route Url="/phones" Method="GET" Call="GetAllPhones" />
• Cada <Route> contiene los atributos Url, Method, y Call.• Url especifica el patrón sobre el que se casa la URL invocada
• No incluye el prefijo de la aplicación CSP• Method es el verbo HTTP• Call apunta al ClassMethod en la clase REST, o en otra clase.
<Route Url="/phones/:id" Method="GET" Call="GetPhone" />
• Se especifican parámetros anteponiendo “:” que se pasan como argumentos al método invocado
REST – Enrutamiento UrlMap
![Page 36: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/36.jpg)
35 | © 2016 InterSystems Corporation. All Rights Reserved.
GET http://localhost:57779/phoneapp/api/phones/5
XData UrlMap [ XMLNamespace = "http://www.intersystems.com/urlmap" ]{
<Routes><Route Url="/phones" Method="GET" Call="GetAllPhones" /><Route Url="/phones/:id" Method="GET" Call="GetPhone" /></Routes>
}
GetPhone(id As %String = "") As %Status { … }
REST – Procesando una Solicitud
![Page 37: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/37.jpg)
36 | © 2016 InterSystems Corporation. All Rights Reserved.
Responses to REST requests must include:§ Escribir resultados sobre el Device actual (CSP == %response)§ Devolver el status
GetPhone(id As %String = "") As %Status {
set phoneObject = ##class(demo.phones.phone).%OpenId(id)
write phoneObject.ToJsonString()
quit 1}
REST – Procesando una solicitud
![Page 38: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/38.jpg)
37 | © 2016 InterSystems Corporation. All Rights Reserved.
• Detalles de implementación en Caché:1. Todas las solicitudes se manejan por una aplcación Web definida2. La aplicación CSP application dirije la solicitud hacia la Dispatch Class3. El UrlMap de la Dispatch Class vincula el patrón de la URL con un
método de clase
REST – Resumen
![Page 39: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/39.jpg)
38 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Es esta una definición de ruta válida?
REST – Si has estado atento
<Route Url="http://localhost:57772/phoneapp/phones/"
Method="GET"
Call="GetPhones" />
![Page 40: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/40.jpg)
39 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Es esta una definición de ruta válida?
REST – Si has estado atento
<Route Url="http://localhost:57772/phoneapp/phones/"
Method="GET"
Call="GetPhones" />
No. La Url no puede contener la ruta absoluta.
![Page 41: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/41.jpg)
40 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Es esta una definición de ruta válida?
REST – Si has estado atento
<Route Url="/phones"Call="GetPhone" />
![Page 42: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/42.jpg)
41 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Es esta una definición de ruta válida?
REST – Si has estado atento
<Route Url="/phones"Call="GetPhone" />
No. The Method attribute is not set.
![Page 43: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/43.jpg)
42 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Es esta una definición de ruta válida?
REST – Si has estado atento
<Route Url="/phones/:id"Method="GetPhone"Call="GET" />
![Page 44: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/44.jpg)
43 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Es esta una definición de ruta válida?
REST – Si has estado atento
<Route Url="/phones/:id"Method="GetPhone"Call="GET" />
No. The Method and Call attributes are reversed.
![Page 45: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/45.jpg)
44 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Es esta una definición de ruta válida?
REST – Si has estado atento
<Route Url="/phones"Method="GET"Call="demo.phones:GetPhones" />
![Page 46: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/46.jpg)
45 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Es esta una definición de ruta válida?
REST – Si has estado atento
<Route Url="/phones"Method="GET"Call="demo.phones:GetPhones" />
Sí! De esta manera se indica que el método está en otra clase"<class>:<method>"
![Page 47: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/47.jpg)
46 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Es esta una definición de ruta válida?
REST – Si has estado atento
<Route Url="/phones/:model/:manufacturer"Method="GET"Call="GetPhoneTypes" />
![Page 48: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/48.jpg)
47 | © 2016 InterSystems Corporation. All Rights Reserved.
Seras capaz de resolver…
¿Es esta una definición de ruta válida?
REST – Si has estado atento
<Route Url="/phones/:model/:manufacturer"Method="GET"Call="GetPhoneTypes" />
Sí
![Page 49: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/49.jpg)
48 | © 2016 InterSystems Corporation. All Rights Reserved.
Trabajando con AngularJS
Connecting JSON, REST and AngularJS
![Page 50: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/50.jpg)
49 | © 2016 InterSystems Corporation. All Rights Reserved.
Angular.JS role in overall system
AngularJS — Introduction
![Page 51: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/51.jpg)
50 | © 2016 InterSystems Corporation. All Rights Reserved.
• Model — View — Controller• Patrón de diseño para construir aplicaciones
• Separación de responsabilidades• modulariza el código de la aplicación
• Ejemplo:
AngularJS — Patrón de diseño MVC
50
Model Database server (Caché)View Template (HTML)Controller Client code (JavaScript)
![Page 52: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/52.jpg)
51 | © 2016 InterSystems Corporation. All Rights Reserved.
AngularJS MVC
![Page 53: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/53.jpg)
52 | © 2016 InterSystems Corporation. All Rights Reserved.
• Angular.js es un framework JavaScript para construir aplicaciones Web• Controllers
• Funciones JavaScript• Gestionar entradas del usuario• Realizar solicitudes a las APIs (nuestro servicio REST)
• View• Página HTML• Utiliza una sintaxis especial para conectar las entradas al Controller
• Se establecen Data bindings entre Controllers y Views
AngularJS — Controllers y Views
52
![Page 54: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/54.jpg)
53 | © 2016 InterSystems Corporation. All Rights Reserved.
• Por convenio, el modulo $scope se usa para asociar datos entre los Controllersy Views.
• En el código del Controller, se utiliza la sintaxis tradicional para establecer propiedades• $scope.property = data;
• En la plantilla HTML:• La sintaxis con doble llave asocia el valor para un vinculo "one-way"
• Ejemplo: <h1>{{name}}</h1> para mostrar el valor de $scope.name• El atributo ng-bind es equivalente a la sintais con doble llave
• Ejemplo: <h1 ng-bind="name"> para mostrar el valor de $scope.name• El atributo ng-model se usa para establecer un vinculo de datos two-way
• Ejemplo: <input type="text" ng-model="name">• Muestra el valor actual de $scope.name• Adicionalmente el texto tecleado se establecerá en $scope.name
AngularJS — Data Binding
53
![Page 55: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/55.jpg)
54 | © 2016 InterSystems Corporation. All Rights Reserved.
• Angular proporciona un módulo $http para realizar solicitudes HTTP• El modulo tiene métodos para cada verbo HTTP:
• Ejemplo: $http.get(), $http.post(), $http.put(), $http.delete()
• Las solicitudes HTTP se ejecutan de manera asíncrona• Se utilizan métodos de Callback para manejar la respuesta con exito o
con error
AngularJS — modulo $http
54
![Page 56: Connecting JSON, REST and AngularJS - Database … · • Angular.js es un framework JavaScript para construir aplicaciones Web • Controllers](https://reader031.vdocuments.mx/reader031/viewer/2022022109/5b6cacf97f8b9a0d578bea8b/html5/thumbnails/56.jpg)
55 | © 2016 InterSystems Corporation. All Rights Reserved.
Gracias!
Questions?