无法将 .js 文件绑定到主 AngularJS 文件答案

【问题标题】：Cant bind .js file to main AngularJS file无法将 .js 文件绑定到主 AngularJS 文件
【发布时间】：2018-04-25 12:13:25
【问题描述】：

我有两个简单的文件：leads.html 和 leadsController.js。我想将leadsController.js 作为leads.html 中的链接javascript 文件。当我在leads.html 中使用以下代码<script src = "leadsController.js"></script> 链接它时... leads.html 无法正确呈现。

但是，当我将leadsController.js 的内容作为leads.html 代码的一部分包含在内时，它可以工作。

我没有正确链接 .js 文件吗？

以下是有效的和无效的。

我希望它在连接到 leadsController.js 时能够正常工作

是的......它在同一个目录中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body>

    <div ng-app = "myApp" ng-controller = "myCtrl">

      <h1>Hello, world!</h1>

      <ul>
        <li ng-repeat = "x in myData">{{ x.id }}</li>
      </ul>

    </div>
    <script src = "leadsController.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
  </body>
</html>

leadsController.js 看起来像这样：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("https://clearmaze.net/test/newAdmin/leadsData.php").then(function (response) {
      $scope.myData = response.data.records;
  });
});

这行得通：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body>

    <div ng-app = "myApp" ng-controller = "myCtrl">

      <h1>Hello, world!</h1>

      <ul>
        <li ng-repeat = "x in myData">{{ x.id }}</li>
      </ul>

    </div>
    <script>

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
      $http.get("leadsData.php").then(function (response) {
          $scope.myData = response.data.records;
      });
    });

    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
  </body>
</html>

【问题讨论】：

你应该在leadsController.js之前移动angular.min
@TanDuong 感谢您的回复...angular.min 已经在leadsController.js 之前。根据您的建议，我确实尝试过移动它但没有运气。
<script src = "./leadsController.js"></script>怎么样
不...没用:'(

标签： javascript html angularjs src

【解决方案1】：

尝试脚本文件的绝对 uri。例如，如果你的脚本在 /scripts 文件夹中，那么 src="~/scripts/leadsController.js" 应该可以工作。

【讨论】：

它在同一个目录下没有额外的文件夹...所以那里没有太多的回旋余地:( .. 谢谢！
在浏览器中使用 Inspect 查找 js 文件的 src 是什么。尝试 ctrl+F5 清除浏览器数据。

【解决方案2】：

试试<script src = "./leadsController.js"></script>

【讨论】：

请查看控制台浏览器，右键点击链接<script src = "./leadsController.js"></script>打开链接新标签并检查文件是否存在。

【解决方案3】：

更新：错字。我没有将文件上传到服务器... facepalm。感谢大家的建议，因为它们让我首先弄清楚了这一点。

【讨论】：