0

Trying to create a simple angular app like this :

HTML

<div ng-app="myApp">
  <div ng-controller="appCtrl">

    Test Variable :

    <input type="radio" class="radio-inline" name="test" ng-model="var.test" value=true> Yes

    <input type="radio" class="radio-inline" name="test" ng-model="var.test" value=false> No

    <hr>
    <p>{{var.test}}</p>
    <hr>
    <p>Yes: <span ng-if="var.test">$</span></p>
    <p>No: <span ng-if="!var.test">$</span></p>
  </div>

</div>

Javascript

var myApp = angular.module('myApp', []);
myApp.controller('appCtrl', function($scope) {
  $scope.var = {
    test: true
  }
})

But I get this error on page load :

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 the dependencies as the second argument.

Here is the fiddle.

Possibly it's a silly thing but I just can't figure out what is wrong with this code, please help me out. Thanks!

vivekanon
  • 1,813
  • 3
  • 22
  • 44

2 Answers2

1

Your code does not have problem, but the problem is in fiddler. what is actually doing angular app name is already being injecting some how in html tag and when you add new app name in div then it throws error.

check this: Working example

Siraj Hussain
  • 874
  • 9
  • 25
1

I could also make your code work as is by just changing the load type to no-wrap in body:

click on javascript tool option and select no wrap- in <body>

https://jsfiddle.net/xgr70bba/3/

Arathi Sreekumar
  • 2,544
  • 1
  • 17
  • 28
  • Thanks, this works, could you also explain the reason behind this ? – vivekanon Jun 16 '16 at 07:49
  • I believe the angular controller was trying to execute before the DOM was completely loaded (even though the onload was selected), jsfiddle bug I suppose. But if you append to end of body tag, all the scripts will be loaded only after all the DOM upto that point is loaded, hence the necessary DOM resources are already available. I just happenned to stumble upon this solution after I tried it in plunker and it worked without a problem. – Arathi Sreekumar Jun 16 '16 at 08:15