将Angular连接到nodejs和mysql

时间:2018-05-25 18:40:48

标签: node.js angular

我正在连接我的角度文件index.html但是在服务器网页上运行时并没有显示任何内容。它运行正常,但我的前端表单建立在角度上没有显示。

这是我的服务器脚本:

var express = require("express");
var bodyParser = require('body-parser');

var connection = require('./config');
var app = express();

var authenticateController = require('./controllers/authenticate-controller');
var registerController = require('./controllers/register-controller');

app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/', function (req, res) {  
    res.sendFile( __dirname + "/" + "./index.html" );  
});  
app.use

app.get('/login.html', function (req, res) {  
    res.sendFile( __dirname + "/" + "login.html" );  
})  

/* route to handle login and registration */
// app.post('/api/register',registerController.register);
// app.post('/api/authenticate',authenticateController.authenticate);

console.log(authenticateController);
// app.post('/controllers/register-controller', registerController.register);
// app.post('/controllers/authenticate-controller', authenticateController.authenticate);
app.listen(8012);

这是我的index.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>FirstApp</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <app-root></app-root>
</body>
</html>

我已经创建了一个寄存器组件名称register.component.html ...

 <form action="/controllers/register-controller" method="POST">

     <div class="form-group">
        <label for="exampleInputEmail1">Name</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Your Email" name="name">
    </div>      
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name="password">
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</form> 

1 个答案:

答案 0 :(得分:0)

无论如何,首先要做的事情是:你必须将你的js连接到你的html才能使Angular有效。

here

中查看这个最小的例子
<html>
  <head>
    <title>Hello, Angular</title>
  </head>
  <body>
    <app-main>Loading...</app-main>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('dist/main.js').catch(function (err) {
          console.error(err);
      });
    </script>
  </body>
</html>

他们得到了script s,实际上是角度代码+他们的代码。你不会从字面上理解这个代码,但你必须在某个地方有脚本。

PS我建议首先尝试使用静态html(使用一些托管或一些开箱即用的服务器)并在之后构建自己的服务器。