在带有 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，并将它们放入我的打字文件夹中
在 tsConfig.json 中，我将编译器选项 --> 目标从 es5 更改为 es6
创建了一个简单的 db.component.ts 文件（见下文）
已更新 app.component.ts 以导入 db.component 并向其添加路由

此时出现了简单页面，但我不知道如何让 Sequelize 工作。

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

当我打开 sequelize.d.ts 时，'declare module "sequelize" {' 行出现错误，指出 "Ambient modules cannot be nested other modules"
当我打开 lodash.d.ts 时，第 239 行和第 240 行（下划线）出现错误，指出“重复标识符‘_’”

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

我明白在长运行中，我在这里测试的 route/config/etc 不会是 "right" 的方式，但我只是需要通过基本的概念验证，即在重新设计数据库之前我可以对数据库做一些事情（例如 - 我可以连接到数据库并查询 table）

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 是后端的 orm。您的问题的解决方案是创建 api（如果您想使用 Sequelize，那么可能会使用 nodeJs），您的前端应用程序可以与之交谈。

Answer 2

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

从我的 "Tour of Heroes" 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 应用程序放在 public 目录中。您还需要获取 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');
});

这表示查看 public 文件夹并找到 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));
    }
}

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

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

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

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

在带有 Typescript 的 Angular2 下进行续集

Sequelize under Angular2 w/ Typescript

sequelize.js

angular