javascript - otherwise - ng-view angularjs ejemplo

Encaminamiento dinámico AngularJS

Question

Actualmente tengo una aplicación AngularJS con enrutamiento integrado. Funciona y todo está bien.

Mi archivo app.js se ve así:

angular.module(''myapp'', [''myapp.filters'', ''myapp.services'', ''myapp.directives'']).
  config([''$routeProvider'', function ($routeProvider) {
      $routeProvider.when(''/'', { templateUrl: ''/pages/home.html'', controller: HomeController });
      $routeProvider.when(''/about'', { templateUrl: ''/pages/about.html'', controller: AboutController });
      $routeProvider.when(''/privacy'', { templateUrl: ''/pages/privacy.html'', controller: AboutController });
      $routeProvider.when(''/terms'', { templateUrl: ''/pages/terms.html'', controller: AboutController });
      $routeProvider.otherwise({ redirectTo: ''/'' });
  }]);

Mi aplicación tiene un CMS integrado donde puede copiar y agregar nuevos archivos html dentro del directorio / pages .

Me gustaría seguir revisando el proveedor de enrutamiento aunque sea para los nuevos archivos agregados dinámicamente.

En un mundo ideal, el patrón de enrutamiento sería:

$ routeProvider.when (''/ pagename '', {templateUrl: ''/ pages / pagename .html'', controller: CMSController});

Entonces, si mi nuevo nombre de página era "contact.html", me gustaría que angular recoja "/ contact" y lo redirija a "/pages/contact.html".

¿Es esto posible? y si es así, ¿cómo?

Actualizar

Ahora tengo esto en mi configuración de enrutamiento:

$routeProvider.when(''/page/:name'', { templateUrl: ''/pages/home.html'', controller: CMSController })

y en mi CMSController:

function CMSController($scope, $route, $routeParams) {
    $route.current.templateUrl = ''/pages/'' + $routeParams.name + ".html";
    alert($route.current.templateUrl);
}
CMSController.$inject = [''$scope'', ''$route'', ''$routeParams''];

Esto establece el templateUrl actual en el valor correcto.

Sin embargo , ahora me gustaría cambiar la vista ng con el nuevo valor templateUrl. ¿Cómo se logra esto?

Answer 1

A partir de AngularJS 1.1.3, ahora puedes hacer exactamente lo que quieras usando el nuevo parámetro catch-all.

https://github.com/angular/angular.js/commit/7eafbb98c64c0dc079d7d3ec589f1270b7f6fea5

Desde el compromiso:

