使用 AngularJS JavaScript 连接节点 JavaScript答案

【问题标题】：Connect node JavaScript with AngularJS JavaScript使用 AngularJS JavaScript 连接节点 JavaScript
【发布时间】：2016-03-27 18:35:09
【问题描述】：

我想创建一个编辑配置文件表单。但我的任务是我的 editprofile.js 没有执行。但我在head 标签之间给出了 editprofile.js 路径。

但是它没有加载 JavaScript 文件，如何连接节点 JavaScript 和 AngularJS JavaScript？

<!DOCTYPE html>
    <html ng-app="payloads">
    <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Payload | Edit</title>
         <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
         <!-- load jquery -->
         <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
          <!-- SPELLS -->
          <script src="/editprofile.js"></script>
          <!-- load angular -->
     </head>
<div id="column-content">
<img alt="payload" src="/images/logo.png">
<myspan>Payload</myspan>
</div>

<body ng-controller="myCtrl">
    <div style="float:right; position:fixed ; right:0 ; bottom:0">
        <img>
    </div>

    <!-- You only need this form and the form-basic.css -->
    <form class="form-basic" method="post" action="/kyc/edit">
        <div class="form-row">
            <div class="fontSize">KYC</div>
        </div>

        <div class="form-row">
            <div class="greyColor">Know Your Customer</div>
        </div>

        <div class="form-row">
            <div class="ss-required-asterisk" aria- hidden="true">* Required</div>
        </div>

        <div class="form-row">
            <label>
                <span>LegalName*</span>
                <input type="text" name="name" ng-model="name" required>
            </label>
        </div>

        <div class="form-row">
            <label>
                <span>CNIC Number*</span>
                <input name="cnic" ng-model="cnic" required>
            </label>
        </div>

        <div class="form-row">
            <label>
                <span>Father Name*<br></span>
                <input name="fatherName" ng-model="fatherName" required>
            </label>
        </div>

        <div class="form-row">
            <label>
                <span>Occupation*</span>
                <input name="occupation" ng-model="occupation" required>
            </label>
        </div>

        <div class="form-row">
            <label>
                <span>NTN Number</span>
                <input name="ntn" ng-model="ntn">
            </label>
        </div>

        <div class="form-row">
            <div class="fontSize">Contact Details</div>
        </div>

        <div class="form-row">
            <button type="submit">Save Changes</button>
        </div>
    </form>
</body>
</html>

editprofile.js

这是 JavaScript 文件，在输入文本字段中显示用户配置文件数据。

var app = angular.module('payloads', []);
var userController = require('./controllers/userController').profileDataArray;
var profiledata = [];
profiledata = profiledata.concat(userController());
app.controller('myCtrl', function($scope) {
    $scope.name = profiledata[0];
    $scope.cnic = profiledata[1];
    $scope.fatherName = profiledata[2];
    $scope.occupation = profiledata[3];
    $scope.ntn = profiledata[4];
});

【问题讨论】：

你能把代码清理一下吗？很难阅读。最好把它放在 plunker 或 jsfiddle 中。
那里很乱，你已经引用了 AngularJS 两次。删除旧的。
我删除了旧的引用 AngularJS 。但是还是问题editprofile.js无法执行。
我清理了代码，请检查一下并给我可能的解决方案。提前谢谢。
您显然是在尝试使用 require 从客户端代码中加载 NodeJS 代码？！这行不通。

标签： javascript jquery angularjs node.js

【解决方案1】：

通过editprofile.js 中的require 调用，您似乎正在尝试从客户端UI 代码中加载服务器端NodeJS 代码。这行不通。

您的客户端和服务器需要能够通信，很可能通过 AJAX 进行通信（例如，在客户端使用 Angular 的 $http 方法，在服务器端使用 http.createServer）。

【讨论】：