Submodules' routes not loaded if different file

289 views Asked by At

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

0

There are 0 answers