Very late answer... I searched the web for hours and I am very surprised
that nobody isolated and addressed this issue. This is the only post that
explains exactly what the problem is. Modules must not be aware that they
are dependencies and must behave as they are root ones and the dependent
modules have to manage conflicts.
Here is a simple module that proposes an alternative/wrapper for the route
service which tries to address this issue in a relatively clean way:
angular.module('modularRouter', ['ngRoute'])
.provider('moduleRoute', ['$routeProvider', function($routeProvider) {
var modules_routes = {}, routes_defined = false;
function getModuleRouteConfig(module) {
if(modules_routes[module] === undefined) {
modules_routes[module] = { route_prefix: '', routes: [] };
}
return modules_routes[module];
}
this.when = function(module, path, route) {
var module_routing_conf = getModuleRouteConfig(module);
module_routing_conf.routes.push({ path: path, definition: route });
return this;
};
this.defineDependencyRoute = function(module, prefix) {
var module_routing_conf = getModuleRouteConfig(module);
module_routing_conf.route_prefix = prefix;
};
function modularRoutesFactory() {
var modularRoutes = {};
modularRoutes.register = function() {
if(!routes_defined) {
routes_defined = true;
for (var m in modules_routes) {
var module = modules_routes[m];
for (var i = 0, len = module.routes.length; i < len; i++) {
var route = module.routes[i];
/*
* Using $routeProvider in the run() block.
* This is a hack and I don't know what it really implies.
*/
$routeProvider.when(module.route_prefix+route.path, route.
definition);
}
}
}
};
return modularRoutes;
}
this.$get = [modularRoutesFactory];
}]);
angular.module('modularRouter').run(['moduleRoute', function(moduleRoute) {
moduleRoute.register(); //this is where all routes get really defined
through $routeProvider
}]);
So having a this submodule:
angular.module('Dependency', ['modularRouter'])
.config(['moduleRouteProvider', function(moduleRouteProvider) {
moduleRouteProvider
.when('Dependency', '/a', { template: 'a.html' }) //Is there a way to
skip passing the module name?
.when('Dependency', '/b', { template: 'b.html' });
}]);
And this main one:
angular.module('Main', ['modularRouter'])
.config(['moduleRouteProvider', function(moduleRouteProvider) {
//Module names should always be specified. No one knows if he is being
used or not
moduleRouteProvider
.when('Main', '/b', { template: 'no_conflict.html' })
.defineDependencyRoute('Dependency', '/prefix');
}]);
Should give us the following urls:
/b -> no_conflict.html
/prefix/a -> a.html
/prefix/b -> b.html
On Thursday, 6 June 2013 16:02:36 UTC+1, [email protected] wrote:
>
> I'm wondering if anyone has come across a more modular way to do routing?
>
> Essentially what I would like to do is define a number of modules that my
> app can be composed of that are all very self contained. The problem that I
> am running into now is that when adding routing to modules they need to
> know the routes of the other modules that they would like to 'attach' to:
>
> // Parent Module
> angular.module('ParentModule', [])
> .config(function($routeProvider) {
> $routeProvider
> .when('/parent-module',
> {
> templateUrl: 'parent-module.html',
> controller: 'ParentCtrl'
> }
> })
>
> // Child Module
> angular.module('ChildModule', [])
> .config(function($routeProvider) {
> $routeProvider
> .when('/parent-module/child-module', // Child Module should not need
> to know about parent module.
> {
> templateUrl: 'child-module.html',
> controller: 'ChildCtrl'
> }
> })
>
> Instead I would like a module to be more self contained and do something
> more like this:
>
> // Parent Module
> angular.module('ParentModule', [])
> .config(function($routeProvider) {
> $routeProvider
> .when('/parent-module',
> {
> templateUrl: 'parent-module.html',
> controller: 'ParentCtrl'
> }
> // this would attach the child module routes to the parent module.
> .attach('ChildModule', '/parent-module')
> })
>
> // Child Module
> angular.module('ChildModule', [])
> .config(function($routeProvider) {
> $routeProvider
> .when('/child-module',
> {
> templateUrl: 'child-module.html',
> controller: 'ChildCtrl'
> }
> })
>
> Does anyone have any suggestions on existing solutions?
>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
