主应用程序和子应用程序的两个控制器具有相同的 url 和角度 ui-route？

【问题标题】：Two controllers for main-app and sub-app with same url with angular ui-route?主应用程序和子应用程序的两个控制器具有相同的 url 和角度 ui-route？
【发布时间】：2014-06-16 20:50:30
【问题描述】：

我为主应用程序和子应用程序定义了两个控制器“BaseController”和“SubController”。两个控制器的配置指向空 url。

以下是主应用程序的配置：-

angular.module("main-app").config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('base', {
      url: "",
      views: {
        "base": {
          controller: 'BaseController' 
        }
      }
    });
}]);

这是子应用的配置：-

 angular.module("sub-app").config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
  //$locationProvider.html5Mode(true); 
  $stateProvider
  .state('sub', {
      url: "",
      views: {
        "patients": {
          templateUrl:"templates/scope/patients/patients_search.html",
          controller: 'PatientsController' 
        }
      },
    });
}]);

主应用包括子应用。

如何允许使用相同的空 url 加载两个控制器？

【问题讨论】：

标签： javascript angularjs routes

【解决方案1】：

首先，同一个根视图的两个控制器没有任何意义。这是因为控制器需要一个视图上下文来执行操作，即$scope 层次结构中的一个位置。

我认为您需要将控制器抽象为服务，这些服务可以注入到任何控制器中。例如，创建mainsrv 和subsrv 服务，然后在url: '' 上使用单个根控制器。然后您的根控制器定义可能如下所示：

angular.module('myapp', [])
    .controller('AppCtrl', ['mainsrv', 'subsrv', function(mainsrv, subsrv){
        // use mainsrv and subsrv services here
    }]);

如果您确实希望在根视图上加载多个控制器，请如上所述创建一个根视图，但在视图中使用ng-controller 来指定每个控制器的上下文。例如：

<div ng-controller="BaseController"></div>
<div ng-controller="PatientsController"></div>

【讨论】：