Autor: Juan Pablo Fuentes

Formador de programación y bases de datos

Mini layout

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>

<body>

<div style=»background-color:blue;height:200px»>título
</div>
<div>
<div style=»background-color:orange;height:600px;width:20%;float:right»>Barra</div>
<div style=»background-color:#BBBBBB;height:600px»>Contenido</div>
</div>
<div style=»background-color:blue;height:100px»>Pie</div>
</body>

</html>

Ejemplo muy simple angular

core.js

var actores = angular.module('actores', []);

function mainController($scope, $http) {
	$scope.formData = {};

	// when landing on the page, get all todos and show them
	$http.get('http://localhost/api.php/actor/')
		.success(function(data) {
			$scope.actores = data;
		})
		.error(function(data) {
			console.log('Error: ' + data);
		});


}

index.html

<!doctype html><!doctype html>
<!-- ASSIGN OUR ANGULAR MODULE --><html ng-app="actores"><head> <!-- META --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
 <title>Angular actor App</title>
 <!-- SCROLLS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- load bootstrap -->
 <!-- SPELLS -->
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script><!-- load angular --> <script src="core.js"></script>
</head>
<!-- SET THE CONTROLLER AND GET ALL actores WITH INITIALIZE FUNCTION --><body ng-controller="mainController"> 
<div class="container">
 <!-- HEADER AND actor COUNT --> 
<div class="jumbotron text-center"> 
<h1>Actores <span class="label label-info">{{ actores.length }}</span></h1> </div>
 <!-- actor LIST --> 
<div id="actor-list" class="row">
 <div class="col-sm-4 col-sm-offset-4">
 <!-- LOOP OVER THE actores IN $scope.actores --> 
<div class="checkbox" ng-repeat="actor in actores"> 
<label> {{ actor.first_name }} {{ actor.last_name }} </label> </div>
 </div> 
</div>
 </div>
</body></html>

Consumir servicios rest con angular

Algunas páginas muy explicativas:

https://carlosazaustre.es/blog/tutorial-ejemplo-de-aplicacion-web-con-angular-js-y-api-rest-con-node/

https://www.cursoangularjs.es/

https://www.toptal.com/angular-js/un-tutorial-paso-a-paso-para-tu-primera-aplicaci%C3%B3n-angularjs/es

Websocket

HTML5 incorpora tecnología de websockets:

https://developer.mozilla.org/es/docs/Web/API/WebSocket

Usarla en javascript es fácil. Para el siguiente ejemplo utilizamos la página echo.websocket.org que acepta conexiones y devuelve lo mismo que le mandas (echo)

<!DOCTYPE html>
<meta charset=»utf-8″ />
<title>WebSocket Test</title>
<script language=»javascript» type=»text/javascript»>

var wsUri = «ws://echo.websocket.org/»;
var output;

function init()
{
output = document.getElementById(«output»);
testWebSocket();
}

function testWebSocket()
{
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) { onOpen(evt) };
websocket.onclose = function(evt) { onClose(evt) };
websocket.onmessage = function(evt) { onMessage(evt) };
websocket.onerror = function(evt) { onError(evt) };
}

function onOpen(evt)
{
writeToScreen(«CONNECTED»);
doSend(«WebSocket rocks»);
}

function onClose(evt)
{
writeToScreen(«DISCONNECTED»);
}

function onMessage(evt)
{
writeToScreen(‘<span style=»color: blue;»>RESPONSE: ‘ + evt.data+'</span>’);
websocket.close();
}

function onError(evt)
{
writeToScreen(‘<span style=»color: red;»>ERROR:</span> ‘ + evt.data);
}

function doSend(message)
{
writeToScreen(«SENT: » + message);
websocket.send(message);
}

function writeToScreen(message)
{
var pre = document.createElement(«p»);
pre.style.wordWrap = «break-word»;
pre.innerHTML = message;
output.appendChild(pre);
}

window.addEventListener(«load», init, false);

</script>

<h2>WebSocket Test</h2>

<div id=»output»></div>