AngularJS Authentication Service in a different file - angularjs

Question

I am using this tutorial to create lazy loading:
http://ify.io/lazy-loading-in-angularjs/
And this tutorial for authentication:
https://coderwall.com/p/f6brkg
I wanted to save the authentication service in a different file, say AuthenticationService.js and inject it as a dependency into my app.js. However, the app.js has to be bootstrapped, and returned before I can use the define(['app'], function(){ ... } for the service.
How can I accomplish this?
What I have so far:
app.js
define(
[
'app/scripts/routes',
'app/scripts/services/dependencyResolverFor',
'app/scripts/services/AuthenticationService',
'uiRouter'
],
function(config, dependencyResolverFor, AuthenticationService)
{
var app = angular.module('app', ['ngRoute','ui.router']);
console.log(AuthenticationService);
// Register all providers. We can now lazy load files as needed.
// Provide dependencies through the routes.js
app.config([
'$routeProvider',
'$locationProvider',
'$controllerProvider',
'$compileProvider',
'$filterProvider',
'$provide',
'$stateProvider',
function($routeProvider, $locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $stateProvider) {
app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
$locationProvider.html5Mode(false);
if(config.routes !== undefined) {
angular.forEach(config.routes, function(route, path) {
// Routing happens here
});
}
}
]);
// Check User
app.run( ['$rootScope', '$state', function( $rootScope, $state) {
$rootScope.$on("$stateChangeStart", function(event, currentRoute, prevRoute){
// Authenticate here and have access to the service
});
}]);
return app;
});
AuthenticationService.js (want it to be like this. Currently, it doesn't work because it says app is not defined, since it is not returned yet within app.js
define(['app'], function(app)
{
app.service('AuthenticationService', function(){
var isLogged = false;
var user = 'guest';
var username = '';
this.login = function() { isLogged = true; };
this.checkLogin = function() { return isLogged; };
});
});

Answer 1

You could put your AuthenticationService in a separate angular module, then make your main app depend on the sub-module (i.e. the module on which AuthenticationService is defined). something like...
angular.module('OtherModule', []).service('AuthenticationService', /* etc */);
then include the module:
var app = angular.module('app', ['ngRoute','ui.router', 'OtherModule']);
edit: you can call .name on a module object (for example, the one getting injected into app.js) to get it's name, so you don't have to hard-code the 'OtherModule' string as a dependency, you can do something like
var app = angular.module('app', ['ngRoute','ui.router', InjectedModule.name]);