Uncaught Error: Module 'myApp' is not available! (AngularJS)

Question

I'm working on angular tutorial and i'm having a problem on beginning. Loading myApp module throws error. As explained in tutorial, this should be one of three ways to create controller.

Here is print screen from tutorial i'm working on:

When i refresh web page i get this error in Chrome console:

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.

This is my HTML file

  <html ng-app="myApp">
        <head>
        </head>
        <body>
            <h1>Hello world!</h1>   

            <div ng-controller="MainController">
                {{ 2+2 }}
                <br>
                {{ val }}
            </div>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
            <script src="app.js">
        </body>
    </html>

This is my app.js file

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

var MainController = function($scope){
    $scope.val = "Main controller variable value"
}

So what is my problem? I can't figure it out.

Thank you in advance

score 10 · Accepted Answer · edited May 23 '17 at 10:31

10

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.

Your original issue is due to the invalid script tag. Basically your script tag is not closed it needs to be closed in order for the browser to download the app.js file. Script tags are not self closing so it needs a closing tag.

<script src="app.js">

should be

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

Now once you fix that you will get into another error.

[ng:areq] Argument 'MainController' is not a function, got undefined

Since you are using the latest angular version, i.e anything >= 1.3.x needs the controller to be registered manually using the .controller construct. See here for more details.

Note - it is a bit confusing because the screenshot shows you using 1.2.0 (which does not necessarily needs explicit controller registration) but snippet in the question shown 1.4.x.

edited May 23 '17 at 10:31

Community

1
1

answered Oct 26 '15 at 19:23

PSL

123,204
21
253
243

One more question: should i proceed with this tutorial or there are there are too many differency between 1.2 and 1.4 version of Angular? – Valor_ Oct 27 '15 at 05:47
1

@DavorBramorPečnik It is a tricky question, :) because ideally there is no point doing anything with 1.2.x at this point, but if you are looking to start with angular that tutorial should be good but you can always use 1.4 and find out the relevant differences and incorporate them. But i am not sure if you will find too many tutorials with 1.4.x though. Angular official documentation have a version selector that should be helpful too. – PSL Oct 27 '15 at 13:28
Super. Then i will proceed with this tutorial. Thank you again for all your answers. – Valor_ Oct 28 '15 at 05:47

score 5 · Answer 2 · edited May 23 '17 at 12:02

You should register a controller to the angular module myApp.

App.js

var myApp = angular.module('myApp', []);
myApp.controller('MainController', MainController );
var MainController = function($scope){
    $scope.val = "Main controller variable value"
}

Basically what you were doing is correct but that code has been followed by the older version of AngularJS, The way you declared your controller is nothing but known as controller As function, which needs enable allowGlobals() method of $controllerProvider. Since Angular 1.3 + allowGlobals() method is disabled by adding below code, you could turn it on, to make your code working but it is not recommended way to do this.

Config

myApp.config(['$controllerProvider',
  function($controllerProvider) {
    $controllerProvider.allowGlobals();
  }
]);

Refer same SO Answer here

score 2 · Answer 3 · edited Oct 26 '15 at 19:21

2

Try this:

myApp.controller ("MainController",[$scope, function ($scope){
      $scope.val = "Main controller variable value"
}]);

The ng-controller directive looks for the MainController in your MyApp module.

edited Oct 26 '15 at 19:21

Hanlet Escaño

17,114
8
52
75

answered Oct 26 '15 at 19:16

9ers Rule

164
1
1
14

Uncaught Error: Module 'myApp' is not available! (AngularJS)

3 Answers3