Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

AngularJS ver 1.5.8  - "Hello World" type web page has problem:   failed to instantiate module

Posted on 2016-10-20
4
Medium Priority
?
292 Views
Last Modified: 2016-10-21
<html>
	<head>

	<title>robotz</title>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
     
  	</head>
<body ng-app="HellowWorldApp">	

<div>
    <div ng-controller="HelloWorldController">
        <h1>{{greeting}}</h1>
    </div>
</div>

    <script type="text/javascript">

    $(document).ready(function () {
        console.log("ready!");


        console.log("...before angular load module");

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

        HelloWorldApp.controller('HelloWorldController', function ($scope) {
            console.log(angular);
            $scope.allowGlobals();
            $scope.greeting = "Hello World";
        });
    });
        
    </script>


	
</body>
</html>

Open in new window


Error in Chrome dev tools console:

avigated to http://localhost:51587/robotz.html
robotz.html:22 ready!
robotz.html:25 ...before angular load module
jquery.js:3855 Uncaught Error: [$injector:modulerr] Failed to instantiate module HellowWorldApp due to:
Error: [$injector:nomod] Module 'HellowWorldApp' 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.
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=HellowWorldApp
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:68:12
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:2082:17
    at ensure (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:2006:38)
    at module (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:2080:14)
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4617:22
    at forEach (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:321:20)
    at loadModules (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4601:5)
    at createInjector (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4523:19)
    at doBootstrap (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:1758:20)
    at bootstrap (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:1779:12)
http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=HellowWorldApp&p1=E…cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.8%2Fangular.js%3A1779%3A12)
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:68:12
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:2082:17
    at ensure (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:2006:38)
    at module (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:2080:14)
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4617:22
    at forEach (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:321:20)
    at loadModules (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4601:5)
    at createInjector (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4523:19)
    at doBootstrap (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:1758:20)
    at bootstrap (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:1779:12)
http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=HellowWorldApp&p1=E…cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.8%2Fangular.js%3A1779%3A12)
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:68:12
    at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4640:15
    at forEach (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:321:20)
    at loadModules (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4601:5)
    at createInjector (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:4523:19)
    at doBootstrap (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:1758:20)
    at bootstrap (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:1779:12)
    at angularInit (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:1664:5)
    at HTMLDocument.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js:31763:5)
    at mightThrow (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js:3570:29)(anonymous function) @ angular.js:68(anonymous function) @ angular.js:4640forEach @ angular.js:321loadModules @ angular.js:4601createInjector @ angular.js:4523doBootstrap @ angular.js:1758bootstrap @ angular.js:1779angularInit @ angular.js:1664(anonymous function) @ angular.js:31763mightThrow @ jquery.js:3570process @ jquery.js:3638

Open in new window





Here is my js fiddle:

https://jsfiddle.net/TomJSFiddleNew/w9r5214u/
0
Comment
Question by:Tom Knowlton
  • 2
  • 2
4 Comments
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 41853347
Ouch! Angular instantiation inside a JQuery document ready :)

Angular is independent of jQuery - version 1.x has jQuery lite as part of the library and it is possible to mix the two - but you shouldn't do it unless it is necessary. Angular has its own way of handling document ready which you should use instead.

Another cause of errors like these is misspelled words - in this case your ng-app="HellowWorldApp" having an extra 'w' is going to cause the problem because you are binding your module to a non-existent app.

Here is your sample with corrected spelling and re worked to start Angular style
<html>
<head>
<title>robotz</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
</head>
<body ng-app="HelloWorldApp">  
<div>
    <div ng-controller="HelloWorldController">
        <h1>{{greeting}}</h1>
    </div>
</div>
<script type="text/javascript">
(function(angular) {
  "use strict";
  angular.module('HelloWorldApp', [])
  .controller('HelloWorldController', function ($scope) {
    $scope.greeting = "Hello World";
  });
})(window.angular);
</script>
</body>
</html>

Open in new window

0
 
LVL 5

Author Closing Comment

by:Tom Knowlton
ID: 41854042
"Chuck Norris doesn't make typing mistakes.  He thinks in binary and projects what he wants onto the CPU registers.  If his command does not make sense, the computer rewires itself in real time so that the command works."

But...I'm not Chuck Norris.  :  (

Thanks for catching that.  I remember staring at my code, at that typo, and just NOT SEEING IT for some reason.

And thanks for the rework and the tips about jQuery vs Angular.
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41854083
Chuck Norris also has a bear rug - the bear is not dead - it is just to afraid to move.

If I could have back the time spent on spelling error bugs ...

You are most welcome.
0
 
LVL 5

Author Comment

by:Tom Knowlton
ID: 41854086
:  )
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

You have this traditional web application that refreshes the whole page each time you navigate and you think it's a good time to convert it to a Single-Page approach. What should you know in advance? Read on, I'll guide you through it.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
When cloud platforms entered the scene, users and companies jumped on board to take advantage of the many benefits, like the ability to work and connect with company information from various locations. What many didn't foresee was the increased risk…
Suggested Courses

782 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question