Imagine having a massive enterprise application divided into multiple independent submodules (not to be confused with angular modules).
I prefer not to overwhelm the routing in a single location and wish for these autonomous modules (non-angular modules) to possess their own angular and routing modules. Otherwise, I would need to send routing notifications to each of these submodules. It would be great if these submodules could have their own routing listeners or definitions.
New to Angular and seeking guidance.
Module A
angular.module("navigation", ["ngRoute"]).
config(function($routeProvider, $locationProvider){self.config($routeProvider, $locationProvider)}).
controller("FoliosController", function($scope, $location){self.foliosController($scope, $location)}).
controller("NavigationController", function($scope, $location, $routeParams){self.navigationController($scope, $location, $routeParams)});
angular.bootstrap(document.getElementById("navigation"), ["navigation"]);
//config part
config: function($routeProvider, $locationProvider) {
$routeProvider.
when("/", {templateUrl:"js/modules/search/view/partials/navigation.html"}).
when("/search/folios/:productId", {controller:"NavigationController", templateUrl:"js/modules/search/view/partials/navigation.html"})
},
Module B
var result = angular.module("result", ["ngRoute"]).
config(function($routeProvider, $locationProvider){self.config($routeProvider, $locationProvider)}).
controller("FoliosResultsController", function($scope, $location) {self.foliosResultsController($scope, $location)})
angular.bootstrap(document.getElementById("result"), ["result"]);
//config part
config: function($routeProvider, $locationProvider) {
$routeProvider.
when("/", {templateUrl:"js/modules/search/view/partials/result.html"}).
when("/search/folios/:productId", {controller:"NavigationController", templateUrl:"js/modules/search/view/partials/result.html"})
},
The routing for Module B seems to be malfunctioning, raising doubts if we can have routing listeners in multiple locations.
HTML
<div id="navigation" data-ng-cloak>
<ul id="folios" data-ng-controller="FoliosController" class="nav nav-pills nav-stacked">
<li data-ng-repeat="folio in folios" ng-class="{active: isActive('/search/folios/{{folio.productId}}')}">
<a href="#/search/folios/{{folio.productId}}">{{folio.title}}</a>
</li>
</ul>
<ng-view></ng-view>
</div>
Edit: Upon the initial document load, both routers are triggered for /search/folios/:productId. However, after clicking on list items, only the router for Module A is executed.