我已经使用sqlserver
在“ Angular6”中建立了连接。
server.js
var express = require('express');
var app = express();
app.get('/', function (req, res) {
var sql = require("mssql");
// config for your database
var config = {
user: 'abc',
password: 'abc',
server: 'servername',
database: 'xyz'
};
// connect to your database
sql.connect(config, function (err) {
if (err) console.log(err);
// create Request object
var request = new sql.Request();
// query to the database and get the records
request.query('select * from tbl', function (err, recordset) {
if (err) console.log(err)
// send records as a response
res.send(recordset);
});
});
});
var server = app.listen(5000, function () {
console.log('Server is running..');
});
data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http: HttpClient) { }
getUsers() {
return this.http.get('https://jsonplaceholder.typicode.com/users')
}
getUser(userId) {
return this.http.get('https://jsonplaceholder.typicode.com/users/'+userId)
}
getPosts() {
return this.http.get('https://jsonplaceholder.typicode.com/posts')
}
getPhotos()
{
return this.http.get('https://jsonplaceholder.typicode.com/photos');
}
getTodos()
{
return this.http.get('https://jsonplaceholder.typicode.com/todos');
}
}
现在我已经使用了虚拟api作为结果。
如何获得服务中的数据库结果?
我已成功从Sqlserver数据库中获取结果。
我也想在组件中显示记录
user.component.html
<h1>Users</h1>
我可以在user.component.ts
中导入server.js吗?
如果可以,我该怎么办?
答案 0 :(得分:7)
我认为您误会了棱角。 Angular碰到浏览器,其上下文仅限于此。
如果需要连接到数据库,则需要使用某些后端技术(例如express和nodejs)作为发布的代码。
主要方法是公开一些后端服务(例如REST服务),这些服务是使用服务器端技术(nodejs,j2ee,php等)开发的,然后使用Angular询问它们的数据。
通常要实现这个目标,您应该使用HttpClient
您应该搜索一个教程,例如this
请求数据的角度示例
在angular中,您应该创建一个服务类来调用您的公开服务,然后可以在该类中创建一个如下所示的方法:
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs';
import {Injectable} from '@angular/core';
import {catchError, map, tap} from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class TestService {
get(): Observable<any> {
return this.http.get([YOUR_BACKEND_SERVICE_URL]).pipe(
catchError(this.handleError(`get`))
);
}
private handleError<T>(operation = 'operation', result?: T) {
return (error: any): Observable<T> => {
console.error(error);
this.log(`${operation} failed: ${error.message}`);
return of(result as T);
};
}
}
然后,您应该编写这样的组件:
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
data: any;
constructor(private testService: TestService) { }
ngOnInit() {
this.getData();
}
getData(): void {
this.testService.get().subscribe(data => console.log(data));
}
}
您需要使用AngularCli
创建服务和组件,以避免手动声明并将它们导入app.module.ts
为了更好地了解正在发生的事情,建议您阅读Angular Tour of Heroes tutorial, Services section