AngularJS UI-Router, der Daten zwischen Zuständen ohne URL weiterleitet

Ich stehe vor dem Problem, Daten zwischen zwei Zuständen zu übertragen, ohne die Daten in der URL offenzulegen. Es ist, als ob der Benutzer nicht direkt auf diesem Zustand landen kann.

Beispielsweise. Ich habe zwei Zustände "A" und "B". Ich mache einen Serveraufruf im Status "A" und leite die Antwort des Anrufs an den Status "B" weiter. Die Antwort des Serveraufrufs ist eine String-Nachricht, die ziemlich lang ist, daher kann ich das in der URL nicht offenlegen.

Gibt es also eine Möglichkeit im eckigen UI-Router, Daten zwischen Status zu übertragen, ohne URL-Parameter zu verwenden?

Wir können verwenden params, neues Merkmal des UI-Router:

API-Referenz / ui.router.state / $ stateProvider

paramsEine Karte, die optional in der URL deklarierte Parameter konfiguriert oder zusätzliche Nicht-URL-Parameter definiert. Fügen Sie für jeden zu konfigurierenden Parameter ein Konfigurationsobjekt hinzu, das dem Namen des Parameters zugeordnet ist.

Siehe Teil: " ... oder definiert zusätzliche Nicht-URL-Parameter ... "

Der Staatsdefekt wäre also:

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

Einige Beispiele aus dem oben genannten Dokument :

// 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 - Arbeitsbeispiel: http://plnkr.co/edit/inFhDmP42AQyeUBmyIVl?p=info

Hier ist ein Beispiel für eine Zustandsdefinition:

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

Dies könnte ein Aufruf mit ui-sref sein:

<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>

Überprüfen Sie das Beispiel hier

Das params-Objekt ist in $ stateParams enthalten, wird jedoch nicht Teil der URL sein.

1) In der Routenkonfiguration:

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

2) In der Steuerung:

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

3A) Ändern des Status von einem Controller

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

3B) Ändern des Status in HTML

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

Beispiel Plunker