AngularJs Injector Module Error

Question

i'm new in AngularJs (started an couple hours ago) and i'm trying to complete the AngularJs in 60 minutes'ish tutorial. But i got stucked on the first controllers example. This is my code:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Angular Js</title>
    <meta charset="iso-8859-1">

</head>
<body>

    <div class="container" data-ng-controller="CustomerController">
        <input type="text" ng-model="name"> {{name}}

        <ul>
            <li data-ng-repeat="cust in customers">
                {{ cust.name}} - {{cust.city}}
            </li>
        </ul>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.js"></script>

    <script>
        function CustomerController($scope) 
        {   
            $scope.customers = [
                {name:'Leonardo', city:'Phoenix'}, 
                {name:'Michelangelo', city:'Los Angeles'},
                {name:'Rafael', city:'New York'}, 
                {name:'Donatello', city:'Texas City'}
            ];
        }
    </script>
</body>
</html>

This is the error i got from the ChromeDev 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 th...<omitted>...2) angular.js:78
(anonymous function) angular.js:78
(anonymous function) angular.js:4003
forEach angular.js:328
loadModules angular.js:3964
createInjector angular.js:3904
doBootstrap angular.js:1500
bootstrap angular.js:1515
angularInit angular.js:1427
(anonymous function) angular.js:23362
trigger angular.js:2653
(anonymous function) angular.js:2933
forEach angular.js:328
eventHandler angular.js:2932

As a newbie, I dont want to get into injector or modules and stuff. Since the tutorial is get to work only with this piece of code.

Thanks!

user273895 · Accepted Answer · 2014-08-05 23:13:55Z

2

first you defined ng-app="myApp" but you didn't define any module named "myApp", so just use ng-app.

second, seems like the angular version you used 1.3.0-beta.17 doesn't work if you don't declare a module like this

angular.module("myApp", [])

if you want to to make the example you posted work, use a different angular version, like 1.2.5

here's a working jsbin of your code

answered Aug 5, 2014 at 23:13

user273895

6545 silver badges17 bronze badges

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

Comments

davibq · Accepted Answer · 2014-08-05 22:56:54Z

1

I think you should always declare at least one module.

Try:

<script>

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

    function CustomerController($scope) 
    {   
        $scope.customers = [
            {name:'Leonardo', city:'Phoenix'}, 
            {name:'Michelangelo', city:'Los Angeles'},
            {name:'Rafael', city:'New York'}, 
            {name:'Donatello', city:'Texas City'}
        ];
    }
</script>

answered Aug 5, 2014 at 22:56

davibq

1,09912 silver badges32 bronze badges

3 Comments

Zack Argyle Over a year ago

You should probably inject in the controller too, or that still won't help him get going.

davibq Over a year ago

That depends on the angular version. Take this fiddle for instance jsfiddle.net/joshdmiller/HB7LU

Italo Ayres Over a year ago

Well, it's the latest version 1.3.x

ebram khalil · Accepted Answer · 2014-08-05 23:15:45Z

There are 2 solutions:

First, as your error says: "Module 'myApp' is not available!". You need first to define the module myApp, so that angular could instantiate it. Then add your controller's constructor function to myApp module using the .controller() method.

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

myApp.controller('CustomerController', ['$scope',
    function($scope) {
        $scope.customers = [{
            name: 'Leonardo',
            city: 'Phoenix'
        }, {
            name: 'Michelangelo',
            city: 'Los Angeles'
        }, {
            name: 'Rafael',
            city: 'New York'
        }, {
            name: 'Donatello',
            city: 'Texas City'
        }];
    }
]);

DEMO

Second, just remove myApp from your <html> tag and everything will work just fine

<html ng-app="">

DEMO

Collectives™ on Stack Overflow

AngularJs Injector Module Error

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related