使用 Typescript 在 Angular2 下进行续集

Question

我是 Angular 的新手，刚刚开始了解它的工作原理。互联网，请温柔一点……

我已经通过英雄之旅完成了 Angular2 5 分钟快速入门，并且可以正常运行。现在我正在尝试连接到我的本地 MS SQL 服务器，因为我有一个基于 SQL 的项目，其中 Angular2 是所需的平台。几天来，我一直在努力让 Sequelize 工作，真的需要一些帮助。

到目前为止，我根据阅读的不同内容做了什么：

• 使用npm安装sequelize，验证sequelize和lodash、bluebird、validator的依赖都存在于node_modules下
• 从GitHub上的DefinitelyTyped项目下载bluebird.d.ts、lodash.d.ts、sequelize.d.ts和validator.d.ts并将它们放在我的typings文件夹中
• 在 tsConfig.json 中，我将 compilerOptions --> 目标从 es5 更改为 es6
• 创建了一个简单的 db.component.ts 文件（见下文）
• 更新 app.component.ts 以导入 db.component 并为其添加路由

此时出现了简单页面，但我无法弄清楚如何让 Sequelize 正常工作。

我看到的脚本错误（基于使用 Visual Studio Code 作为我的编辑器）：

• 当我打开 sequelize.d.ts 时，'declare module "sequelize" {' 行出现错误，指出“环境模块不能嵌套其他模块”
• 当我打开 lodash.d.ts 时，第 239 行和第 240 行（下划线）出现错误，指出“重复标识符 '_'”

我已经尝试了许多不同的方法（猜测）来了解如何让 sequelize 连接到我的数据库，但就是无法正常工作。我知道我需要（两者？）在 db.component.ts 文件中导入和/或需要，但最终只会在 IDE 中作为错误语法或在浏览器 (Chrome) 中出现错误。

我确实明白，从长远来看，我在这里测试的路由/配置/等不会是“正确”的方法，但我只需要通过基本证明 -概念上我可以在重新设计数据库之前对它做一些事情（例如 - 我可以连接到数据库并查询一个表）

app.component.ts

import { Component }            from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';

import { DashboardComponent }   from './dashboard.component';
import { HeroService }          from './hero.service';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';

import { dbComponent }          from './db.component';

@Component({
    selector: 'my-app',
    template: `
        <h1>{{title}}</h1>
        <nav>
            <a [routerLink]="['Dashboard']">Dashboard</a>
            <a [routerLink]="['Heroes']">Heroes</a>
        </nav>
        <router-outlet></router-outlet>
    `,
    styleUrls: ['app/app.component.css']
    directives: [ROUTER_DIRECTIVES],
    providers: [
        ROUTER_PROVIDERS,
        HeroService
    ]
})

@RouteConfig([
    {
        path: '/dashboard',
        name: 'Dashboard',
        component: DashboardComponent,
        useAsDefault: true
    },
    {
        path: '/heroes',
        name: 'Heroes',
        component: HeroesComponent
    },
    {
        path: '/detail/:id',
        name: 'HeroDetail',
        component: HeroDetailComponent
    },
    {
        path: '/sql',
        name: 'SqlTest',
        component: dbComponent
    }   
])

export class AppComponent {
  title = 'Sample App';
}

db.component.ts

/// <reference path="../typings/sequelize.d.ts" />

import { Component, OnInit }            from 'angular2/core';
import Sequelize = require('sequelize');  <-- I dont know if this is doing anything

//- This just errors out with require not being found (tds@latest installed)
//var Sequelize = require("sequelize");

//- I know this goes somewhere, but I have no idea where
//var sql = new Sequelize('dbName', 'uName', 'pw', {
//  host: "127.0.0.1",
//  dialect: 'mssql',
//  port: 1433 <-- SqlExpress
//});

@Component({
    selector: 'my-sql',
    template:`
        <h1>SQL Test</h1>
    `
})

export class dbComponent implements OnInit {

    constructor(
    ) { }

    auth() {
        console.log('auth');
        //sql.authenticate().then(function(errors) { console.log(errors) });
    }

    ngOnInit() {
        console.log('onInit');
        this.auth();
    }
}

