I'm trying to load a navbar according to the user.
To do this, I need to set a dynamic template, but I can't see my $rootScope
$stateProvider
/*Login*/
.state('login', {
url: '/',
data: {pageTitle: 'Inicio de sesión.'},
resolve: {},
views: {
'navbar': {
templateUrl: null,
controller: null
},
'body': {
templateUrl: "views/login.html",
controller: 'LoginController'
}
}
})
.state('home', {
url: '/home',
data: {pageTitle: 'Home.'},
views: {
'navbar': {
templateUrl: "views/navbar.html", //here dynamic template
controller: null
},
'body': {
templateUrl: "views/inicio.html",
controller: null
}
}
})
.state('perfil', {
url: '/perfil',
data: {pageTitle: 'Perfil de usuario.'},
views: {
'navbar': {
templateUrl: function (sessionProvider) {
var sessionFactory = sessionProvider.path();
return sessionFactory;
}, // this return a tring, but don't load anything
controller: null
},
'body': {
templateUrl: "views/usuario/perfil.html",
controller: 'UsuarioController'
}
}
});
i've tried use a service to load the data, but it didnt work, also tried to load it from the localStorageService, but don't display anything.
is there a single way to load it ?
There are features for this, like templateUrl and templateProvider. See all details here:
Trying to Dynamically set a templateUrl in controller based on constant
E.g. this could be an example of templateProvider used isntead of the 'templateUrl' static path
templateProvider: function(CONFIG, $templateRequest) {
console.log('in templateUrl ' + CONFIG.codeCampType);
var templateName = 'index5templateB.html';
if (CONFIG.codeCampType === "svcc") {
templateName = 'index5templateA.html';
}
return $templateRequest(templateName);
},
Related
I want to pass a hidden value or some optional parameter which not part of URL to change between the states based on the param. So i tried like
<a ui-sref="state2({key:'value', optional: 'B'})">Send param and go to page 2</a>
In the route provider
$stateProvider
.state('state2', {
url: "/:key",
templateUrl: "state1.html",
params: {
optional: null
},
controller: 'contollerA'
})
.state('state3', {
url: "/:key",
templateUrl: "state3.html",
controller: 'contollerB'
})
.state('state4', {
url: "/:key",
templateUrl: "state4.html",
controller: 'contollerC'
})
In the controller
.controller('contollerA', function($scope, $stateParams, $state) {
if ($stateParams.optional === 'B') {
$state.go('state3');
} else {
$state.go('state4');
}
})
but this is not working as the error showing on browser console some thing like
invalid state reference
What is the way to achieve this?
Because state2 doesn't contain the param "key" in config. Replace
.state('state2', {
url: "/:key",
templateUrl: "state1.html",
params: {
optional: null
},
controller: 'contollerA'
})
with
.state('state2', {
url: "/:key?optional",
templateUrl: "state1.html",
params: {
optional: null,
key: null
},
controller: 'contollerA'
})
I have trouble in some angular code that is i want to set dynamic data to angular state custom data. Here is my code
function stateConfig($stateProvider) {
$stateProvider
.state('apps', {
parent: 'entity',
url: '/apps',
data: {
authorities: ['ROLE_USER'],//i want to set dynamic data or return data here
pageTitle: 'smsApp.apps.home.title'
},
views: {
'nav#':{
templateUrl: 'app/layouts/navbar/navbar.html',
controller: 'NavbarController',
controllerAs: 'vm'
},'leftnav#': {
templateUrl: 'app/layouts/leftnavbar/leftnavbar.html',
controller: 'LeftNavbarController',
controllerAs: 'vm'
},
'content#': {
templateUrl: 'app/entities/apps/apps.html',
controller: 'AppsController',
controllerAs: 'vm'
}
},
resolve: {
translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
$translatePartialLoader.addPart('apps');
$translatePartialLoader.addPart('global');
return $translate.refresh();
}]
}
})
Above the code, I want to set dynamic function or data in
data: {
authorities: dynamic data or funciton,//i want to set dynamic data or return data here
pageTitle: 'smsApp.apps.home.title'
}
So, somebody help me who will know that
Thanks
I guess you should declare an anonymous function that returns data.For example:
data: {
authorities: function(){ return data }
pageTitle: 'smsApp.apps.home.title'
},
Edit: If you want the data to be automatically extracted on route declaration, you can go this way:
data: {
authorities: (function(){ return data })()
pageTitle: 'smsApp.apps.home.title'
},
I have such routes:
.config(function config($stateProvider) {
$stateProvider.state('articles', {
url: '/articles',
views: {
main: {
controller: 'ArticlesCtrl',
templateUrl: 'actions/articles/articles.html'
}
}
})
.state('articles.edit', {
url: '/upd/:itemId',
views: {
'': {
templateUrl: 'actions/articles/articles.edit.html',
controller: 'ArticlesEditCtrl',
}
}
})
.state('articles.add', {
url: '/add/news/',
views: {
'': {
templateUrl: 'actions/articles/articles.add.html',
controller: 'ArticlesAddCtrl',
}
}
})
})
and i'm updating some data in articles state, how can i force child controller with state articles.edit to update it's $scope.someVar with data from first state controller, without using services? Which way of solving this issue it the best one?
Since controller functions are 'newed' objects you could use the prototype of controllers to pass data around through an object like this
var obj = {}
function ArticlesCtrl($scope){
obj.ArticlesCtrl = ArticlesCtrl.prototype
ArticlesCtrl.prototype.passData = function(data){
//...do stuff with data passed from ArticlesEditCtrl
}
}
function ArticlesEditCtrl(){
obj.ArticlesCtrl.passData('some data here')
}
.config(function config($stateProvider) {
$stateProvider.state('articles', {
url: '/articles',
views: {
main: {
controller: 'ArticlesCtrl',
templateUrl: 'actions/articles/articles.html'
}
}
})
.state('articles.edit', {
url: '/upd/:itemId',
views: {
'': {
templateUrl: 'actions/articles/articles.edit.html',
controller: 'ArticlesEditCtrl',
}
}
})
.state('articles.add', {
url: '/add/news/',
views: {
'': {
templateUrl: 'actions/articles/articles.add.html',
controller: 'ArticlesAddCtrl',
}
}
})
})
put your function resolve just like that
$stateProvider.state('articles', {
url: '/articles',
views: {
main: {
controller: 'ArticlesCtrl',
templateUrl: 'actions/articles/articles.html'
}resolve: {
time: function AnyFunction(SessionTimer)
{
SessionTimer.startTimer();
}
}
I want to be able to reload just the nested view of my application and attached a route parameter on so that I can have URL routing in my application. I cannot figure out how to do this, I initially had it working with a query like this:
$location.search('userId', user._id);
//http://localhost:9000/#/user/?userId=123456789
My desired URL is below, with the userId = 123456789
http://localhost:9000/#/user/123456789
My app.js file
$stateProvider
.state('index', {
url: '/',
views: {
'#' : {
templateUrl: 'views/layout.html'
},
'top#index' : {
templateUrl: 'views/top.html',
controller: function($scope, $state) {
$scope.userLogOut = function() {
$state.go('login');
};
}
},
'left#index' : { templateUrl: 'views/left.html' },
'main#index' : { templateUrl: 'views/main.html' }
}
})
.state('index.user', {
url: 'user:userId',
templateUrl: 'views/user/user.html',
controller: 'UserCtrl'
})
.state('index.user.detail', {
url: '/',
views: {
'detail#index' : {
templateUrl: 'views/user/details.html',
controller: 'DetailCtrl'
}
}
})
In my controller:
$state.reload('index.user.detail', {userId: $scope.user._id});
As you are using ui-router you can use $state.go('index.user', { userId: {{yourid}} });
To allow the query string parameter to work using ui-router write your state like this,
.state('index.user', {
url: 'user/?userId=:param',
templateUrl: 'views/user/user.html',
controller: 'UserCtrl'
})
That would allow this to work,
//http://localhost:9000/#/user/?userId=123456789
Without the query string parameter (your desired URL) would be this,
.state('index.user', {
url: 'user/:userId',
templateUrl: 'views/user/user.html',
controller: 'UserCtrl'
})
http://localhost:9000/#/user/123456789
I have the following state configuration. How can I get id parameters in index state # view so that it could be accessible by both, left and detail views controllers? Now if I try to access it via $state.params.id it is undefined, but if I console.log($state) I can see the parameter in my console. I only need the parameter if available on first load of left view.
$stateProvider
.state('index', {
url: '/',
views: {
'#' : {
template: '/**/'
resolve: {
params: function ($state) {
return $state.params.id;
}
}
},
'left#index' : {
template: '/**/',
controller: 'AppController',
controllerAs: 'app'
},
'main#index' : {
template: '/**/'
}
})
.state('index.detail', {
url: '/:id',
views: {
'detail#index' : {
template: '/**/',
controller: 'DetailController',
controllerAs: 'detail',
}
}
});