Problem importing Angular module from different file

Hi guys!

I experience a problem with importin angular module (into app.js) from a different file. A brief example:

js/app.js:

// if uncomment the next line, app works
// angular.module('API', []);

var app = angular.module('ionicApp', ['ionic', 'API']);

lib/API.js:

var app = angular.module('API', []);
app.config({});

index.html

blah blah
  <script src="lib/API.js"></script>
  <script src="js/app.js"></script>
</head>

<body>
  <ion-nav-view name="basicForm"></ion-nav-view>
</body>

So if i try to import an Angular module from the other file, the app just does not render anything. Whilst imported module from the same file works well.

maybe you sould take a look in your javascript console in your browser (chrome --> dev tools)

because ionic is also an own angular module and you are loading it via another file :wink:

Thanks for your reply! I checked the error console (totally forgot about it) and it confirmed my idea. It actually says:

Error: [$injector:modulerr] Failed to instantiate module ionicApp due to:
[$injector:modulerr] Failed to instantiate module API due to:
[$injector:nomod] Module 'API' 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.

enter link description here
So here is a link provided by console.
So the thing is that angular does not see this file. Thats why the problem is ‘how to make angular see some other files’

try to write your API-app not on your variable app

1 Like

lol, that worked!

So the thing was that javascript created this variable out of global scope… Thank you for your help :smile:

1 Like