如何在angular 6中使用Sql server连接？

Question

我在'Angular6'中使用了连接sqlserver.

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数据库获得结果.

我还想在我的Component中显示记录

user.component.html

<h1>Users</h1>

我可以导入server.js吗user.component.ts？
如果是,我怎么能这样做？

Answer 1

我认为你是误解角度.Angular运行到浏览器及其上下文仅限于此.

如果需要连接到数据库,则需要使用一些后端技术(如express和nodejs)作为发布的代码.

主要方式是公开一些后端服务,如REST服务,使用服务器端技术(nodejs,j2ee,php等)开发,然后使用Angular向他们请求数据.

一般来说,你应该使用角度达到这个目标 HttpClient

你应该寻找一个教程,像这样

请求数据的Angular示例

在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教程,服务部分