No es la mejor manera, pero….
http://www.microsiervos.com/archivo/ordenadores/numeros-primos-css.html
No es la mejor manera, pero….
http://www.microsiervos.com/archivo/ordenadores/numeros-primos-css.html
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>
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
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>
Los nuevos estándar HTML5 y CSS3 han incorporado una serie de características interesantes pero, por desgracia, no todos los navegadores las han implementado en la misma medida. Y tenemos el problema de los navegadores antiguos.
Para saber si podemos usar una característica HTML5 es conveniente usar la siguiente página:
www.caniuse.com/
Nos indica a partir de que versión de navegador se puede usar y cual es el porcentaje global.
Si queremos asegurarnos que todos los navegadores usan una característica podemos usar Polyfill. Un polyfill es un código que nos permite ‘simular’ una característica HTML5 en navegadores que no la soporten.
Aquí hay una lista muy actualizada:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
La librería modernizr nos permite saber lo que podemos usar en un navegador:
https://modernizr.com/
http://picodotdev.github.io/blog-bitix/2015/04/nueva-visita-a-5-plus-opciones-de-hosting-para-aplicaciones/
app.js
var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); app.get('/', function(req, res){ res.sendfile('index.html'); }); users = []; io.on('connection', function(socket){ console.log('A user connected'); socket.on('setUsername', function(data){ console.log(data); if(users.indexOf(data) > -1){ socket.emit('userExists', data + ' username is taken! Try some other username.'); } else{ users.push(data); socket.emit('userSet', {username: data}); } }); socket.on('msg', function(data){ //Send message to everyone io.sockets.emit('newmsg', data); }) }); http.listen(3000, function(){ console.log('listening on localhost:3000'); });
index.html
<!DOCTYPE html> <html> <head><title>Hello world</title></head> <script src="/socket.io/socket.io.js"></script> <script> var socket = io(); function setUsername(){ socket.emit('setUsername', document.getElementById('name').value); }; var user; socket.on('userExists', function(data){ document.getElementById('error-container').innerHTML = data; }); socket.on('userSet', function(data){ user = data.username; document.body.innerHTML = '<input type="text" id="message">\ <button type="button" name="button" onclick="sendMessage()">Send</button>\ <div id="message-container"></div>'; }); function sendMessage(){ var msg = document.getElementById('message').value; if(msg){ socket.emit('msg', {message: msg, user: user}); } } socket.on('newmsg', function(data){ if(user){ document.getElementById('message-container').innerHTML += '<div><b>' + data.user + '</b>: ' + data.message + '</div>' } }) </script> <body> <div id="error-container"></div> <input id="name" type="text" name="name" value="" placeholder="Enter your name!"> <button type="button" name="button" onclick="setUsername()">Let me chat!</button> </body> </html>
function promiseSqrt(value){
return new Promise(function (fulfill, reject){
console.log(‘START execution with value =’, value);
setTimeout(function() {
fulfill({ value: value, result: value * value });
}, 0 | Math.random() * 1000);
});
}
var p = [0,1,2,3,4,5,6,7,8,9];
p.reduce(
function (sequence, value) {
return sequence.then(function() {
return promiseSqrt(value);
}).then(function(obj) {
console.log(‘END execution with value =’, obj.value,
‘and result =’, obj.result);
});
},
Promise.resolve()
).then(function() {
console.log(‘COMPLETED’);
});
https://www.todojs.com/controlar-la-ejecucion-asincrona/
function longRunningOperation(callback) {
// simulate a 3 second operation
setTimeout(callback, 3000);
}
function userClicked() {
console.log(‘starting a long operation’);
longRunningOperation(function () {
console.log(‘ending a long operation’);
});
}
// simulate a user action
userClicked();
Cada uno con su closure:
function longRunningOperation(callback) {
// simulate a 3 second operation
setTimeout(callback, 3000);
}
function webRequest(request) {
console.log(‘starting a long operation for request:’, request.id);
longRunningOperation(function () {
console.log(‘ending a long operation for request:’, request.id);
});
}
// simulate a web request
webRequest({ id: 1 });
// simulate a second web request
webRequest({ id: 2 });