I've got a url in my application that needs to load one of two templates based on the results of a resolve call, like so:
app.config(function($routeProvider) {
$routeProvider.
when('/someurl', {
resolve: {
someData: function(dataService) {
var data = dataService.loadData();
// data has a .type field that determines which template should be loaded
return data;
}
},
templateUrl: function(routeParams) {
// return a path based on the value of data.type in the someData resolve block
}
})
});
Is there a way for me to set the templateUrl based on what's returned by the someData resolve?
So I figured out how to do this using ui-router - thanks m59 for pointing me at it.
Here's how you'd do this with ui-router:
app.config(function($stateProvider) {
$stateProvider
.state('someState'
url: '/someurl',
template: '<ui-view>',
resolve: {
someData: function(dataService) {
var data = dataService.loadData();
// data has a .type field that determines which template should be loaded
return data;
}
},
controller: function($state, someData) {
$state.go('someState.' + someData.type);
}
})
.state('someState.type1', {
templateUrl: 'someTemplate1.html',
controller: 'Type1Controller'
})
.state('someState.type2', {
templateUrl: 'someTemplate2.html',
controller: 'Type2Controller'
})
});
There's a parent state that handles resolves, then redirects to the child states based on the information it gets. The child states don't have a url, so they can't be loaded directly.
Related
Config of the module is
home.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider){
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home.html'
})
** Here i have done loading of two child views(startPracticeCase.html,steps.html) in main view(partial-startPracticeCase.html) **
.state('startPracticeCase', {
url: '/startPracticeCase',
views: {
'': { templateUrl: 'templates/partial-startPracticeCase.html'},
'startPracticeContent#startPracticeCase': { templateUrl: 'templates/startPracticeContent.html' },
'steps#startPracticeCase': {
templateUrl: 'templates/steps.html'
}
}
})
** here i am changing first child view with another one whenever user click on different steps available on steps.html **
.state('startPracticeCase.casePatientHistory', {
url: '/casePatientHistory',
views: {
'': { templateUrl: 'templates/partial-startPracticeCase.html',controller: 'subjectiveQuestions' },
'startPracticeContent#startPracticeCase':
{
templateUrl: 'templates/casePatientHistory.html' ,
controller: 'serverData'
},
}
});
$urlRouterProvider.otherwise('/home');
}]);
Controller:
home.controller('serverData',function ($state,$scope,$location,DataLoadingService){
$scope.subjectiveQuestions = function (ref) {
console.log(this.id);
$scope.dataLoading = true;
DataLoadingService.SubjectiveQuestions(function(response) {
if(response) {
$scope.questions=response;
console.log("$scope.questions :: "+response);
//$state.go('startPracticeCase.casePatientHistory');
}else {
//$scope.error = response.message;
$scope.error = 'error';
$scope.dataLoading = false;
}
});
};
});
** I am trying to call subjectiveQuestions function on click of steps available on steps.html**
I wrote following things in anchor tag but the controller method/fun is not called .
< ui-sref="startPracticeCase.casePatientHistory" ng-click="subjectiveQuestions ()" > Subjective Interview</>
One more thing the index.hml page of my app have one ui-view in which i am loading partial-startPracticeCase.html this page also have two ui-view
Call the controller function first then use $state.go(your_state) like
In html
<a href ng-click="subjectiveQuestions()">Subjective Interview</a>
In controller
$scope.subjectiveQuestions = function () {
//other code
$state.go('state_name'); //set your state where you want to go
};
I have code like this
<a ui-sref="nested.something">something</a>
<div ui-view="nested.something"></div>
how to load ui-view without click ui-sref ?
EXTEND - related to this plunker provided by OP in the comments above
The state definition is:
.state('store', {
views: {
'store': {
templateUrl: 'store.html'
}
}
})
.state('store.detail', {
views: {
'store_detail': {
templateUrl: 'store_detail.html'
}
}
})
Then in this updated plunker we can see that this would do the job
//$urlRouterProvider.otherwise('/store');
$urlRouterProvider.otherwise(function($injector, $location){
var state = $injector.get('$state');
state.go('store.detail');
return $location.path();
});
Reason? states do not have defined url. Which is a bit weird. So, I would honestly rather suggested to do it like this (the link to such plunker):
$urlRouterProvider.otherwise('/store/detail');
//$urlRouterProvider.otherwise(function($injector, $location){
// var state = $injector.get('$state');
// state.go('store.detail');
// return $location.path();
//});
$stateProvider
.state('store', {
url: '/store',
views: {
'store': {
templateUrl: 'store.html'
}
}
})
.state('store.detail', {
url: '/detail',
views: {
'store_detail': {
templateUrl: 'store_detail.html'
}
}
})
There is a working plunker
ORIGINAL
We can use the .otherwise(rule) of $urlRouterProvider, documented here
$urlRouterProvider.otherwise('/parent/child');
As the doc says:
otherwise(rule)
Defines a path that is used when an invalid route is requested.
So, this could be used for some default - start up "redirection"
The .otherwise() could be even a function, like shown here:
How not to change url when show 404 error page with ui-router
which takes '$injector', '$location' and can do even much more magic (on invalid or startup path)
$urlRouterProvider.otherwise(function($injector, $location){
var state = $injector.get('$state');
state.go('404');
return $location.path();
});
ALSO, if we want to fill in some more details into some nested viesw, we can do it by defining multi-named views:
.state('parent.child', {
url: "/child",
views: {
'' : {
templateUrl: 'tpl.child.html',
controller: 'ChildCtrl',
},
'nested.something#parent.child' : {
templateUrl: 'tpl.something.html',
},
}
})
So, if the tpl.child.html will have this anchor/target:
<i>place for nested something:</i>
<div ui-view="nested.something"></div>
it will be filled with the tpl.something.html content
Check it in action here
Angular started off easy to understand but today I'm completely lost and would appreciated any help that is offered here for this problem I've come across.
So I have a two column page, one side the filters and the other the list of things to be filtered. This page is created using the bit of html injected in to the DOM. I have a filter template and a list template and they both have their own controllers (filterCtrl and filterCtrl).
I understood that I needed to seperate the http request for the controllers in to factories, so at the moment an example factory and controller in my app look like this.
fpApp.controller('listController', ['$scope', 'eventsFactory',
function($scope, eventsFactory) {
eventsFactory.eventList().then(
function(data){
$scope.events = data;
}
);
}
]);
and
fpApp.factory('eventsFactory', function ( $http ) {
return {
eventList: function() {
return $http.get('/js/db/events.json')
.then(
function(result) {
return result.data;
});
}
};
});
at the moment every thing is grand, I have a interface built up from partials and everything is outputting what I need. My problem is that I need to apply those filters to the list but have no idea how to get the information out of one controller in to the other controller or even one template to the other.. Once I'm able to get data from one to the other ill be good.
fpApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/grid");
//
// Now set up the states
$stateProvider
.state('grid', {
url: '/grid',
views: {
// the main template will be placed here (relatively named)
'': { templateUrl: '/templates/grid.html' },
'filerList#grid': {
templateUrl: '/templates/partials/filterList.html',
controller: 'filterCtrl'
},
'viewSwitch#grid': {
templateUrl: '/templates/partials/viewSwitch.html'
},
'eventList#grid': {
templateUrl: '/templates/partials/eventList.html',
controller: 'listController'
}
}
})
.state('list', {
url: '/list',
views: {
// the main template will be placed here (relatively named)
'': { templateUrl: '/templates/list.html' },
'filerList#list': {
templateUrl: '/templates/partials/filterList.html',
controller: 'filterCtrl'
},
'viewSwitch#list': {
templateUrl: '/templates/partials/viewSwitch.html'
},
'eventList#list': {
templateUrl: '/templates/partials/eventList.html',
controller: 'listController'
}
}
});
});
So in summary how do I affect the list controller when the user is clicking filters in the filterController?
Thank you for your time in advance.
I am asking a similar question to this question: UI Router conditional ui views?, but my situation is a little more complex and I cannot seem to get the provided answer to work.
Basically, I have a url that can be rendered two very different ways, depending on the type of entity that the url points to.
Here is what I am currently trying
$stateProvider
.state('home', {
url : '/{id}',
resolve: {
entity: function($stateParams, RestService) {
return RestService.getEntity($stateParams.id);
}
},
template: 'Home Template <ui-view></ui-view>',
onEnter: function($state, entity) {
if (entity.Type == 'first') {
$state.transitionTo('home.first');
} else {
$state.transitionTo('home.second');
}
}
})
.state('home.first', {
url: '',
templateUrl: 'first.html',
controller: 'FirstController'
})
.state('home.second', {
url: '',
templateUrl: 'second.html',
controller: 'SecondController'
});
I set up a Resolve to fetch the actual entity from a restful service.
Every thing seems to be working until I actually get to the transitionTo based on the type.
The transition seems to work, except the resolve re-fires and the getEntity fails because the id is null.
I've tried to send the id to the transitionTo calls, but then it still tries to do a second resolve, meaning the entity is fetched from the rest service twice.
What seems to be happening is that in the onEnter handler, the state hasn't actually changed yet, so when the transition happens, it thinks it is transitioning to a whole new state rather than to a child state. This is further evidenced because when I remove the entity. from the state name in the transitionTo, it believes the current state is root, rather than home. This also prevents me from using 'go' instead of transitionTo.
Any ideas?
The templateUrl can be a function as well so you check the type and return a different view and define the controller in the view rather than as part of the state configuration. You cannot inject parameters to templateUrl so you might have to use templateProvider.
$stateProvider.state('home', {
templateProvider: ['$stateParams', 'restService' , function ($stateParams, restService) {
restService.getEntity($stateParams.id).then(function(entity) {
if (entity.Type == 'first') {
return '<div ng-include="first.html"></div>;
} else {
return '<div ng-include="second.html"></div>';
}
});
}]
})
You can also do the following :
$stateProvider
.state('home', {
url : '/{id}',
resolve: {
entity: function($stateParams, RestService) {
return RestService.getEntity($stateParams.id);
}
},
template: 'Home Template <ui-view></ui-view>',
onEnter: function($state, entity) {
if (entity.Type == 'first') {
$timeout(function() {
$state.go('home.first');
}, 0);
} else {
$timeout(function() {
$state.go('home.second');
}, 0);
}
}
})
.state('home.first', {
url: '',
templateUrl: 'first.html',
controller: 'FirstController'
})
.state('home.second', {
url: '',
templateUrl: 'second.html',
controller: 'SecondController'
});
I ended up making the home controller a sibling of first and second, rather than a parent, and then had the controller of home do a $state.go to first or second depending on the results of the resolve.
Use verified code for conditional view in ui-route
$stateProvider.state('dashboard.home', {
url: '/dashboard',
controller: 'MainCtrl',
// templateUrl: $rootScope.active_admin_template,
templateProvider: ['$stateParams', '$templateRequest','$rootScope', function ($stateParams, templateRequest,$rootScope) {
var templateUrl ='';
if ($rootScope.current_user.role == 'MANAGER'){
templateUrl ='views/manager_portal/dashboard.html';
}else{
templateUrl ='views/dashboard/home.html';
}
return templateRequest(templateUrl);
}]
});
so, in my app.js :
.state('app.packages', {
url: "/packages/:packagesId",
views: {
'menuContent' :{
templateUrl: "templates/packages.html",
controller: function ($stateParams) {
console.log($stateParams);
}
}
}
})
in browser console, it showing this :
Object {packagesId: "25242039"}
How do i access the $stateParams that hold the value of packagesId inside controller.js?
Currently doing it like this, but it is not working...
.controller('PlaylistCtrl', function($scope,$stateParams) {
$scope.getId = function(){
return $scope = $stateParams.packagesId ;
};
})
First off, I don't understand why you want to assign the id to the scope return $scope = $stateParams.packagesId;
Secondly, you have a controller PlaylistCtrl, so you need to set it for router state.
// you may try simple view first
.state('app.packages', {
url: "/packages/:packagesId",
templateUrl: "templates/packages.html",
controller: 'PlaylistCtrl'