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?
urlattr
kommt oder gesendet wird, ich meine, wasurlattr.name
wird produziert?Ok hat es gelöst.
Die Lösung wurde zu GitHub hinzugefügt - http://gregorypratt.github.com/AngularDynamicRouting
In meiner App.js Routing-Konfiguration:
Dann in meinem CMS-Controller:
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/portfolio
in 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.
quelle
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.
quelle
$routeProvider
alsfactory
(verfügbar nachconfig
) Aliasing spielt nicht gut mit Sicherheit und App-Zusammenhalt - so oder so, coole Technik (Upvote!).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
quelle
ng-include
Methode. Es ist wirklich einfach und dies ist ein viel besserer Ansatz als die Manipulation des DOM.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 ...
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.
quelle
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:
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.
quelle
Hier ist eine andere Lösung, die gut funktioniert.
quelle