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），您的前端應用程序可以與之交談。