Angular + RequireJs + Ui.Router - angularjs

Question

I've just started using Angular alongside RequireJs and so far I have created a structure that looks like this:
app.js
app.core.js
app.controllers.js
app.services.js
The core module is where I hinge dependencies and pull in the services and controller modules, like this for example:
(function () {
var dependancies = ['angular'];
define(dependancies, function (angular) {
return angular.module('app.services', [])
.factory('VehicleService', ['$injector', function ($injector) {
var stub = {};
require(['../Angular/Services/VehicleService'], function (VehicleService) {
angular.extend(stub, $injector.invoke(VehicleService));
});
return stub;
}]);
});
})();
And each service is created in its own file like so:
(function () {
define(function () {
return ['$http', function ($http) {
return {
getAllMakes: function () {
return $http.get('/Api/RegisteredVehicle/GetAllMakes')
.success(function (response) {
return {
vehicleName: response
}
});
}
};
}];
});
})();
How can I now use $stateprovider.state.resolve and get my service instantiated correctly?
.state('quote', {
url: '/quote',
templateUrl: '/Sales/Dashboard/CreateQuoteVehicle',
controller: 'QuoteProposalCtrl as vm',
resolve: {
vehicleInfo: function () {
var stub = {};
require(['../Angular/Services/VehicleService'], function (VehicleService) {
angular.extend(stub, $injector.invoke(VehicleService));
});
return stub;
}
}
})

Answer 1

On your core angular module, inject $stateProvider, then put in the states. It should pull in the rest of your dependancies. This should then be loaded as the main starting requirejs file.
(function () {
var dependancies = ['angular', 'app.core', 'app.controllers', 'app.services'];
define(dependancies, function (angular) {
var app = angular.module('myApp', ['app.core', 'app.controllers', 'app.services']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('quote', {
url: '/quote',
templateUrl: '/Sales/Dashboard/CreateQuoteVehicle',
controller: 'QuoteProposalCtrl as vm',
resolve: {
vehicleInfo: function () {
var stub = {};
require(['../Angular/Services/VehicleService'], function (VehicleService) {
angular.extend(stub, $injector.invoke(VehicleService));
});
return stub;
}
}
})
});
return app;
})();
Depending on your setup you'd be loading the app something like:
<script data-main="scripts/app" src="scripts/require.js"></script>
One thing, im not sure you need this require, since it should already be loaded with the app.services dependancy.
var stub = {};
require(['../Angular/Services/VehicleService'], function (VehicleService) {
angular.extend(stub, $injector.invoke(VehicleService));
});
return stub;