Esto permite que routeProvider acepte parámetros que coincidan con subcadenas incluso cuando contengan barras diagonales si están prefijadas con un asterisco en lugar de dos puntos. Por ejemplo, las rutas como edit/color/:color/largecode/*largecode coincidirán con algo como esto http://appdomain.com/edit/color/brown/largecode/code/with/slashs .

Lo he probado yo mismo (usando 1.1.5) y funciona muy bien. Solo tenga en cuenta que cada nueva URL recargará su controlador, por lo que para mantener cualquier tipo de estado, es posible que necesite usar un servicio personalizado.

Answer 2

Aquí hay otra solución que funciona bien.

(function() {
    ''use strict'';

    angular.module(''cms'').config(route);
    route.$inject = [''$routeProvider''];

    function route($routeProvider) {

        $routeProvider
            .when(''/:section'', {
                templateUrl: buildPath
            })
            .when(''/:section/:page'', {
                templateUrl: buildPath
            })
            .when(''/:section/:page/:task'', {
                templateUrl: buildPath
            });



    }

    function buildPath(path) {

        var layout = ''layout'';

        angular.forEach(path, function(value) {

            value = value.charAt(0).toUpperCase() + value.substring(1);
            layout += value;

        });

        layout += ''.tpl'';

        return ''client/app/layouts/'' + layout;

    }

})();

Answer 3

Creo que la forma más fácil de hacerlo es resolver las rutas más tarde, por ejemplo, podrías preguntar las rutas a través de json. Comprueba que fabrico una fábrica del $ routeProvider durante la fase de configuración, a través de $ provide, para poder seguir utilizando el objeto $ routeProvider en la fase de ejecución, e incluso en los controladores.

''use strict'';

angular.module(''myapp'', []).config(function($provide, $routeProvider) {
    $provide.factory(''$routeProvider'', function () {
        return $routeProvider;
    });
}).run(function($routeProvider, $http) {
    $routeProvider.when(''/'', {
        templateUrl: ''views/main.html'',
        controller: ''MainCtrl''
    }).otherwise({
        redirectTo: ''/''
    });

    $http.get(''/dynamic-routes.json'').success(function(data) {
        $routeProvider.when(''/'', {
            templateUrl: ''views/main.html'',
            controller: ''MainCtrl''
        });
        // you might need to call $route.reload() if the route changed
        $route.reload();
    });
});

Answer 4

En los patrones de URI de $ routeProvider, puede especificar parámetros de variables, como por ejemplo: $routeProvider.when(''/page/:pageNumber'' ... , y acceda a él en su controlador a través de $ routeParams.

Hay un buen ejemplo al final de la página $ route: http://docs.angularjs.org/api/ng.$route

EDITAR (para la pregunta editada):

Desafortunadamente, el sistema de enrutamiento es muy limitado: hay mucha discusión sobre este tema, y ​​se han propuesto algunas soluciones, como la creación de varias vistas con nombre, etc. Pero ahora, la directiva ngView solo sirve UNA vista por ruta, en uno a uno. Puede hacerlo de varias formas: la más simple sería usar la plantilla de la vista como cargador, con una etiqueta <ng-include src="myTemplateUrl"></ng-include> en ella ($ scope.myTemplateUrl ser creado en el controlador).

Utilizo una solución más compleja (pero más limpia, para problemas más grandes y más complicados), básicamente saltándome el servicio $ route, que se detalla aquí:

http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Answer 5

No estoy seguro de por qué funciona, pero las rutas dinámicas (o comodín si lo prefiere) son posibles en angular 1.2.0-rc.2 ...

http://code.angularjs.org/1.2.0-rc.2/angular.min.js
http://code.angularjs.org/1.2.0-rc.2/angular-route.min.js

angular.module(''yadda'', [
  ''ngRoute''
]).

config(function ($routeProvider, $locationProvider) {
  $routeProvider.
    when(''/:a'', {
  template: ''<div ng-include="templateUrl">Loading...</div>'',
  controller: ''DynamicController''
}).


controller(''DynamicController'', function ($scope, $routeParams) {
console.log($routeParams);
$scope.templateUrl = ''partials/'' + $routeParams.a;
}).

example.com/foo -> cargas "foo" parcial

example.com/bar-> cargas "barra" parcial

No es necesario ningún ajuste en la vista ng. El caso ''/: a'' es la única variable que he encontrado que logrará esto ... ''/: foo'' no funciona a menos que tus parciales sean todos foo1, foo2, etc ... ''/: a'' funciona con cualquier parcial nombre.

Todos los valores disparan el controlador dinámico, por lo que no hay "lo contrario", pero creo que es lo que está buscando en un escenario de enrutamiento dinámico o comodín.

Answer 6

Ok lo resolvió

Se agregó la solución a GitHub - http://gregorypratt.github.com/AngularDynamicRouting

En mi configuración de enrutamiento app.js:

$routeProvider.when(''/pages/:name'', {
    templateUrl: ''/pages/home.html'', 
    controller: CMSController 
});

Luego en mi controlador CMS:

function CMSController($scope, $route, $routeParams) {

    $route.current.templateUrl = ''/pages/'' + $routeParams.name + ".html";

    $.get($route.current.templateUrl, function (data) {
        $scope.$apply(function () {
            $(''#views'').html($compile(data)($scope));
        });
    });
    ...
}
CMSController.$inject = [''$scope'', ''$route'', ''$routeParams''];

Con #views siendo mi <div id="views" ng-view></div>

Entonces ahora funciona con enrutamiento estándar y enrutamiento dinámico.

Para probarlo copié about.html llamado portfolio.html, cambié algunos de sus contenidos e ingresé /#/pages/portfolio en mi navegador y hey presto portfolio.html se mostró ....

Se agregaron $ apply y $ compilados actualizados al html para que se pueda inyectar contenido dinámico.

Answer 7

angular.module(''myapp'', [''myapp.filters'', ''myapp.services'', ''myapp.directives'']).
        config([''$routeProvider'', function($routeProvider) {
        $routeProvider.when(''/page/:name*'', {
            templateUrl: function(urlattr){
                return ''/pages/'' + urlattr.name + ''.html'';
            },
            controller: ''CMSController''
        });
    }
]);

• Agregar * le permite trabajar dinámicamente con múltiples niveles de directorios . Ejemplo: / page / cars / selling / list será atrapado en este proveedor

De los documentos (1.3.0):

"Si templateUrl es una función, se invocará con los siguientes parámetros:

{Array.} - parámetros de ruta extraídos de $ location.path () actual al aplicar la ruta actual "

también

cuando (ruta, ruta): Método

• ruta puede contener grupos con nombre comenzando con dos puntos y terminando con una estrella: por ejemplo: nombre *. Todos los caracteres se almacenan ansiosamente en $ routeParams con el nombre dado cuando la ruta coincide.