AngularJS Reposante De Routage
Je suis en train de structure de mon application en utilisant le Restful/Ruby convension /<resource>/[method]/[id]
. Comment je l'ai fait précédemment lors de l'utilisation d'un serveur-côté MVC framework comme CodeIgniter a été dynamique d'itinéraire en fonction de l'URI:
ex.
www.foo.com/bar/baz/1
L'application serait alors d'utiliser la méthode baz
de contrôleur de classe/bar
et retour views/bar/baz.php
(rempli avec des données d' bar->baz
)
Je voudrais faire la même chose dans Angulaire, mais je ne suis pas sûr si elle prend en charge ce (et si c'est le cas, je ne suis pas sûr exactement comment aller à ce sujet). Pour le moment je suis en utilisant $routeProvider
's when
méthode pour spécifier chaque cas. $lieu.path() ressemble avoir ce dont j'ai besoin, mais je ne pense pas que je peux l'utiliser dans app.js
(dans config()
).
Ce que j'aime faire, c'est quelque chose comme ceci:
.config([
'$routeProvider', function($routeProvider) {
$routeProvider
.when(//<resource> controller exists
resource+'/'+method, {
"templateURL": "views/" + resource + "/" + method + ".html",
"controller": resource
}
).otherwise({ "redirectTo":"/error" });
}
]);
Et le routeur appelle automatiquement la méthode appropriée.
MODIFIER Aussi, pourquoi ne $routeProvider paniquer quand j'ai spécifier when('/foo/bar', {…})
?
EDIT 2 Par Lee suggestion, je cherche à faire quelque chose comme ceci:
$routeProvider
.when(
'/:resource/:method/:id', {
"templateUrl": function(routeParams){
var path = 'views/'+routeParams.resource+'/';
return ( typeof routeParams.method === 'undefined' ) ?
path+'index.html' : path+routeParams.method+'.html';
},
"controller": RESOURCE
})
.otherwise({redirectTo: '/error'});
J'ai remarqué ce qui suit dans $routeProvider'doc:
templateUrl – {string=|function()=} – chemin ou une fonction qui retourne un
chemin d'accès à un modèle html qui doit être utilisée par ngView.Si templateUrl est une fonction, il sera appelé avec les éléments suivants
paramètres:• {Array.<Object>} - les paramètres de la route extrait de l'actuel
$lieu.path() par l'application de l'actuelle route
Modifier: La possibilité de définir templateUrl
d'une fonction est une partie de l'instabilité de la 1.1.2 construire: #1963 (mais il ne fonctionne pas comme de 2013-02-07).
Il y a une discussions sur l'ajout de cette fonctionnalité sur AngularJS est Github: #1193 #1524, mais je ne peux pas dire si c'était effectivement mis en œuvre (dans les docs de Dash cité ci-dessus, il ressemble à elle a été, et les docs sur le site n'ont pas encore été mis à jour).
MODIFIER 3 Pour clarifier ce que je veux (par lee demande), en termes plus simples, je voudrais aller à www.foo.com/index.html#/people
Angulaire doit utiliser le contrôleur de people
, appeler automatiquement son index
méthode, et devrait servir
./views/people/index.html
./views/people/map.html
Aussi, si je vais à www.foo.com/index.html#/people/map
Angulaire doit utiliser le people
contrôleur de nouveau, mais cette fois automcatically appeler sa map
méthode et de servir de ...map.html (parce que la carte a été spécifié dans l'url)
./views/people/index.html
./views/people/map.html
Puis, si je vais à
www.foo.com/index.html#/widgets
Angulaire doit servir
./views/widgets/index.html
./views/widgets/details.html
Le code pour le routeur doit être très générique—je ne devrais pas avoir à spécifier un .when()
pour chaque itinéraire.
Juste essayer de comprendre ce que vous essayez d'accomplir. Je pense à elle comme /contrôleur/template/id. Pouvez-vous donner un exemple plus spécifique de la façon dont vous pourriez utiliser? Il y a peut être une solution angulaire qui est un peu plus élégant.
oui, il semble Dash a une version plus récente de la documentation que sur le site de documentation (posté une capture d'écran dans ma question). Pour votre deuxième commentaire, je vais le rajouter à ma question (un peu trop à un commentaire).
BTW, je l'ai trouvé ceci (microformats.org/wiki/rest/urls) info sur le repos url convnetions et l'a utilisé comme un guide pour mon 2ème réponse. Est-ce que vous aviez à l'esprit, ou vous avez un lien à une spécification que vous essayez d'imiter?
OriginalL'auteur jacob | 2013-02-05
Vous devez vous connecter pour publier un commentaire.
De penser à ce sujet un peu plus. Peut-être vous avez un contrôleur unique pour ceux générique CRUD/type de REPOS des opérations. Puis de charger les modèles en utilisant les ressources et les paramètres d'affichage.
-#/foo/modifier/1
Tout ce qui pourrait être fait à l'aide d'un seul contrôleur/service et de générer dynamiquement le service et afficher les url.
Tout ce qui est personnalisé, vous auriez besoin d'un contrôleur personnalisé et des itinéraires personnalisés et des méthodes de service. Je pourrais probablement jeter ensemble un exemple, mais pas ce soir.
#/foo/view/1
est le même que#/foo/get/1
). L'URI doit être des noms; la Méthode HTTP qui est le verbe.Donc, à votre question initiale "/<ressources>/[méthode]/[id]" "la méthode" la méthode http? Je pensais à une méthode de contrôleur.
non, la méthode est la méthode de contrôleur (il n'y a pas de HTTP "carte" ou "personnes" de la méthode que je suis au courant)
Je pense que le terme "méthode" implique que c'est un verbe. Si c'est une requête http ou un contrôleur de fonction. Donc, idéalement(dans le reste du monde), vous n'auriez pas la méthode dans l'url/route parce que c'est un verbe. Semble que vous pourriez /ressources/template/id. De mon expérience, j'ai l'habitude d'utiliser ng-cliquez sur(ou similaire) à partir de l'affichage pour exécuter les méthodes du contrôleur. J'ai aussi l'habitude de donner quelques méthode par défaut lorsque le contrôleur est créé. Par défaut, la méthode peut être conditionnelle sur la base de paramètres, mais il ya habituellement seulement un couple d'options(ex:getList ou getById).
OriginalL'auteur Lee
Voici un projet sur github qui fait quelque chose de proche de ce que vous demandez
EDIT:
J'ai découvert quelque chose d'intéressant qui n'avait pas eu lieu pour moi avant. Si vous laissez de côté le contrôleur de la route, il va utiliser le contrôleur spécifié dans le modèle. Donc, tant que tous les modèles que vous utilisez pour contrôleur ont ng-controller="ressources", puis il va charger le contrôleur pour le modèle comme prévu. Bien sûr, avec la mise en œuvre actuelle des routes il n'y a pas de paramètres facultatifs, donc si vous avez deux ou trois paramètres, vous devrez spécifier un autre itinéraire. Plus gros problème est qu'il semble appeler la méthode de contrôleur à deux reprises. Je suppose que c'est parce qu'il y a deux points de vue avec le même contrôleur. Cependant, on doit remplacer l'autre, donc il ne devrait pas être deux appels. Cela semble être un bug pour moi. J'ai aussi trouvé une discussion d'un éventuel nouveau système de routage dans les œuvres qui peuvent répondre à vos besoins, mais il peut être assez loin: https://github.com/angular-ui/router/issues?page=1&etat=ouvert. L'échantillon sur github est maintenant à l'aide de la méthode suivante de sorte que vous pouvez parcourir si vous le souhaitez.
Et les modèles:
Maintenant dans votre contrôleur, vous pouvez faire appel à la méthode dynamique.
/MODIFIER
path or function that returns a path to an html template that should be used by ngView
; je pense que d'une fonction simple qui pourrait éliminer un peu de complexité? Dire quelque chose commetemplateUrl: function() { return 'views/'+$routeParams.resource+'.html'; }
(faudrait une checker si :méthode est définie).OriginalL'auteur Lee
À respecter les systèmes de routage comme des Rails, la capacité de définir la méthode de l'itinéraire est maintenant disponible.
J'ai créé une super solution simple qui permet de routes pour appeler une méthode basée sur la définition de la route et une directive dans la vue. Je pense que l'interface utilisateur du routeur n'est pas conventionnel et est trop compliqué pour une telle "doit être" fonction de noyau.
Le projet est appelé ngMethod et est situé à: https://github.com/jzumbrun/ng-method.
Un exemple de son utilisation est: https://github.com/jzumbrun/chrome-apps-angularjs-bootstrap
Donc, si j'ai un parcours comme suit:
et j'ai ng-méthode dans les contacts/modèle de formulaire:
Puis le ng-méthode appelle $champ d'application.edit() ou $champ d'application.new() dans le ContactsController.
Que les contacts/modèle de formulaire peut être partagé, et en fonction de la voie d'appel à la méthode appropriée
pour charger les données. Ce style est plus "Angularjs" et le chargement du code est un peu comme angulaire appel à des modules et contrôleurs.
La pleine directive qui fait de ce lieu est à moins de 20 lignes de code:
OriginalL'auteur Jon
C'est désormais possible avec
ui-router
0.2.8:Mais afin de profiter de
$etat.comprend()
sur nav-menus, ce serait sans doute mieux:Ci-dessus peut être simplifié avec une boucle pour construire le
state
s à partir d'un éventail de ressources ($stateProvider prend en charge l'ajout états fondamentalement chaque fois que):Mise en garde ui-router n'a pas vraiment de support en option paramètres de l'état (prévu pour v0.4)
OriginalL'auteur jacob