wake-up-neo.com

Ansonsten bei StateProvider

Wie kann ich mit der else-Methode on $ stateProvider oder wie kann ich das überhaupt verwenden? 

92
Adelin

Sie können nicht nur $stateProvider verwenden. 

Sie müssen $urlRouterProvider einfügen und einen Code erstellen, der folgendermaßen aussieht:

$urlRouterProvider.otherwise('/otherwise');

Die /otherwise-URL muss wie üblich für einen Status definiert werden:

 $stateProvider
    .state("otherwise", { url : '/otherwise'...})

Siehe diesen Link, wo ksperling erklärt

120
Richard Keller

Sie können mit $stateProvider die catch-Syntax ("*path") verwenden. Sie müssen lediglich eine Status-Konfiguration wie die folgende am Ende Ihrer Liste hinzufügen:

$stateProvider.state("otherwise", {
    url: "*path",
    templateUrl: "views/error-not-found.html"
});

Alle Optionen werden in https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters erläutert.

Das Schöne an dieser Option ist, im Gegensatz zu $urlRouterProvider.otherwise(...), dass Sie nicht zu einem Standortwechsel gezwungen werden.

81
Juan Hernandez

Sie können $ state auch manuell in die else-Funktion einfügen, um dann in einen Nicht-URL-Status zu navigieren. Dies hat den Vorteil, dass der Browser die Adressleiste nicht ändert. Dies ist hilfreich, wenn Sie zur vorherigen Seite zurückkehren möchten.

    $urlRouterProvider.otherwise(function ($injector, $location) {
        var $state = $injector.get('$state');

        $state.go('defaultLayout.error', {
            title: "Page not found",
            message: 'Could not find a state associated with url "'+$location.$$url+'"'
        });
    });
34
Zak Henry

Ok, der dumme Moment, in dem Sie feststellen, dass die Frage, die Sie gestellt haben, bereits in den ersten Zeilen des Beispielcodes beantwortet wurde! Schauen Sie sich einfach den Beispielcode an. 

       angular.module('sample', ['ui.compat'])
      .config(
        [        '$stateProvider', '$routeProvider', '$urlRouterProvider',
        function ($stateProvider,   $routeProvider,   $urlRouterProvider) {
          $urlRouterProvider
            .when('/c?id', '/contacts/:id')
            .otherwise('/'); // <-- This is what I was looking for ! 


          ....

Schau mal hier.

3
Adelin

Die akzeptierte Antwort - Referenz angular-route fragt nach ui-router. Die akzeptierte Antwort verwendet den "monolithischen"$routeProvider, der das Modul ngRoute erfordert (wohingegen ui-router das Modul ui.router benötigt).

Die höchstbewertete Antwort verwendet stattdessen $stateProvider und sagt etwas wie .state("otherwise", { url : '/otherwise'... }), Ich kann jedoch in der -Dokumentation, die mit verlinkt ist, keine Erwähnung von "else" finden. Ich sehe jedoch, dass $stateProviderin dieser Antwort erwähnt wird, wo es heißt:

Sie können nicht nur $stateProvider verwenden. Sie müssen $urlRouterProvider injizieren

Hier könnte meine Antwort Ihnen helfen. Für mich war es ausreichend, $urlRouterProvider wie folgt zu verwenden:

 my_module
   .config([
    , '$urlRouterProvider'
    , function(
        , $urlRouterProvider){
            //When the url is empty; i.e. what I consider to be "the default"
            //Then send the user to whatever state is served at the URL '/starting' 
            //(It could say '/default' or any other path you want)
            $urlRouterProvider
                    .when('', '/starting');
                    //...
    }]);

Mein Vorschlag ist konsistent mit der ui-routerdocumentation , ( dieser spezifischen Version ), wo eine ähnliche Verwendung der .when(...)-Methode (der erste Aufruf der Funktion) enthalten ist:

app.config(function($urlRouterProvider){
  // when there is an empty route, redirect to /index   
  $urlRouterProvider.when('', '/index');

  // You can also use regex for the match parameter
  $urlRouterProvider.when(/aspx/i, '/index');
})
0
The Red Pea

Ich möchte nur auf die großartigen Antworten eingehen, die bereits zur Verfügung gestellt wurden. Die neueste Version von @uirouter/angularjs hat die Klasse UrlRouterProvider als veraltet markiert. Sie empfehlen jetzt, stattdessen UrlService zu verwenden. Sie können dasselbe Ergebnis mit der folgenden Änderung erzielen:

$urlService.rules.otherwise('/defaultState');

Zusätzliche Methoden: https://ui-router.github.io/ng1/docs/1.0.16/interfaces/url.urlrulesapi.html

0
Babyburger