JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<div ng-app="app">
<script type='text/ng-template' id='/views/dashboardAdmin.html'>
<div>In admin template: {{greeting}}</div>
</script>
<script type='text/ng-template' id='/views/dashboardUser.html'>
<div>In user template: {{greeting}}</div>
</script>
<div ui-view="">Loading role...</div>
<div ng-controller="SessionCtrl">
Pick a role:
<input type="radio" ng-model="session.role" value="admin">Admin
<input type="radio" ng-model="session.role" value="user">User
And click <a ng-click="reloadState()">reload state</a>
</div>
</div>
CSS
div {
margin-bottom: 20px;
}
a {
text-decoration: underline;
cursor: pointer;
}
JavaScript
var app = angular.module('app', ['ui.router']);
app.provider('roleContextHelper', function(){
this.templateProvider = function(options){
return function(session, $stateParams, $templateFactory){
return session.loadRole().then(function(role){
return $templateFactory.fromUrl(options[session.role], $stateParams);
});
};
};
this.controllerProvider = function(options){
return function(session){
//the session role is already loaded since templateProvider must be first resolved
return options[session.role];
}
};
this.$get = function(){return this;};
});
app.config(function($stateProvider, $urlRouterProvider, roleContextHelperProvider){
$stateProvider.state('dashboard', {
url: '/dashboard',
templateProvider: roleContextHelperProvider.templateProvider({
admin: '/views/dashboardAdmin.html',
user: '/views/dashboardUser.html'
}),
controllerProvider: roleContextHelperProvider.controllerProvider({
admin: 'AdminCtrl',
user: 'UserCtrl'
})
});
$urlRouterProvider.otherwise('/dashboard');
});
app.controller('AdminCtrl', function($scope){
$scope.greeting = "I'm Admin";
});
app.controller('UserCtrl', function($scope){
$scope.greeting = "I'm User";
});
app.controller('SessionCtrl', function($scope, $state,$stateParams, session){
$scope.session = session;
$scope.reloadState = function(){
$state.transitionTo($state.current, $stateParams, {
reload: true,
inherit: false,
notify: true
});
}
});
app.service('session', function($timeout, $q){
var roleResolved = null,
that = this;
this.role = null;
this.loadRole = function(){
if(roleResolved == null){
roleResolved = $q.defer();
//simulate ajax request
$timeout(function(){
...