javascript - routeprovider - otherwise angularjs

Cargar dinámicamente el controlador en angularjs $ routeProvider

Question

Actualmente tengo una aplicación AngularJS con enrutamiento integrado y funciona perfectamente con las asignaciones de propiedades del controller estático. pero lo que realmente quiero hacer es asignar dinámicamente controladores con diferentes rutas:

$routeProvider
 .when("/Dashboards/:dashboardName",{
    templateUrl:function(params) {
                 return "Dashboards/" + params.dashboardName;
                //some ASP.NET MVC calls to return partial views (this part works)
        }
  })

Lo que me gustaría hacer es hacer lo mismo con respecto a la propiedad de mi controller aquí, como:

$routeProvider
 .when("/Dashboards/:dashboardName",{
       templateUrl:function(params) {
             return "Dashboards/" + params.dashboardName;
            //some ASP.NET MVC calls to return partial views (this part works)
           },
       controller: function(params) {
             return params.dashboardName+"Controller"; (this part DOESN''T work)
           }
  })

pero como parece, paramsProvider un error que dice que no se encuentra paramsProvider

Entonces, ¿hay alguna forma en que pueda cargar dinámicamente el nombre de mi función de controlador en la configuración de ruta?

Answer 1

Aquí hay algo que también funciona, (al menos para mí). Esto puede ayudar a las futuras personas en busca de respuesta.

$stateProvider
    .state(''foo'', {
        url: ''/foo/:bar'',
        templateUrl: ''some-template-path.html'',
        resolve : {
            getController : function($stateParams){
                if ($stateParams.bar === "tab1") {

                    return "tab1Controller"

                }else if ($stateParams.bar === "tab2") {

                    return "tab2Controller"

                }else if ($stateParams.bar === "tab3"){

                    return "tab3Controller"

                }else if ($stateParams.bar === "tab4") {

                    return "tab4Controller"

                }
            }
        },
        controllerProvider: function(getController){
            return getController;
        },

No es el código más corto, pero al menos es más fácil de leer. Además, si desea darle al controller un nombre diferente al de la pestaña / nombre de tablero de control.

Answer 2

Esto es posible hacerlo usando un enrutador ui angular .

El ui-router le permite especificar un "controllerProvider" para especificar una función para proporcionar un controlador. Entonces la solución se vería así:

$stateProvider
.state("/Dashboards/:dashboardName",{
   templateUrl:function($stateParams) {
         return "Dashboards/" + $stateParams.dashboardName;
       },
   controllerProvider: function($stateParams) {
         return $stateParams.dashboardName+"Controller";
       }
  })

¡Espero que ayude!

Answer 3

He estado intentando lo mismo. Una solución que he encontrado es hacer esto dentro de su routeProvider:

 $routeProvider
    .when("/Dashboards/:dashboardName",{
        templateUrl:function(params) {
            return "Dashboards/" + params.dashboardName;
        },
        controller: ''dynamicController''
 });

Y luego hace su cálculo de qué "pseudo-controlador" (por falta de un nombre mejor) para cargar dentro de la definición de "dynamicController".

var controllers = {
    unoController: function($scope, $routeParams, $rootScope) {
        // Do whatever
    },
    dosController: function($scope, $routeParams, $rootScope) {
        // Whatever for this controller
    }
}

app.controller(''dynamicController'', [''$scope'', ''$routeParams'', ''$rootScope'', function($scope, $routeParams, $rootScope) {
    controllers[$routeParams.dashboardName+"Controller"]($scope, $routeParams, $rootScope);
}]);

Esto supone que $ routeParams.dashboardName es uno de ["uno", "dos"].

Tome esto con un grano de sal, ya que solo he tenido unos 3 días con Angular, pero hasta ahora este enfoque ha funcionado muy bien para lo que estoy tratando de lograr.

Answer 4

No sé si depende de la versión de AngularJS pero puede servir una función a la propiedad del controller , convirtiéndose la función en el controlador real. Utilizando este hecho junto con la herencia del controlador , puede obtener un código más condensado como el que estaba buscando, creo:

$routeProvider
.when("/Dashboards/:dashboardName",{
    templateUrl:function(params) {
        return "Dashboards/" + params.dashboardName;
    },
    controller: function($scope, $routeParams, $controller) {
        /* this creates a child controller which, 
           if served as it is, should accomplish 
           your goal behaving as the actual controller
           (params.dashboardName + "Controller") */
        $controller($routeParams.dashboardName + "Controller", {$scope:$scope});
    }
})

Descargo de responsabilidad: Sinceramente, no sé si este enfoque tiene inconvenientes. Aunque no parece tan

Answer 5

Resolví este problema al no especificar el controlador en $ routeProvider, sino colocarlo en el archivo especificado en templateURL.

$routeProvider
 .when("/Dashboards/:dashboardName",{
    templateUrl:function(params) {
                 return "Dashboards/" + params.dashboardName;
        }
  })

En DashboardsNAME.html

<div class="container" ng-Controller=''DashboardsNAMEController''>Food</div>

Esta técnica aún requiere que en algún momento antes de que se cree una instancia de la ruta, haya registrado DashboardsNAMEController . Sospecho que el mejor lugar para hacerlo es en el método module.run() con llamada a su propio servicio, pero lo hago en mi controlador principal porque funciona y es un controlador corto de todos modos.