AngularJS - $StateProvider Dinâmico
-
20-12-2019 - |
Pergunta
Estou tentando ansiosamente criar um $StateProvider dinâmico:
$StateProvider estático padrão:
$stateProvider
.state('main',
{
url: '/',
templateUrl: '/views/main.html',
controller: 'MainCtrl'
})
.state('login',
{
templateUrl: '/views/login-form.html',
controller: 'LoginCtrl'
})
.state('logout',
{
controller: 'LogoutCtrl'
})
.state('sales', {
templateUrl: '/views/sales-data.html',
controller: 'SalesDataCtrl',
resolve: {
user: 'User',
authenticationRequired: function(user) {
user.isAuthenticated();
}
}
});
$StateProvider dinâmico:
var verify = function(user) { user.isAuthenticated(); };
var states= [
{ name: 'main', url: '/', templateUrl: '/views/main.html', controller: 'MainCtrl' },
{ name: 'login', url: '', templateUrl: '/views/login-form.html', controller: 'LoginCtrl' },
{ name: 'logout', url: '', templateUrl: '', controller: 'LogoutCtrl' },
{
name: 'sales',
url: '',
templateUrl: '/views/sales-data.html',
controller: 'SalesDataCtrl',
//resolve:
//[
// { user: 'User', authenticationRequired: 'verify();' }
//]
}
];
// w/o the array brackets in resolve the navigation does not work.
// with the array brackets, once sales is clicked I get:
// Error: [ng:areq] Argument 'fn' is not a function, got Object
Os dois métodos abaixo funcionam desde que eu não esteja usando o resolve:
This works:
angular.forEach(states, function(state) {
$stateProvider.state(state);
});
This works:
angular.forEach(states, function(state) {
$stateProvider.state(state.name, state);
});
Pergunta: Como posso fazer esse $StateProvider dinâmico funcionar com a resolução?
Solução
Solução:
var states = [
{ name: 'main', url: '/', templateUrl: '/views/main.html', controller: 'MainCtrl' },
{ name: 'login', url: '', templateUrl: '/views/login-form.html', controller: 'LoginCtrl' },
{ name: 'logout', url: '', templateUrl: '', controller: 'LogoutCtrl' },
{
name: 'sales',
url: '',
templateUrl: '/views/sales-data.html',
controller: 'SalesDataCtrl',
resolve: {
user: 'User',
authenticationRequired:
['user', function(user) { user.isAuthenticated(); }] // <-------------------------
}
}
];
angular.forEach(states, function (state) {
$stateProvider.state(state.name, state);
});
Outras dicas
Eu acho que você está ligando $stateProvider.state(...)
incorretamente, é necessário um ID de estado e, em seguida, o objeto de configuração.
Supondo que seu name
propriedades são válidas e exclusivas, você deve ser capaz de fazer isso (ou ajustá-lo conforme necessário):
angular.forEach(states, function(state) {
$stateProvider.state(state.name, state);
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow