2013-07-10 17 views
5

Pracuję nad aplikacją do edycji plików w AngularJS. Moi URL wyglądać tak:AngularJS catch-all route?

#/fileName.md

lub

#/folderu/fileName.md

lub

#/folder/nested-folder/another-fol der/itgoesonforever/nazwa pliku.MD

Nie chcę robić trasy dla każdej głębokości i może to być ~ 15 tras głębokich. Czy są jakieś sposoby na warunkowe trasy? Prymitywnie:

/:fileorfolder?/:fileorfolder?/:fileorfolder?/:fileorfolder? 
+0

Podoba Ci się *? (fi – Ven

+0

Przepraszam, czy możesz wytłumaczyć? – wesbos

+0

Nigdy nie zawiedli mi routing Angulara, ale przeczytałem ruter projektu Angular UI: https://github.com/angular-ui/ui-router Czy to odpowiada twoim potrzebom ? –

Odpowiedz

15

myślę, że najlepiej można zrobić z kątowym jest *, który jest nowy dzień v1.1.5 of $routeProvider:

path może być w nazwach grup zaczynających się od gwiazdy (*name). Wszystkie znaki są chętnie przechowywane w $routeParams pod podaną nazwą po dopasowaniu trasy.
Na przykład trasy jak /color/:color/largecode/*largecode/edit dopasuje /color/brown/largecode/code/with/slashes/edit i ekstrakt:
- color: brown
- largecode: code/with/slashes

Trzeba by analizować largecode param się jednak.

+0

Wow, dokładnie to, co chciałem.Nie muszę nawet robić dziwnego łączenia po fakcie, ponieważ wszystko minęło jako pojedynczy parametr. Dzięki za to! – wesbos

+2

Zostało to zmienione na ': name *' w nowszych wersjach kątowych. –

6

Myślę, że mam to! Sztuką jest ustawienie szablonu na proste, a następnie zmodyfikowanie zakresu w celu uwzględnienia dynamicznej ścieżki do szablonu.

Teraz mogę umieścić plik pod numerem /foo/bar/baz.html i zobaczyć szablon renderowany przechodząc do server.com/foo/bar/baz.

// Routes 
app.config(function($routeProvider) { 
    $routeProvider 

    // Home 
    .when('/', { 
     templateUrl: 'home.html', 
     controller: 'HomeController' 
    }) 

    // Catch All 
    .when('/:templatePath*', { 
     template: '<ng-include src="templatePath"></ng-include>', 
     controller: 'CatchAllCtrl' 
    }) 

}); 

// Catch All Controller 
app.controller("CatchAllCtrl", function($scope, $routeParams) { 
    $scope.templatePath = $routeParams.templatePath + '.html'; 
}); 
Powiązane problemy