Solved

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

Posted on 2016-10-20
4
50 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:knowlton
  • 2
  • 2
4 Comments
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 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: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 51

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:knowlton
ID: 41854086
:  )
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

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 gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

705 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now