Solved

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

Posted on 2016-10-20
4
143 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 55

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 55

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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
AngularJS - having trouble with $http.get 32 104
Dynamic Menu based on Status of Screen 1 50
bindings in angular 1.5 components 8 121
Facebook React and ASP.NET Core 1.0 3 249
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.
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…

821 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