ngRoute dependency issue

Question

http://jsfiddle.net/4nil/puw6huv4/
Here,
I am trying to inject ngroute dependency

var sampleApp = angular.module("sampleApp", ["ngRoute"]);

and trying to use routeprovider as below

sampleApp.config(["$routeProvider",
  function($routeProvider) {
    $routeProvider.
      when("/addRomCom", {
    templateUrl: "add_book.html",
    controller: "romcomctrl"
      }).
      when("/addHorror", {
    templateUrl: "add_book.html",
    controller: "horrorctrl"
      }).
      otherwise({
    redirectTo: "/"
      });
}]);

The same code works in a standalone application, i have only one html which has script tag which has the code.

i could not figure out the issue in the fiddle, please help! — BaajiRao, Dec 04 '15 at 06:17

gaurav5430 · Accepted Answer · 2015-12-04T08:23:00.703

0

The issue with your fiddle is the loading of your js. right now you are loading it in onLoad

Go to the javascript section settings and change the load type to : No Wrap in <body>

EDIT:

if you put it on load, the code would be local to the onLoad scope, and it would not be visible outside globally, so ng-app="myApp" would not be able to recognize the module because

var myApp = angular.module("myApp", [] ) ; lives only inside the onLoad function.

edited Dec 04 '15 at 08:23

answered Dec 04 '15 at 06:35

gaurav5430

12,934
6
54
111

it worked. But what's the difference? onload vs No wrap in – BaajiRao Dec 04 '15 at 07:54
see this: http://stackoverflow.com/questions/32206369/jsfiddle-onload-and-and-no-wrap-in-body – gaurav5430 Dec 04 '15 at 08:01
i still could not find out the reason, like all the html dom parsing is done, js are loaded, script is parsed and ready to run. So when 'onload' is used whats the problem and it's giving angular dependency error means it is executing the script code and it's executing it after dom parsing. so question remains why it works with 'NO WRAP'? – BaajiRao Dec 04 '15 at 08:27
It works with no wrap because the variables are available in global scope now , see edit – gaurav5430 Dec 04 '15 at 08:28
i think you are trying to put it other way, like js code would find the html dom elements not the other way around? – BaajiRao Dec 04 '15 at 08:29
could you please explain both the cases with flow(steps) like, -1. DOM parsing -2. DOM Rendering -3. Script code execution and so on? – BaajiRao Dec 04 '15 at 08:36
Yes, you can try writing your code in onload , the var myApp won't be visible to ng-app because it would be inside a anonymous function – gaurav5430 Dec 04 '15 at 08:54
ask a separate question for that... more people will reply, maybe somebody else can explain it bettr – gaurav5430 Dec 04 '15 at 08:56

ngRoute dependency issue

1 Answers1