Router AngularJS ui przekazuje dane między stanami bez adresu URL

146

Mam problem z przekazywaniem danych między dwoma stanami bez ujawniania danych w adresie URL, tak jakby użytkownik nie mógł tak naprawdę bezpośrednio wylądować w tym stanie.

Na przykład. Mam dwa stany „A” i „B”. Wykonuję wywołanie serwera w stanie „A” i przekazuję odpowiedź na wezwanie do stanu „B”. Odpowiedzią na wywołanie serwera jest wiadomość tekstowa, która jest dość długa, więc nie mogę tego ujawnić w adresie URL.

Czy w routerze kątowym ui jest jakiś sposób przekazywania danych między stanami bez używania parametrów adresu URL?

vijay tyagi
źródło

Odpowiedzi:

185

Możemy użyć params, nową cechę UI-Router:

Dokumentacja API / ui.router.state / $ stateProvider

paramsMapa, która opcjonalnie konfiguruje parametry zadeklarowane w adresie URL lub definiuje dodatkowe parametry niezwiązane z adresem URL. Dla każdego konfigurowanego parametru dodaj obiekt konfiguracyjny z kluczem do nazwy parametru.

Zobacz część: „ ... lub definiuje dodatkowe parametry inne niż URL ...

Zatem stan def byłby następujący:

$stateProvider
  .state('home', {
    url: "/home",
    templateUrl: 'tpl.html',
    params: { hiddenOne: null, }
  })

Kilka przykładów z powyższego dokumentu :

// define a parameter's default value
params: {
  param1: { value: "defaultValue" }
}
// shorthand default values
params: {
  param1: "defaultValue",
  param2: "param2Default"
}

// param will be array []
params: {
  param1: { array: true }
}

// handling the default value in url:
params: {
  param1: {
    value: "defaultId",
    squash: true
} }
// squash "defaultValue" to "~"
params: {
  param1: {
    value: "defaultValue",
    squash: "~"
  } }

EXTEND - działający przykład: http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

Oto przykład definicji stanu:

 $stateProvider
  .state('home', {
      url: "/home",
      params : { veryLongParamHome: null, },
      ...
  })
  .state('parent', {
      url: "/parent",
      params : { veryLongParamParent: null, },
      ...
  })
  .state('parent.child', { 
      url: "/child",
      params : { veryLongParamChild: null, },
      ...
  })

To może być połączenie za pomocą ui-sref:

<a ui-sref="home({veryLongParamHome:'Home--f8d218ae-d998-4aa4-94ee-f27144a21238'
  })">home</a>

<a ui-sref="parent({ 
    veryLongParamParent:'Parent--2852f22c-dc85-41af-9064-d365bc4fc822'
  })">parent</a>

<a ui-sref="parent.child({
    veryLongParamParent:'Parent--0b2a585f-fcef-4462-b656-544e4575fca5',  
    veryLongParamChild:'Child--f8d218ae-d998-4aa4-94ee-f27144a61238'
  })">parent.child</a>

Sprawdź przykład tutaj

Radim Köhler
źródło
Jak zasugerowałem, próbowałem użyć parametrów w stanie zagnieżdżonym (Przykład - „/ user / profile / contact”, spowodowało to pewien błąd. Czy muszę również zdefiniować „parametry” dla stanu nadrzędnego?
vijay tyagi
Wygląda na to, że rodzic nie musi mieć zdefiniowanych parametrów, dzięki za szczegółową odpowiedź.
vijay tyagi
Świetnie, jeśli to i tak pomogło;) ciesz się potężnym routerem UI
Radim Köhler
1
Niestety to nie działa z UI-Router 0.2.10 i to, co używam, mam ten błąd na zmianę do wersji 0.2.10 - Błąd: nieprawidłowy params w stanie „domu”
Vijay tyagi
1
@vijaytyagi, powinieneś dokonać aktualizacji. Po prostu nie ma powodu, aby nadal używać starej wersji. I o ile dobrze pamiętam ruch powinien być płynny ...
Radim Köhler
38

Obiekt params jest zawarty w $ stateParams, ale nie będzie częścią adresu URL.

1) W konfiguracji trasy:

$stateProvider.state('edit_user', {
    url: '/users/:user_id/edit',
    templateUrl: 'views/editUser.html',
    controller: 'editUserCtrl',
    params: {
        paramOne: { objectProperty: "defaultValueOne" },  //default value
        paramTwo: "defaultValueTwo"
    }
});

2) W kontrolerze:

.controller('editUserCtrl', function ($stateParams, $scope) {       
    $scope.paramOne = $stateParams.paramOne;
    $scope.paramTwo = $stateParams.paramTwo;
});

3A) Zmiana stanu od administratora

$state.go("edit_user", {
    user_id: 1,                
    paramOne: { objectProperty: "test_not_default1" },
    paramTwo: "from controller"
});

3B) Zmiana stanu w html

<div ui-sref="edit_user({ user_id: 3, paramOne: { objectProperty: 'from_html1' }, paramTwo: 'fromhtml2' })"></div>

Przykład Plunker

WiredIn
źródło
1
Dzięki, świetnie. Zauważyłem również, że jeśli chcesz zarówno $ state, jak i $ stateParams, wystarczy wstrzyknąć $ state. Obiekt stateParams jest właściwością $ state: $ state.params.
Michael K
1
Trzeba powiedzieć, że krok 1 (podanie wartości domyślnych) jest wymagany, aby pozostałe działały ;-)
Xtreme Biker
2
Dziękuję za zwięzły przykład. Pracuje dla mnie! (UI-Router v 1.0.3)
Roboprog