AngularJS dynamisches Routing

Ich habe derzeit eine AngularJS-Anwendung mit integriertem Routing. Sie funktioniert und alles ist in Ordnung.

Meine app.js-Datei sieht folgendermaßen aus:

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: '/' });
  }]);

In meiner App ist ein CMS integriert, mit dem Sie neue HTML-Dateien im Verzeichnis / pages kopieren und hinzufügen können .

Ich möchte trotzdem den Routing-Anbieter durchgehen, auch für die neuen dynamisch hinzugefügten Dateien.

In einer idealen Welt wäre das Routing-Muster:

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

Wenn mein neuer Seitenname "contact.html" wäre, möchte ich, dass Angular "/ contact" aufnimmt und zu "/pages/contact.html" umleitet.

Ist das überhaupt möglich?! und wenn ja wie?!

Aktualisieren

Ich habe dies jetzt in meiner Routing-Konfiguration:

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

und in meinem CMSController:

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

Dadurch wird die aktuelle templateUrl auf den richtigen Wert gesetzt.

Aber ich würde jetzt wie das ändern ng-Ansicht mit dem neuen templateUrl Wert. Wie wird das erreicht?

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'
        });
    }
]);

• Durch Hinzufügen von * können Sie mit mehreren Verzeichnisebenen arbeiten dynamisch . Beispiel: / page / cars / seller / list wird von diesem Anbieter erfasst

Aus den Dokumenten (1.3.0):

"Wenn templateUrl eine Funktion ist, wird sie mit den folgenden Parametern aufgerufen:

{Array.} - Routenparameter, die aus dem aktuellen $ location.path () durch Anwenden der aktuellen Route extrahiert wurden "

Ebenfalls

Wann (Pfad, Route): Methode

• Der Pfad kann benannte Gruppen enthalten, die mit einem Doppelpunkt beginnen und mit einem Stern enden: zB: Name *. Alle Zeichen werden eifrig in $ routeParams unter dem angegebenen Namen gespeichert, wenn die Route übereinstimmt.

Ok hat es gelöst.

Die Lösung wurde zu GitHub hinzugefügt - http://gregorypratt.github.com/AngularDynamicRouting

In meiner App.js Routing-Konfiguration:

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

Dann in meinem CMS-Controller:

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'];

Mit #views als mein <div id="views" ng-view></div>

Jetzt funktioniert es mit Standard-Routing und dynamischem Routing.

Um es zu testen, habe ich about.html kopiert, es Portfolio.html genannt, einige seiner Inhalte geändert und /#/pages/portfolioin meinen Browser eingegeben, und hey presto Portfolio.html wurde angezeigt ....

Aktualisiert $ apply und $ compile wurden zum HTML hinzugefügt, damit dynamischer Inhalt eingefügt werden kann.

Ich denke, der einfachste Weg, dies zu tun, besteht darin, die Routen später aufzulösen. Sie könnten die Routen beispielsweise über json fragen. Überprüfen Sie, ob ich aus dem $ routeProvider während der Konfigurationsphase eine Factory über $ deploy mache, damit ich das $ routeProvider-Objekt in der Ausführungsphase und sogar in Controllern weiterhin verwenden kann.

'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();
    });
});

In den URI-Mustern von $ routeProvider können Sie variable Parameter wie folgt angeben: $routeProvider.when('/page/:pageNumber' ...und über $ routeParams in Ihrem Controller darauf zugreifen.

Am Ende der $ route-Seite finden Sie ein gutes Beispiel: http://docs.angularjs.org/api/ng.$route

BEARBEITEN (für die bearbeitete Frage):

Das Routing-System ist leider sehr begrenzt - es wird viel über dieses Thema diskutiert, und es wurden einige Lösungen vorgeschlagen, nämlich das Erstellen mehrerer benannter Ansichten usw. Derzeit dient die ngView-Direktive jedoch nur EINER Ansicht pro Route eine Eins-zu-Eins-Basis. Sie können dies auf verschiedene Arten <ng-include src="myTemplateUrl"></ng-include>tun - am einfachsten wäre es, die Vorlage der Ansicht als Loader mit einem Tag darin zu verwenden ($ scope.myTemplateUrl würde im Controller erstellt).

Ich verwende eine komplexere (aber sauberere, für größere und kompliziertere Probleme) Lösung, bei der der $ route-Dienst insgesamt übersprungen wird. Dies wird hier beschrieben:

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

Ich bin mir nicht sicher, warum dies funktioniert, aber dynamische (oder Platzhalter, wenn Sie es vorziehen) Routen sind in Winkel 1.2.0-rc.2 möglich ...

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 -> lädt "foo" teilweise

example.com/bar-> lädt "bar" teilweise

Keine Anpassungen in der ng-Ansicht erforderlich. Der Fall '/: a' ist die einzige Variable, die ich gefunden habe, die dies erreicht. '/: Foo' funktioniert nur, wenn Ihre Partials alle foo1, foo2 usw. sind. '/: A' funktioniert mit jedem Partial Name.

Alle Werte lösen den dynamischen Controller aus - es gibt also kein "Sonstiges", aber ich denke, es ist das, wonach Sie in einem dynamischen oder Wildcard-Routing-Szenario suchen.

Ab AngularJS 1.1.3 können Sie jetzt mit dem neuen Catch-All-Parameter genau das tun, was Sie wollen.

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

Aus dem Commit:

Auf diese Weise kann routeProvider Parameter akzeptieren, die mit Teilzeichenfolgen übereinstimmen, auch wenn sie Schrägstriche enthalten, wenn ihnen anstelle eines Doppelpunkts ein Sternchen vorangestellt ist. Zum Beispiel edit/color/:color/largecode/*largecode stimmen Routen wie diese mit so etwas überein http://appdomain.com/edit/color/brown/largecode/code/with/slashs.

Ich habe es selbst getestet (mit 1.1.5) und es funktioniert großartig. Denken Sie daran, dass jede neue URL Ihren Controller neu lädt. Um also jeden Status beizubehalten, müssen Sie möglicherweise einen benutzerdefinierten Dienst verwenden.

Hier ist eine andere Lösung, die gut funktioniert.

(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;

    }

})();