AngularJS Dynamic Routing

Question

J'ai actuellement une application AngularJS avec routage intégré. Il fonctionne et tout est ok.

Mon app.js fichier 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 est un CMS intégré dans lequel vous pouvez copier et ajouter de nouveaux fichiers html à l'intérieur de la /les pages d'annuaire.

Je voudrais encore aller à travers le routage fournisseur de même pour la nouvelle dynamiquement les fichiers ajoutés.

Dans un monde idéal, le modèle de routage serait:

$routeProvider.lorsque('/pagename', { templateUrl: '/pages/pagename.html', contrôleur: CMSController });

Donc, si mon nouveau nom de la page a été "contact.html" je voudrais angulaire pick up "/contact" et de rediriger vers "/pages/contact.html".

Est-ce même possible?! et si oui, comment?!

Mise à jour

J'ai maintenant 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 courant templateUrl à la bonne valeur.

Cependant j'aimerais maintenant changer la ng-view avec la nouvelle templateUrl valeur. Comment est-ce que c'est possible?

Answer 1

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

À partir de la documentation (1.3.0):

"Si templateUrl est une fonction, elle sera appelée avec le code suivant paramètres:

{Array.} - Paramètres de route extraits du courant $ location.path () en appliquant l’itinéraire actuel "

Answer 2

Ok résolu.

Ajout de la solution de GitHub - http://gregorypratt.github.com/AngularDynamicRouting

Dans mon app.js la configuration de routage:

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

Ensuite dans mon CMS contrôleur:

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

Avec le n ° de vues mon <div id="views" ng-view></div>

Donc maintenant, il fonctionne avec la norme de routage et de routage dynamique.

Pour le tester, j'ai copié about.html appelé portfolio.html, changé une partie de son contenu et est entré /#/pages/portfolio dans mon navigateur et hop portfolio.html était affiché à l'écran....

Mise à jour Ajouté $s'appliquent $et compiler le code html de sorte que le contenu dynamique peut être injecté.

Answer 3

Je pense que le moyen le plus simple de procéder est de résoudre les itinéraires plus tard. Vous pouvez par exemple les demander via json. Vérifiez que je fabrique une usine à partir de $ routeProvider pendant la phase de configuration, via $ supply, afin de pouvoir continuer à utiliser l'objet $ routeProvider pendant la phase d'exécution et même dans les contrôleurs.

 '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

Dans l' $routeProvider URI modèles, vous pouvez spécifier des paramètres variables, comme suit: $routeProvider.when('/page/:pageNumber' ... , et l'accès dans votre contrôleur via $routeParams.

Il y a un bon exemple à la fin de l' $page route: http://docs.angularjs.org/api/ng.$itinéraire

EDIT (pour les édité question):

Le système de routage est malheureusement très limité, il y a beaucoup de discussion sur ce sujet, et certaines solutions ont été proposées, notamment à travers la création de plusieurs vues nommées, etc.. Mais pour l'instant, la ngView directive ne sert qu'à UNE vue par la route, sur un un-à-un. Vous pouvez aller à ce sujet dans de multiples façons - le plus simple serait d'utiliser la vue du modèle comme un chargeur, avec un <ng-include src="myTemplateUrl"></ng-include> balise ($champ d'application.myTemplateUrl serait créé dans le contrôleur).

J'utilise de plus en plus complexe (mais plus propre, plus grand et plus compliqué problèmes) de la solution, fondamentalement, le saut de l' $service de l'itinéraire tout à fait, c'est détaillée ici:

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

Answer 5

Je ne sais pas pourquoi cela fonctionne, mais de la dynamique (ou générique si vous préférez), les itinéraires sont possibles dans angulaire 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 -> les charges de "foo" partielle

example.com/bar-> les charges de "bar" partielle

Pas besoin de tout ajustement dans le ng-view. L' '/:un cas est la seule variable que j'ai trouvé qui va réaliser ce.. '/:foo' ne fonctionne pas à moins que votre partiels sont tous toto1, foo2, etc... '/:' fonctionne avec n'importe quelle partie du nom.

Toutes les valeurs de feu, la dynamique contrôleur de sorte qu'il n'y a pas de "autrement", mais, je pense que c'est ce que vous cherchez dans une dynamique ou un caractère générique scénario de routage..