Uncaught Error: [$injector:modulerr] & Uncaught ReferenceError: app is not defined

Question

我正在使用 AngularJS 1.3.5，我正在尝试从 json 文件中获取信息。这是我的代码： HTML 文件：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="js/controllers/MainController.js"></script>
<script src="js/services/myapp.js"></script>
<script src="js/app.js"></script>
<body ng-app="app">

<div ng-controller="MainController">

            
                <div ng-repeat="content in contents">
   

<a ng-href="{{data.FolderPath}}">{{data.FolderPath}}</a>
                
     
                    
                </div>
            
       
</div>
</body>
</html>

Javascript 个文件： MainController.js

app.controller('MainController', ['$scope', 'myapp', function($scope, myapp) {
  myapp.success(function(data) {
    $scope.FolderPath = data;
  });
}]);

myapp.js

app.factory('myapp', ['$http', function($http) { 
  return $http.get('C:\Users\nouri\Desktop\configFile.json') 
            .success(function(data) { 
              return data; 
            }) 
            .error(function(err) { 
              return err; 
            }); 
}]);

最后 app.js

var app = angular.module('FolderApp', []);

我纠正了错误，但现在我有一个白屏，所以我的代码没有读取我的 json 文件中的内容： { "FolderPath": "C:\Users\nouri\Desktop\test" } 我该怎么办

Answer 1

文件的顺序很重要...将您的 app.js 放在顶部，您在 html 中定义的 app-name 也应该与 js 匹配。

Answer 2

尝试在其他文件之前加载 <script src="js/app.js"></script>（但在 angular 核心之后）

Answer 3

在 html 中您定义了

<body ng-app="app">

但是在你使用的js中：

var app = angular.module('FolderApp', []);

改变两者之一并放置

<script src="js/app.js"></script>

在上面，你应该没问题

Answer 4

将 ng-app="app" 更改为 ng-app="FolderApp"

Answer 5

您的代码似乎有 2 个问题

您加载脚本的顺序。加载 app.js，然后加载 services/myapp.js，然后加载 controllers/MainController.js.

    <script src="js/app.js"></script>
    <script src="js/services/myapp.js"></script>
    <script src="js/controllers/MainController.js"></script>

您的 angular 模块的名称是 FolderApp，但您将其引用为 'app'。将其更改为
```
    <body ng-app="FolderApp">
```

编辑
您使用工厂的方式存在问题。您应该 return 一个包含将调用 API 和 return 返回 $http 承诺的方法的对象。尝试这样的事情：

工厂

app.factory('myapp', ['$http', function($http) { 
   return {
    getJson: function() {
       return $http.get('C:\Users\nouri\Desktop\configFile.json');
    }
  }
}]);

控制器

app.controller('MainController', ['$scope', 'myapp', function($scope, factory) {
  factory.callApi()
    .then(function(data) {
      $scope.FolderPath = data;
    });
}]);

看看这个fiddler。

Answer 6

我解决了这个问题，事实上，出于安全原因，AngularJS 无法读取本地 json 文件。它只阅读在线的。感谢帮助过我的人^^

Uncaught Error: [$injector:modulerr] & Uncaught ReferenceError: app is not defined

Uncaught Error: [$injector:modulerr] & Uncaught ReferenceError: app is not defined

html

javascript

css

angularjs

angular-services