Angular Applications with their own independent routers
Let's say I have a very large enterprise application split into several decoupled submodules (not to be confused with angular modules).
I don't want to bloat routing in one place and want these independent modules (not angular) to have their own angular and routing modules, otherwise I had to pass routing notifications for each of these submodules. Ideally, these submodules can have their own listeners or routing definitions.
New in Angular.
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"})
},
Module B's routing doesn't work, so I'm not sure if we have the ability to listen to routing 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: When I first load the document, both routers are executed against / search / folios /: productId but then when clicking on list items, only router moduleA is executed.
source to share
Broken.
ui-router allows multiple state and url router providers for different modules (angular modules) in a single page application.
Basically, each of my modules (code module) has its own angular module with its own routing / state machine.
Each of my modules (code module and angular module) receives and can respond to hash changes based on state definitions. Even if they were defined via, for example, if "route1" was defined for another module, it will respond as well.
Reason: modularity and decoupled systems. Cool, the project is now more organized.
Edit: This is a bad approach for multi-location routing, have it in a central location and change the route translation to all modules.
source to share