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

Question

I am using AngularJS 1.3.5 and I am trying to get an information from a json file. Here is my code: The HTML file:

<!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 files: 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; 
            }); 
}]);

and finally app.js

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

I corrected the errors hwoever now I am having a white screen so my code didn't read what is in my json file: { "FolderPath": "C:\Users\nouri\Desktop\test" } what should I do

You can't return from asynchronous function. See [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Tushar, Apr 21 '16 at 13:40

Pratik Bhattacharya · Accepted Answer · 2016-04-21T14:16:36.930

2

There seems to be 2 issues with your code

Order in which you are loading the scripts. Load app.js followed by services/myapp.js and then controllers/MainController.js.

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

The name of your angular module is FolderApp but you have referenced it as 'app'. Change it as
```
    <body ng-app="FolderApp">
```

EDIT
There is an issue with the way you are using your factory. You should return an object containing a method that will call the API and return back the $http promise. Try something like this:

Factory

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

Controller

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

Take a look at this fiddler.

edited Apr 21 '16 at 14:16

answered Apr 21 '16 at 13:51

Pratik Bhattacharya

3,596
2
32
60

Thank you it helped me, now I have another problem . I edited my question with the error I had – nour Apr 21 '16 at 13:58
There is a problem with your factory implementation as well. Check my Edit. – Pratik Bhattacharya Apr 21 '16 at 14:17
Thank you but I still be unable to read my json file . check my question edit please – nour Apr 21 '16 at 14:36
What is the format of your json file? And can you check from the network tab if the file is getting properly loaded by the $http call? – Pratik Bhattacharya Apr 21 '16 at 14:41
it's a json file not a txt or any other type file – nour Apr 21 '16 at 14:53

score 1 · Answer 2 · answered Apr 21 '16 at 13:40

1

The order of the files matter... place your app.js at the top and also your app-name defined in your html should match the js too.

answered Apr 21 '16 at 13:40

Thalaivar

23,282
5
60
71

score 1 · Answer 3 · answered Apr 21 '16 at 13:40

1

Try loading <script src="js/app.js"></script> before the other files (but after the angular core)

answered Apr 21 '16 at 13:40

Mdk

512
3
13

score 1 · Answer 4 · answered Apr 21 '16 at 13:40

1

in the html you defined

<body ng-app="app">

But in the js you are using:

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

Change one of the 2 and place

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

on top and you should be ok

answered Apr 21 '16 at 13:40

rick

1,869
13
22

Thank you I still have this error .. angular.js:11500Error: [ng:areq] http://errors.angularjs.org/1.3.5/ng/areq?p0=MainController&p1=not%20a%20function%2C%20got%20undefined at Error (native) at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:6:416 at Ob (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:19:393) at pb (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:19:480) – nour Apr 21 '16 at 13:49
at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:75:274 at http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:57:112 at r (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:7:408) at H (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:56:496) at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:51:299) – nour Apr 21 '16 at 13:49
at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js:51:316)(anonymous function) @ angular.js:11500(anonymous function) @ angular.js:8479k.$apply @ angular.js:14391(anonymous function) @ angular.js:1437e @ angular.js:4138d @ angular.js:1435rc @ angular.js:1455Gd @ angular.js:1349(anonymous function) @ angular.js:25912a @ angular.js:2722c @ angular.js:2992 – nour Apr 21 '16 at 13:49
edit the question and put the console log I can't read it from here sry – rick Apr 21 '16 at 13:51
here you can see a simplified version of your app https://jsfiddle.net/rixlabs/r3guc8k6/ – rick Apr 21 '16 at 13:52
In the fiddle you have a CORS problem caused by the static file on your hd. You have to serve stati resource with a local web server to avoid those kind of problems douring development. – rick Apr 21 '16 at 13:56

score 1 · Answer 5 · answered Apr 21 '16 at 13:42

1

change ng-app="app" to ng-app="FolderApp"

answered Apr 21 '16 at 13:42

Mohsin Muzawar

1,202
9
9

Thank you now I don't have any error However , nothing is showed from my json file I have a white screen – nour Apr 21 '16 at 14:14

score 0 · Answer 6 · answered Apr 21 '16 at 15:45

0

I fixed the problem, in fact and for security reasons, AngularJS can't read local json files . It only reads online ones. Thanks for those who helped me ^^

answered Apr 21 '16 at 15:45

nour

538
2
7
16

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

6 Answers6