javascript - tablas - AngularJS, ¿qué hay de las rutas múltiples con diferentes plantillas pero el mismo controlador?

tablas dinamicas angular 4

Question

Estoy investigando si puedo tener lo que dice el título. Aquí está mi pensamiento.

Supongamos que tengo estas rutas:

  .when(''/'', {
        templateUrl : ''partials/homepage.html'',
  })

  .when(''/test'', {
        templateUrl : ''partials/test.html'',
  })

  .when(''/page/:pageID'', {
        templateUrl : ''partials/page.html'',
  })

  .when(''/page/single/:pageID'', {
        templateUrl : ''partials/page-single.html'',
  })

Hasta ahora tuve la oportunidad de agregar la plantillaUrl y también los detalles del controlador en la ruta y todo estaba funcionando bien.

Ahora la aplicación ha cambiado y solo hay un controlador con toda la información necesaria y debe seguir siendo un controlador. Y las rutas serán algo así:

  .when(''/:templateName/:pageID'', {
       controller: ''myCtrl''
  })

¿Puedo establecer desde el controlador el ID de la plantilla obteniendo el parámetro templateName? Y si es así, ¿qué hay de la última ruta example / page / single /: pageID? ¿Cómo puedo saber que hay una segunda opción en ruta?

Puedo tomar el parámetro templateName y verlo cambiar con el método $ routeChangeSuccess, pero no puedo encontrar ninguna manera de establecer la plantilla sobre la marcha.

¿Algunas ideas?

Answer 1

Me gustaría mover su lógica singleton de su controlador a un servicio. Como no proporcionó muchos códigos a continuación, hay un ejemplo para darle una idea de cómo podría funcionar.

app.config(function($routeProvider) {
  
  $routeProvider
    .when(''/'', {
      templateUrl: ''partials/homepage.html'',
      controller: ''SingleController''
    })
    .when(''/test'', {
      templateUrl: ''partials/test.html'',
      controller: ''SingleController''
    })
    .when(''/page/:pageId'', {
      templateUrl: ''partials/page.html'',
      controller: ''SingleController''
    });
  
});

app.provider(''appState'', function() {
  
  this.$get = [function() {
    return {
      data: {}
    };
  }];

});

app.controller(''SingleController'', function ($scope, appState) {
  
  $scope.data = appState.data;
  
});

Pero si debe ser un controlador singleton, podría usar la directiva ng-controller antes de su directiva ng-view , de modo que se convierta en un alcance de $rootScope para todas sus vistas. Después de eso, simplemente agregue contenedores de funciones vacías en su $ routeProvider para los controladores.

Answer 2

Una solución podría ser la siguiente:

angular.module(''myapp'', []).
            config([''$routeProvider'', function($routeProvider) {
            $routeProvider.when(''/:templateName/:pageId'', {
                templateUrl: function(urlattr){
                    return ''/pages/'' + urlattr.templateName + ''.html'';
                },
                controller: ''YourCtrl''
            });
        }
    ]);

De la documentación de AngularJs 1.3:

templateUrl - { string | function() }: ruta o función que devuelve una ruta a una plantilla html que debe usar ngView.

Si templateUrl es una función, se invocará con los siguientes parámetros: Array.<Object> - parámetros de ruta extraídos del $location.path() actual aplicando la ruta actual