Angular2下的续集w/Typescript

Question

我是Angular的全新角色，刚开始让我的脑袋围绕它如何工作。请互联网，温柔......

我已经完成了Angular2 5分钟快速入门通过英雄之旅，并没有问题的工作。现在我试图连接到我的本地MS SQL服务器，因为我有一个基于SQL的项目，其中Angular2是必需的平台。我一直在争取Sequelize的工作，并且可以真正使用一些帮助，让自己的头撞墙。

什么我迄今所做的基于不同的事情我读过：

• 使用NPM安装sequelize和验证sequelize和lodash，蓝鸟和验证所有依赖下node_modules
存在
• 从GitHub的DefinitelyTyped项目下载bluebird.d.ts，lodash.d.ts，sequelize.d.ts和validator.d.ts，并将它们放在我的类型文件夹中
• 在tsConfig.json中，我更改了compilerOptions - >从es5到es6的目标
• 创建一个sim PLE db.component.ts文件（见下文）
• 更新app.component.ts导入db.component并增加了一个途径是

此时简单的页面来了，但我无法弄清楚如何让Sequelize工作。

我看到

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

• 当我打开sequelize.d.ts，有就行了'申报模块“sequelize错误“{'，指出”环境模块不能嵌套其他模块“
• 当我打开lodash.d.ts时，在行239和240（下划线）上出现错误，指出”重复的标识符“_'”

我已经尝试了许多不同的方法（猜测），关于如何获取连续序列以连接到我的数据库，并且无法获得任何工作。我知道我需要db.component.ts文件中的一个导入和/或一个require，但最终只会在IDE中出现错误语法或在浏览器中出现错误（Chrome）。

我明白，从长远来看，我在这里测试的route/config/etc不会是“正确”的方式，但我只需要通过基本证明-of概念，我可以做一些与数据库之前，我重新设计它（例如 - 我可以连接到数据库和查询表）

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的前端使用它。

在我的“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'))); 

我们走之前那么多进一步，我想指出的是，你需要有你的公开目录内的角应用。您还需要获取MS-SQL的库，并下载其他包，包括express和body-parser。我将从npm install express-generator -g开始，然后转到目录并在命令行中键入express myapp。

尽管我们还没有完成我们的服务器！接下来，我们会让它工作。

​​

然后将其写入文件，然后键入node myapp.js进入命令控制台，你应该有你的服务器运行起来！

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

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

这就是说查看公共文件夹并找到index.html并显示它。这就是我们如何从节点启动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}); 

     }); 

    }); 
}); 

你会注意到我正在函数调用中发送我的行，并用新名称 - > data发回它。

现在要在我的组件中的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（）。数据，因为记住数据是我们从服务器传回的名称？您实际上不需要添加它，它可能会让您的JSON在收到时更容易处理。

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

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

Answer 2

据我所知，Sequelize是后端的orm。解决您的问题的方法是创建api（如果您想使用Sequelize，那么可能使用nodeJs），您的前端应用程序可以与之交谈。