router ui angolare che passa dati tra stati senza URL

Question

Sono di fronte a questo problema di passare i dati tra due stati senza esporre i dati nell'url, è come se l'utente non potesse realmente atterrare direttamente su questo stato.

Ad esempio. Ho due stati "A" e "B". Sto facendo qualche chiamata al server nello stato "A" e passando la risposta della chiamata allo stato "B". La risposta della chiamata al server è un messaggio stringa, che è piuttosto lungo, quindi non posso esporlo nell'URL.

Quindi c'è un modo nel router ui angolare per passare i dati tra stati, senza utilizzare i parametri url?

Answer 1

Possiamo usare params, nuova caratteristica della UI-Router:

API Reference/ui.router.state/$stateProvider

params A map which optionally configures parameters declared in the url, or defines additional non-url parameters. For each parameter being configured, add a configuration object keyed to the name of the parameter.

vedere la parte: "... o definisce i parametri non-url aggiuntive ... "

Quindi la definizione dello stato sarebbe:

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

Alcuni esempi costituiscono la doc mentioned above:

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

Ecco un esempio di una definizione dello stato:

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

Questa potrebbe essere una chiamata utilizzando 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> 

Verificare l'esempio here

Answer 2

L'oggetto params è incluso in $ stateParams, ma non farà parte dell'URL.

1) Nella configurazione percorso:

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

2) Nel regolatore:

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

3A) Modifica dello stato da un controller

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

3B) Modifica della Stato in html

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

Example Plunker