我的 console.log 消息即将出现，所以我相信我的核心功能基本上可以工作，但我不知道我需要做什么才能让 Sequelize 正常工作。

我缺少一块拼图，对此我束手无策。在此先感谢您的任何指导...

Answer 1

好的，首先 Sequelize 是 Javascript，但我想不出一个很好的理由为什么你会想在 angular2 是前端使用它。

拥有我的“英雄之旅”Angular2 应用程序与能够调用数据库之间有很多步骤。

1：你真的需要创建一个服务器，NodeJS 太棒了！你可以做这样的事情来开始：

var express = require('express');

var http = require('http');
var path = require('path');
var bodyParser = require('body-parser');
var mysql = require('ms-sql');//Note not entirely sure if this is the correct library for MS-SQL Server I would google how to use this.

var app = express();  
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));

所以在我们走得更远之前，我想指出您需要将 Angular 应用程序放在公共目录中。您还需要获取 MS-SQL 库，并下载其他包，包括 express 和 body-parser。我会先使用npm install express-generator -g，然后转到目录并在命令行中输入express myapp。

虽然我们还没有完成我们的服务器！接下来我们将让它工作。

var server = http.createServer(app);

server.listen(app.get('port'), function(){
  console.log('Express server listening on port ' + app.get('port'));
});

然后将其放入文件中，然后在命令控制台中输入node myapp.js，您的服务器应该已启动并运行！

现在我们需要将我们的 Angular2 应用程序发送给它。

app.get('/', function(req, res){
    res.render('index.html');
});

这表示查看公用文件夹并找到 index.html 并显示它。这就是我们从 Node 启动 Angular2 的方式！

现在我们的服务器已启动并运行，让我们创建一个路由，以便我们可以从 ms-sql 获取应用程序的详细信息。我要作弊，因为我不知道 ms-sql，但在 MySQL 中它相当容易。只需将其添加到与其他所有内容相同的节点文件中：

app.use(

    connection(mysql,{

        host: 'localhost',//or the IP address
        user: 'root',
        password : 'myPassword',
        port : 3306, //port mysql
        database:'myDatabaseName'
    },'request')
);

现在我们终于可以从我们的服务器获取数据了。

app.get('/api/heroes', function(req, res){
    req.getConnection(function(err,connection){

       connection.query("SELECT ID, ROLE_NAME, DESCRIPTION, ACTIVE_FLAG FROM ROLES",function(err,rows)     {

           if(err)
               console.log("Error Selecting : %s ",err );

           res.json({data:rows});

        });

     });
});

你会注意到我在函数调用中发送了我的行，并用一个新的名字 -> 数据发送回来。

现在要在我想要获取数据的组件中的 Angular2 中调用它，我会从 ngOnInit 调用它。最好把这个变成服务，然后调用服务的函数，但我不会那么深入。但是你可以这样称呼它

import { Component, OnInit }            from 'angular2/core';
import {Http} from 'angular2/http':


@Component({
    selector: 'my-sql',
    template:`
        <h1>SQL Test</h1>
         {{myData}}
    `
})

export class dbComponent implements OnInit {

    myData: any;
    constructor(public http: Http) { }


    ngOnInit() {
        this.http.get('api/heroes/').map((response => this.myData = response.json().data));
    }
}

请注意，这里发生了很多事情。我正在将类 Http 实现到我的构造函数中，以便我可以使用 this.http 调用它！还要注意我是如何导入 Http 类的。

然后在 ngOnInit 中，我使用我的 http 类并从我的服务器调用我的 api，并将我的 this.myData 分配给我的 response.json().data 因为记住数据是我们从服务器传回的名称？您实际上不需要添加它，它可能会让您在收到 JSON 时更容易处理它。

至于 Sequelize，我不完全确定它是如何工作的，因为我没有使用过它，但您可以使用它来代替我们使用 MySQL 的方式。

希望这会引导您朝着正确的方向前进。

Answer 2

据我所知，Sequelize 是后端的一种形式。您的问题的解决方案是创建 api（如果您想使用 Sequelize，则可能使用 nodeJs），您的前端应用程序可以与之交谈。