ReferenceError: jurusan 没有在 Angular 中用 Nodejs 定义答案

【问题标题】：ReferenceError: jurusan is not defined in Angular with NodejsReferenceError: jurusan 没有在 Angular 中用 Nodejs 定义
【发布时间】：2019-04-01 09:47:02
【问题描述】：

我是新手，正在尝试 AngularJS 和 NodeJS，我陷入了这个错误。

我正在尝试创建一个动态选择选项，我正在尝试使用 NodeJS 从 MySQL 数据库中回显一个表并将数据扔给 Angular。我已经尝试了很多东西来解决这个问题，但也许我仍然不太了解 Angular，所以我还没有解决这个问题。

我正在使用 nodeJS 版本。 1.0.0 和 AngularJS 版本 1.7.5。这是我的代码：

controlAll.js

var http = require('http');
var qs = require('querystring');
var fs = require('fs');
var hbs = require('hbs');
var express = require('express');
var bodyParser = require('body-parser');
var route = express();
var mysql = require('mysql');

var konek = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database: "mahasiswa",
});
konek.connect(function(err){
    if(err) throw err;
    console.log("udah konek");
});

route.set('view engine', 'hbs');
route.use(bodyParser.json());
route.use(bodyParser.urlencoded({ extended: true }));

route.get('/mahasiswa/add', function(req, res){
    res.render("formm");
});
route.get('/jurusan', function(req,res){
    konek.query("SELECT * FROM `jurusan`",function(err,jurusan)
    {
        if (err) throw err;
        res.send(JSON.stringify({
            jurusan:jurusan
        }));
    });
});

formm.hbs

<!DOCTYPE html>
<html>
<head>
    <title>tambah mahasiswa</title>
    <link rel="stylesheet" href="/asset/css/bootstrap.min.css">
    <script src="/asset/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/ang/angular.js"></script>
</head>
<body ng-app="coba">
    <div class="container">
        <form method="POST" action="/mahasiswa/add">
            <div class="form-group">
                <label>Nama Mahasiswa</label>
                <input type="text" name="nama" placeholder="nama" class="form-control">
            </div>
            <div class="form-group">
                <label>Nomor Pokok Mahasiswa</label>
                <input type="text" name="npm" placeholder="npm" class="form-control">
            </div>
            <div ng-controller="drpdn">
                <div class="form-group">
                    <label>Jurusan</label>
                    <select name="id_jurusan" ng-model="jurusan" class="form-control">
                        <option disabled selected value>--Pilih Jurusan--</option>
                        <option ng-repeat="jur in jurusan" value="{{jur.id_jurusan}}">{{jur.namajurusan}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Program Studi</label>
                    <select name="id_prodi" class="form-control">
                        <option disabled selected value>--Pilih Program Studi--</option>
                    </select>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">simpan</button>
        </form>
    </div>
</body>
</html>

<script type="text/javascript">
    var app = angular.module('coba',[]);
app.controller('drpdn', function($scope, $http){
       $http.get("/jurusan")  
       .then(function(response){
            $scope.jurusan = response.jurusan;
       });
  console.log($scope.jurusan);
});
</script>

我的nodejs响应，我把数组放到另外一个路由：

console.log($scope.jurusan)

这是我的错误：

另一个错误：

【问题讨论】：

错误很清楚，$scope.jurusan = jurusan; 这里 jurusan 没有在你的代码中的任何地方定义。您是否期望 jurusan 成为来自服务器的一些价值？
我期待 jurusan 在 Angular 中将显示来自 nodeJS @PalSingh 中 jurusan 的数据
Angular（或前端）不知道您在 NodeJS（或服务器）中声明的任何内容，因此您需要使用 $http 从服务器获取数据并将其分配给 jurusan
所以我必须声明在 nodeJS 文件中获取jurusan 的路由？ @PalSingh
你能写下你的答案吗@PalSingh

标签： javascript mysql angularjs node.js

【解决方案1】：

您的控制器（或提供服务）应该从您的 nodejs 端点加载 jurusan 数据，然后使用它：

app.controller('drpdn', function($scope, $http){
    // Simple GET request example:
    $http({
        method: 'GET',
        url: '/jurusan' // USE YOUR NODEJS ENDPOINT TO LOAD DATA
    }).then(function(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.jurusan = response.data.jurusan;
    }, function(response) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });
});

【讨论】：

我试过你的答案，<option> 正在重复，但它不显示文本，它只是空白
做$scope.jurusan = response.jurusan;
你能发布你的节点api发送的确切响应吗？
我用console.log($scope.jurusan)检查我的角度，它说undefined
我试图在$scope.jurusan = response.data.jurusan 下方的console.log 中显示数据，但是ng-repeat 上仍然是空白的