frontend part of service on Angularjs, now I try to configure it to work with Requirejs.
I need to resolve dependency in app.js
'application/services/P48Wallet'
In P48Wallet.js I need to resolve Http.js
define(['application/app', 'application/services/Http'], function(app) {
In Http.js, when I trying to return app.factory
return app.factory('Http', function($http, $q, $location, $rootScope) {
I receive an error: Uncaught TypeError: Cannot call method 'factory' of undefined Http.js
console.log(app); // undefined
Whats wrong? Why app is undefined in Http.js
==================================================================================
Project structure
static()
js()
application()
controllers()
Main.js
directives()
...
filters()
...
services()
Http.js
P48Wallet.js
views()
main.html
app.js
main.js
libs()
angular.min.js
....
==================================================================================
index.html
<!DOCTYPE html>
<html>
<head>
<script data-main="/static/js/application/main" src="/static/js/libs/require.min.js"></script>
<script type="text/javascript">
var server_url = '{$HTTP_STATIC_PATH}';
</script>
</head>
<body>
<div class="loader_cover" loader="{literal}{{showLoader}}{/literal}"><div class="loader_img"></div></div>
<div class="page" ng-view></div>
</body>
</html>
==================================================================================
app.js
define(
[
'angularAMD',
'angular-route',
'angular-animate',
'application/services/P48Wallet'
],
function (angularAMD) {
var app = angular.module('Order', ['ngRoute', 'ngAnimate']);
app.config(function($routeProvider){
$routeProvider
.when('/',
angularAMD.route({
templateUrl: 'static/js/application/views/main.html',
controller: 'application/controllers/Main',
resolve: {
deposits:
function(P48Wallet) {
return P48Wallet.getUserDeposits();
}
}
})
)
.otherwise({redirectTo: '/'});
});
angularAMD.bootstrap(app);
return app;
});
==================================================================================
main.js
require.config({
baseUrl: "static/js",
paths: {
'angular': 'libs/angular.min',
'angular-route': 'libs/angular-route.min',
'angular-animate': 'libs/angular-animate.min',
'angularAMD': 'libs/angularAMD.min'
},
shim: {
'angularAMD': ['angular'],
'angular-route': ['angular'],
'angular-animate': ['angular']
},
deps: ['application/app']
});
==================================================================================
Controller Main.js
define(['application/app'], function (app) {
'use strict';
app.controller('Main', function ($rootScope, $location) {
var Main = {};
return $rootScope.Main = Main;
});
});
==================================================================================
Services
1) Http.js
'use strict';
define(['application/app'], function(app) {
return app.factory('Http', function($http, $q, $location, $rootScope) {
return HTTP = {
xxx: '/',
xxx: false
};
});
});
2) P48Wallet.js
'use strict';
define(['application/app', 'application/services/Http'], function(app) {
console.log(app); //undefined
return app.factory('P48Wallet', function(Http) {
// ...
return this;
});
});
app.jsis has unbalanced brackets and parentheses. Perhaps you abbreviated your code from a bigger piece. A good way to do this and avoid pasting into your question code that is not balanced is to save your file under a different name and edit it with an editor that shows such problems. When you find there is no problem, then you can paste it into your question.