具有自己独立路由器的 Angular 应用程序答案

【问题标题】：Angular Apps with their own independent routers具有自己独立路由器的 Angular 应用程序
【发布时间】：2014-09-23 18:55:19
【问题描述】：

假设我有一个非常大的企业应用程序，细分为几个解耦的子模块（不要与角度模块混淆）。

我不想在一个地方膨胀路由并希望那些独立的模块（非角度模块）拥有自己的角度和路由模块，否则我必须向这些子模块中的每一个广播路由通知。如果这些子模块可以拥有自己的路由侦听器或定义，则非常理想。

Angular 新手。

模块 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"})
},

模块 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"})
},

模块 B 路由不工作，所以我不确定我们是否可以在多个地方设置路由监听器。

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>

编辑：当我第一次加载文档时，两个路由器都针对 /search/folios/:productId 执行但是在单击列表项后，只有模块A的路由器执行。

【问题讨论】：

ui-router 看起来很有希望，有多个路由/视图，我也会研究一下

标签： javascript angularjs angularjs-routing

【解决方案1】：

破解它。

ui-router 允许在单个页面应用程序中为不同模块（角度模块）提供多个状态和 url 路由器提供程序。

基本上，我的每个模块（软件模块）都有自己的“角度模块”和自己的路由引擎/状态机。

我的每个模块（软件模块和它的角度模块）接收并可以根据状态定义响应散列变化。即使它们已被定义，例如如果“route1”已为另一个模块定义，它也会响应。

原因：模块化和解耦系统。酷，该项目现在更有条理。

编辑： 在多个地方进行路由、将其放在一个中心位置并将路由更改广播到所有模块是一种糟糕的方法。

【讨论】：