Angular.js：錯誤：模塊“MyApp”不可用

Question

我想在我的機器上本地使用這個 plunk 。 但是，當我使用本地 Python 服務器或http-server運行它時，我不斷收到以下錯誤：

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due     to:
    Error: [$injector:nomod] Module 'myApp' is not available! You either     misspelled the module name or forgot to load it. If registering a module ensure      that you specify the dependencies as the second argument.

我的html 文件如下所示：

<!DOCTYPE html>
<html ng-app="myApp">

  <head lang="en">
    <meta charset="utf-8" />
    <title>Custom Plunker</title>
    <script scr="main.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.1/papaparse.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-file-upload/1.1.5/angular-file-upload.min.js"></script>
    <link rel="stylesheet" href="main.css">
  </head>

  <body ng-controller="MyCtrl">
    <h1>CSV</h1>
    <div>
      <input type="checkbox" ng-model="append">
      Append to existing on drag & drop
    </div>
    <div class="drop-container" nv-file-drop nv-file-over uploader="uploader">
      <textarea ng-model="csv" placeholder="Enter your CSV here, or drag/drop a CSV file"></textarea>
    </div>

    <h1>D3 Flare JSON</h1>
    <div>
      <input type="checkbox" ng-model="compact"> Compact
    </div>
    <div>
      <input type="text" ng-model="tags.parent" placeholder="parent tag">
      <input type="text" ng-model="tags.children" placeholder="children tag">
      <input type="text" ng-model="tags.leaf" placeholder="leaf tag">
      <input type="text" ng-model="tags.size" placeholder="size tag">
    </div>
    <textarea readonly ng-model="json"></textarea>
  </body>

</html>

main.js文件如下所示：

CSV to D3 Flare JSON converter in AngularJSPreview Edit Code
index.html
main.js
main.css
main.js
angular.module('myApp', ['angularFileUpload'])

.factory('FlareJson', ['$q', function($q) {
  function updateTree(curr, arr, tags) {
    if ((arr.length || 0) < 2) {
      return;
    }

    if (!curr.hasOwnProperty(tags.children)) {
      curr[tags.children] = [];
    }

    var elem;    
    if (arr.length == 2) {
      elem = {};
      elem[tags.leaf] = arr[0];
      elem[tags.size] = arr[1];
      curr[tags.children].push(elem);
    } else {
      curr[tags.children].some(function(e) {
        if (e[tags.parent] == arr[0] || e[tags.leaf] == arr[0]) {
          elem = e;
          return true;
        }
      });
      if (!elem) {
        elem = {};
        elem[tags.parent] = arr[0];
        curr[tags.children].push(elem);
      }
      updateTree(elem, arr.slice(1), tags);
    }
  }

  function buildJson(csv, compact, tags) {
    var deferred = $q.defer();

    var result = {};
    result[tags.parent] = 'flare';

    Papa.parse(csv, {
      header: false,
      dynamicTyping: true,
      complete: function(csvArray) {
        csvArray.data.forEach(function(line) {
          if (line.length) {
            updateTree(result, line, tags);
          }
        });
        if (compact) {
          deferred.resolve(JSON.stringify(result));
        } else {
          deferred.resolve(JSON.stringify(result, null, 2));
        }
      }
    });

    return deferred.promise;
  }

  return buildJson;
}])

.controller('MyCtrl', ['$scope', 'FileUploader', 'FlareJson',
function($scope, FileUploader, FlareJson) {
  $scope.csv = "";
  $scope.compact = false;
  $scope.json = "";
  $scope.tags = {
    parent: 'skill',
    children: 'children',
    leaf: 'name',
    size: 'level'
  };

  $scope.uploader = new FileUploader();

  $scope.uploader.onAfterAddingFile = function(fileItem) {
    var reader = new FileReader();
    reader.onloadend = function(event) {
      $scope.$apply(function() {
        if ($scope.append) {
          $scope.csv += event.target.result;
        } else {
          $scope.csv = event.target.result;
        }
      });
    };
    reader.readAsText(fileItem._file);
  };

  function update() {
    FlareJson($scope.csv, $scope.compact, $scope.tags).then(function(json) {
      $scope.json = json;
    });
  }

  $scope.$watchGroup(['csv', 'compact'], update);
  $scope.$watchCollection('tags', update);
}]);

我不明白我做錯了什么。 我已經搜索過類似的錯誤消息，但我發現的任何內容都無法幫助我解決問題。

Answer 1

您在 angularjs 文件之前加載腳本文件，這就是您收到此錯誤的原因。 因此，在“angular.js”文件之后添加“main.js”文件。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
<script scr="main.js"></script>

Answer 2

我相信這是因為您在加載main.js之前加載了main.js 嘗試將您的腳本放在腳本定義的末尾：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.1/papaparse.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-file-upload/1.1.5/angular-file-upload.min.js"></script>
<script scr="main.js"></script>

Answer 3

哦，解決了！ 事實證明， main.js中的以下幾行第一行導致了問題：

CSV to D3 Flare JSON converter in AngularJSPreview Edit Code
index.html
main.js
main.css
main.js

我從main.js刪除了它們，現在它可以工作了 - yuhuu！ :)

Angular.js：錯誤：模塊“MyApp”不可用

問題描述

3 個解決方案

解決方案1
2 已采納 2015-10-22 02:14:19

解決方案2
0 2015-10-22 02:14:04

解決方案3
0 2015-10-22 08:42:35

Angular.js：錯誤：模塊“MyApp”不可用

問題描述

3 個解決方案

解決方案1 2 已采納 2015-10-22 02:14:19

解決方案2 0 2015-10-22 02:14:04

解決方案3 0 2015-10-22 08:42:35

解決方案1
2 已采納 2015-10-22 02:14:19

解決方案2
0 2015-10-22 02:14:04

解決方案3
0 2015-10-22 08:42:35