Servidor:
package.json
{
"name": "servidor",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.18.2",
"express": "^4.16.2",
"method-override": "^2.3.10",
"mysql": "^2.15.0"
}
}
app.js
var express = require("express"),
app = express(),
bodyParser = require("body-parser"),
methodOverride = require("method-override");
app.use(function (req, res, next) {
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);
// Pass to next layer of middleware
next();
});
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(methodOverride());
var router = express.Router();
router.get('/', function(req, res) {
res.send("Hello World!");
});
router.get('/prueba', function(req, res) {
var p = [{nombre: 'carlos', apellido: 'russo'},
{nombre: 'karina', apellido: 'ortiz'}];
res.send(p);
});
router.get('/sql', function(req, res) {
var mysql = require('mysql');
var con = mysql.createConnection({
host: "Xmantis",
user: "root",
password: "p23423423023r2234234rd",
port: 3360,
database: "mantis"
});
con.connect(function(err) {
if (err) throw err;
console.log("Connected!");
});
con.query(
'SELECT * FROM X_sector WHERE id > ? and id < ?',[ 4, 20 ],
function (err, results) {
console.log(results);
res.send(results);
}
);
});
app.use(router);
app.listen(8080, function() {
console.log("Node server running on http://localhost:8080");
});
Para hacerlo funcionar:
npm install
nodemon app.js (si no esta instalado nodemon, instalarlo con
npm install -g nodemon)
y probarlo con:
http://localhost:8080/prueba
Cliente
package.json
{
"name": "cliente",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/cli": "^1.6.5",
"@angular/compiler-cli": "^5.0.0",
"@angular/language-service": "^5.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.2"
}
}
datos.service.ts
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class DatosService {
constructor(public http: Http) { }
result:any;
desplegar() {
return this.http.get("http://localhost:8080/sql")
.map(res => res.json());
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { DatosService } from './datos.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpModule
],
providers: [DatosService],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { DatosService } from './datos.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
datos : any;
constructor(private data : DatosService) {}
desplegar() {
this.data.desplegar().subscribe((posts) => {
console.log(posts);
this.datos = posts;
});
}
}
app.component.html
<h1>Prueba MySql</h1>
<button (click)='desplegar()'>Click!!</button>
<ul>
<li *ngFor="let d of datos">{{ d.nombre }}</li>
</ul>
