angulaire $ routeProvider basé sur le json importé?

Question

Nous envisageons de construire nos cms autour de l'angle et je me demande s'il existe un moyen de raccorder dynamiquement des routes dans le bloc config basé sur un fichier json importé. Nous avons utilisé la routeProvider $ et énumérant chaque page comme ça ..

.config(['$routeProvider', function($routeProvider) { 
    $routeProvider.when('/home', {templateUrl: 'partials/home.html', controller: 'home'}); 
    $routeProvider.when('/archive', {templateUrl: 'partials/archive.html', controller: 'archive'}); 
}]); 

Ce obtiendriez un peu la main à la main de type que, pour une plus grande application/site. Ce que je veux faire est d'automatiser ce processus basé sur l'entrée json. Quelqu'un peut-il penser à un moyen de s'y prendre? J'ai essayé de créer un service, mais seuls les fournisseurs peuvent être injectés dans le bloc de configuration. Les fournisseurs ne semblent pas réellement exécuter de code dans la zone de configuration, il suffit de définir certaines options qui seront exécutées lorsque ce service sera appelé plus tard dans la vie des applications.

Answer 1

Une autre solution consiste à utiliser le routage dynamique pour la plupart des routes , comme j'ai répondu here

La propriété templateUrl peut accepter une fonction qui est passée le routeParams, de sorte que cela permettrait le routage direct par convention de dénomination. Si vous avez de longues routes spécifiques, vous devez les placer avant cette route.

app.config(function ($routeProvider) { 
    $routeProvider.when('/:page', { 
    templateUrl: function(routeParams){ 
     return '/partials/'+routeParams.page+'.html'; 
    } 
    }) 
}); 

Prenez note que le contrôleur ne peut pas être transmis en fonction, donc j'inclure simplement le contrôleur dans l'élément de niveau supérieur de la partie inclus en utilisant l'attribut habituelle ng-controller="" html.

EDIT:

Si vous voulez aller avec la config JSON je vous conseille de le ligne dans la configuration de l'application javascript plutôt que de faire une http distincte obtenir ce qui retarderait première navigation de l'utilisateur sur reload. Le code ressemblera à la réponse coffeescript ci-dessous:

routes = [ 
    {route: "/home", vars: {templateUrl: "/partials/home", controller: "HomeCtrl"}}, 
    {...} 
]; 

for(var i = 0; i < routes.length; i++) { 
    $routeProvider.when(routes[i].route,routes[i].vars); 
} 

Je n'ai pas rencontré les bibliothèques pour ce encore, mais il est probablement préférable de faire votre propre analyseur pour répondre à vos conventions de routage

Answer 2

Vous pouvez définir la configuration de route tant qu'elle est livrée avec la demande de page initiale à l'application. En effet, la configuration de l'itinéraire doit être définie en même temps que l'application est définie. Sinon, Angular ne saurait pas se comporter. Il ne peut pas non plus être modifié après l'exécution de la fonction config. Je l'ai démontré avec un Plunk ici:

http://plnkr.co/edit/hKiWGib1ePuVISzXt4Wo?p=preview

Vous remarquerez que le délai d'attente d'un appel reproduit au serveur. Quand il essaie de modifier la configuration $routeProvider après le temps alloué, il n'y a aucun effet sur l'application. Pour obtenir votre configuration à partir d'une demande de données supplémentaire, vous devez d'abord vous assurer que vous demandez et recevez les informations d'itinéraire avant de démarrer votre application angulaire. À mon avis, c'est une mauvaise conception de l'expérience utilisateur car l'utilisateur devrait attendre une requête AJAX avant de voir quoi que ce soit sur la page.

Une chose que vous pouvez enlever de l'exemple est que j'ai dû utiliser setTimeout au lieu de $timeout. Cela est dû au fait que vous ne pouvez pas injecter des services dans la fonction config (et c'est pour des raisons telles que cet exemple d'injection de route dynamique).

Dans l'ensemble, cela revient à cela.Soit, fournissez la configuration de la route avec la page, ou créez une solution de contournement compliquée et laide pour la fonctionnalité par défaut Angular.