Error with AngularJS - failed to instantiate module

Question

I'm going through angular for .net book and I'm using a basic example of having an app with two controllers. However I get this error now and I can't see why it would fail to instantiate module:

Unhandled exception at line 4138, column 9 in http://localhost:53990/Scripts/angular.js

0x800a139e - JavaScript runtime 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 code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <title>AngularJS with .NET</title>
    <script src="Scripts/angular.js"></script>
</head>
<body>
    <h1>Game setup</h1>
    <div ng-controller="ExampleController1">
        <h2>Player 1</h2>
        <label>Name:</label>
        <input type="text" placeholder="Please enter player 1 name" ng-model="name" ng-focus="onNameFocused()" />
        <h3 ng-show="name">Player 1 name is {{name}}</h3>
        <h3 ng-show="previousName">Previous Player 1 name was {{previousName}}</h3>
    </div>

    <div ng-controller="ExampleController2">
        <h2>Player 2</h2>
        <label>Name:</label>
        <input type="text" placeholder="Please enter player 2 name" ng-model="name" ng-focus="onNameFocused()" />
        <h3 ng-show="name">Player 2 name is {{name}}</h3>
        <h3 ng-show="previousName">Previous Player 2 name was {{previousName}}</h3>
    </div>

    <script>
        (function () {
            "use strict"
            var myAppModule = angular.module('myApp', []);
            //myAppModule.filter('customname', function () {
            //    return function (name) {
            //        name = name || '';
            //        var customName = "";
            //        for (var i = 0; i < name.length; i++) {
            //            if (name.charAt(i) == "e") {
            //                customName += "3";
            //            }
            //            else if (name.charAt(i) == "o") {
            //                customName += "0"
            //            }
            //            else {
            //                customName += name.charAt(i);
            //            }
            //        }
            //        return customName;
            //    }
            //})

            myAppModule.controller('ExampleController1', ['$scope', function
                ($scope) { // Explicit dependency injection
                $scope.name = "Alex Pop";
                $scope.previousName = "";
                $scope.onNameFocused = function () {
                    $scope.previousName = $scope.name;
                };
            }]);

            myAppModule.controller('ExampleController2', ['$scope', function ($scope) {
                $scope.name = "Alex Pop";
                $scope.previousName = "";
                $scope.onNameFocused = function () {
                    $scope.previousName = $scope.name;
                };
            }]);
            console.log(myAppModule.name);
        });

    </script>
</body>
</html>

Can anyone see what's wrong with it?

you defined your angular script as an IIFE, but never invoked it with () at the end. either unwrap it, or invoke it. en.wikipedia.org/wiki/Immediately-invoked_function_expression — Claies
– Claies, Commented Mar 27, 2015 at 22:10
@Claies I didn't know I needed another () to invoke it. Thanks for your help. — nick gowdy
– nick gowdy, Commented Mar 27, 2015 at 22:14

Claies · Accepted Answer · 2015-03-27 22:17:04Z

1

You wrapped your entire Angular Script in an IIFE, but you never invoked the function to load the script.

(function () {
...
});

You either should unwrap the function, or invoke the function, like so:

(function () {
...
}());

answered Mar 27, 2015 at 22:17

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nick gowdy Over a year ago

Thanks it worked. I'll make your answer as correct when SO lets me.

Collectives™ on Stack Overflow

Error with AngularJS - failed to instantiate module

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related