Ajax desde nodeJS con angular
Instalamos el paquete jQuery
npm
install jquery
Creamos la siguiente ruta
var router = express.Router();
router.get('/', function(req, res, next) {
var listausuarios = ['juan','pedro','maria','antonio','luis'];
res.send({
usuarios : listausuarios //Envia datos en formato JSON
});
});
module.exports = router;
En el modulo creamos una lista de
usuarios y enviamos la respuesta como JSON
Insertamos en el modulo principal
que use la ruta:
app.use('/ajax',ajax);
Si
estamos en localhost nuesta ruta de peticion de datos es:
http://localhost:4200/ajax
Creamos un
archivo llamado index.html:
<head>
<meta http-equiv="Content-type" content="text/html">
<title>Ejemplo angular</title>
<script src="./viewsfiles/javascripts/miSriptNavegador.js"></script>
</head>
<body>
<button id="boton" name="boton">Pulsar</button>
<div ng-controller="controlador as c">
<div ng-show="c.getMostrar()">
<div ng-repeat="dato in c.usuarios">
{{dato}}
</div>
</div>
</div>
</body>
</html>
Donde insertamos el script:
<script src="./viewsfiles/javascripts/miSriptNavegador.js"></script>
Creamos un archivo
llamado miScript.js:
var $ = require('jquery');
(function () {
var app = angular.module('prueba', []);
var lista=null;
app.controller('controlador',function($scope, $http) {
var lista = this;
this.usuarios=[];
this.getMostrar = function () {
return true;
};
$("button#boton").click(function(){
$http.get('/ajax')
.then(function successCallback(res) {
lista.usuarios = res.data.usuarios;
})
});
});
})();
Donde
el controlador tiene una variable lista que tiene los siguientes objetos:
var lista = this;
this.usuarios=[];
this.getMostrar = function () {
return true;
};
Al
hacer onclick en el boton del html
$http.get('/ajax')
.then(function successCallback(res) {
lista.usuarios = res.data.usuarios;
})
});
Asigna
los datos leidos en lista.usuarios.
Ejecutamos
el comando siguiente para adaptar el modulo a nodeJS:
npm
run browser