I'm using AngularJS with RequireJS and ui-router, with the Play Framework 2.3 (and the WebJars stuff).
main.js
(function () {
'use strict';
requirejs.config({
// Packages = top-level folders; loads a contained file named 'main.js"
packages: ['dashboard'],
paths: {
'angular': ['../lib/angularjs/angular'],
'angular-ui-router': ['../lib/angular-ui-router']
},
shim: {
'angular': {
exports: 'angular'
},
'angular-ui-router': {
deps: ['angular'],
exports: 'angular'
}
}
});
require(['angular', 'angular-ui-router', './app'],
function (angular) {
var mod = angular.module('app', ['ui.router']);
mod.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $locationProvider, $urlRouterProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/app/profile');
$stateProvider.state('profile', {
abstract: true,
url: '/app/profile',
templateUrl: '/views/app/content',
controller: 'AppController'
});
}]);
angular.bootstrap(document, ['app']);
});
})();
app.js
define(['angular', 'dashboard'], function(angular) {
'use strict';
return angular.module('app', ['app.dashboard']);
});
dashboard/main.js
define(['angular', './routes'], function(angular) {
'use strict';
return angular.module('app.dashboard', ['dashboard.routes']);
});
dashboard/routes.js
define(['angular'], function(angular) {
'use strict';
var mod = angular.module('dashboard.routes', []);
console.log("Enter the routes.js"); // DOES WORK
mod.config(['$stateProvider', function($stateProvider) {
console.log("Enter the config file in routes.js"); // DOESN'T WORK, NEVER REACH THAT POINT
$stateProvider.state('profile.dashboard', {
url: '',
templateUrl: '/views/app/dashboard'
});
}]);
return mod;
});
The states defined in my submodules are not loaded, but if I'm putting them in the main main.js, it does work :
mod.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $locationProvider, $urlRouterProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/app/profile');
$stateProvider.state('profile', {
abstract: true,
url: '/app/profile',
templateUrl: '/views/app/content',
controller: 'AppController'
})
.state('profile.dashboard', {
url: '',
templateUrl: '/views/app/dashboard'
});
;
}]);
So this is really a problem about loading with RequireJS, but I can't figure out what's wrong..
Any ideas ? Thanks