J'ai actuellement une application AngularJS avec routage intégré. Cela fonctionne et tout va bien.
Mon fichier app.js ressemble à ceci:
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: '/' });
}]);
Mon application dispose d'un CMS intégré dans lequel vous pouvez copier et ajouter de nouveaux fichiers html dans le répertoire / pages .
Je voudrais toujours passer par le fournisseur de routage même pour les nouveaux fichiers ajoutés dynamiquement.
Dans un monde idéal, le modèle de routage serait:
$ routeProvider.when ('/ nom de page ', {templateUrl: '/ pages / nom de page .html', contrôleur: CMSController});
Donc, si mon nouveau nom de page était "contact.html", j'aimerais que angular prenne "/ contact" et redirige vers "/pages/contact.html".
Est-ce seulement possible?! et si oui comment?!
Mettre à jour
J'ai maintenant ceci dans ma configuration de routage:
$routeProvider.when('/page/:name', { templateUrl: '/pages/home.html', controller: CMSController })
et dans mon CMSController:
function CMSController($scope, $route, $routeParams) {
$route.current.templateUrl = '/pages/' + $routeParams.name + ".html";
alert($route.current.templateUrl);
}
CMSController.$inject = ['$scope', '$route', '$routeParams'];
Cela définit le templateUrl actuel sur la bonne valeur.
Cependant, je voudrais maintenant changer le ng-view avec la nouvelle valeur templateUrl. Comment cela est-il accompli?
urlattr
est défini ou envoyé, je veux dire ceurlattr.name
qui produira?Ok l'a résolu.
Ajout de la solution à GitHub - http://gregorypratt.github.com/AngularDynamicRouting
Dans ma configuration de routage app.js:
Puis dans mon contrôleur CMS:
Avec #views étant mon
<div id="views" ng-view></div>
Alors maintenant, cela fonctionne avec le routage standard et le routage dynamique.
Pour le tester, j'ai copié about.html appelé portfolio.html, changé une partie de son contenu et entré
/#/pages/portfolio
dans mon navigateur et hé presto portfolio.html a été affiché ....Mise à jour Ajout de $ apply et $ compile au html afin que le contenu dynamique puisse être injecté.
la source
Je pense que le moyen le plus simple de faire une telle chose est de résoudre les routes plus tard, vous pouvez demander les routes via json, par exemple. Vérifiez que je crée une usine à partir de $ routeProvider pendant la phase de configuration, via $ provide, afin que je puisse continuer à utiliser l'objet $ routeProvider dans la phase d'exécution, et même dans les contrôleurs.
la source
$routeProvider
à utiliser en tant quefactory
(disponible aprèsconfig
) ne joueront pas bien avec la sécurité et la cohésion des applications - de toute façon, technique cool (vote positif!).Dans les patters URI $ routeProvider, vous pouvez spécifier des paramètres variables, comme ceci
$routeProvider.when('/page/:pageNumber' ...
:, et y accéder dans votre contrôleur via $ routeParams.Il y a un bon exemple à la fin de la page $ route: http://docs.angularjs.org/api/ng.$route
EDIT (pour la question éditée):
Le système de routage est malheureusement très limité - il y a beaucoup de discussions sur ce sujet, et certaines solutions ont été proposées, notamment via la création de plusieurs vues nommées, etc. Mais pour l'instant, la directive ngView ne sert qu'une vue par route, sur sur une base individuelle. Vous pouvez procéder de plusieurs manières - la plus simple serait d'utiliser le modèle de la vue comme chargeur, avec une
<ng-include src="myTemplateUrl"></ng-include>
balise à l'intérieur ($ scope.myTemplateUrl serait créé dans le contrôleur).J'utilise une solution plus complexe (mais plus propre, pour des problèmes plus grands et plus compliqués), en ignorant complètement le service $ route, qui est détaillée ici:
http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm
la source
ng-include
méthode. C'est vraiment simple et c'est une bien meilleure approche que de manipuler le DOM.Je ne sais pas pourquoi cela fonctionne, mais des routes dynamiques (ou joker si vous préférez) sont possibles dans angular 1.2.0-rc.2 ...
example.com/foo -> charge "toto" partiel
example.com/bar-> charge partielle "bar"
Aucun ajustement nécessaire dans la vue ng. Le cas '/: a' est la seule variable que j'ai trouvée qui atteindra cela .. '/: foo' ne fonctionne pas à moins que vos partiels soient tous foo1, foo2, etc ... '/: a' fonctionne avec n'importe quel partiel Nom.
Toutes les valeurs déclenchent le contrôleur dynamique - il n'y a donc pas de «autrement», mais je pense que c'est ce que vous recherchez dans un scénario de routage dynamique ou générique.
la source
Depuis AngularJS 1.1.3, vous pouvez maintenant faire exactement ce que vous voulez en utilisant le nouveau paramètre fourre-tout.
https://github.com/angular/angular.js/commit/7eafbb98c64c0dc079d7d3ec589f1270b7f6fea5
Depuis le commit:
Je l'ai testé moi-même (en utilisant 1.1.5) et cela fonctionne très bien. Gardez simplement à l'esprit que chaque nouvelle URL rechargera votre contrôleur, donc pour conserver tout type d'état, vous devrez peut-être utiliser un service personnalisé.
la source
Voici une autre solution qui fonctionne bien.
la source