Solved

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

Posted on 2016-10-20
4
115 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 54

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 54

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This Micro Tutorial will teach you how to censor certain areas of your screen. The example in this video will show a little boy's face being blurred. This will be demonstrated using Adobe Premiere Pro CS6.
Established in 1997, Technology Architects has become one of the most reputable technology solutions companies in the country. TA have been providing businesses with cost effective state-of-the-art solutions and unparalleled service that is designed…

813 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

8 Experts available now in Live!

Get 1:1 Help Now