javascript - ui router nested views condtions

Question

is it possible to create a nested views in ui router with conditions? The conditions is assigned to the user roles.

For example I have two types of users: admin and user. If user is opening the setting page then ui router is adding only this view which is assign to his role.

Here is example of my config code

var app = angular.module('myApp', ['ui.router']);        
app.config(function ($stateProvider, $urlRouterProvider){    
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: '/home.html',
            controller: 'homeController'
        })
        .state('settings', {
            url: '/settings',
            data: {
                roles: ['admin', 'moderator', 'user']
            },
            views:{
                '':{
                    templateUrl:'/settings.html',
                },
                'piView@settings':{
                    data: {
                        roles: ['user']
                    },
                    templateUrl:'/personalInformation.html'
                },
                'permissionsView@settings':{//load this view if user is administrator
                                            //I need some condition for this
                    data: {
                        roles: ['admin']
                    },
                    templateUrl: '/permissionsView.html'
                }
            },
            controller: 'settingsController'
        });         
    $urlRouterProvider.otherwise( function($injector) {
      var $state = $injector.get("$state");
      $state.go('/home');
    });
});

Answer 1

The view will be injected for each user (admin or anonymous). But we can manage which view. The best vay would be to use templateProvider.

Based on this Q & A:

Confusing $locationChangeSuccess and $stateChangeStart

I used the plunker from above source and adjusted it a bit

So, let's have these two targets (inside of index.html)

<div ui-view="onlyForAdmin"></div>    
<div ui-view=""></div>

And a state public, which for Admin will reveal even content of the onlyForAdmin, with settings like this:

.state('public', {
      url: "/public",
      data: { isPublic: true },
      views: {
        '@' : {
          templateUrl: 'tpl.html',
          data: { isPublic: true },
        },
        'onlyForAdmin@' : {
          templateProvider: ['$templateRequest','userService',
            function($templateRequest,userService)
            {
              if(userService.isAdmin())
              {
                return $templateRequest("justForAdmin.html");
              }
              return ""; // other than admin will see nothing
            }
          ]
        } 
      } 
})

the content of the justForAdmin.html (e.g. <h2>just for admin</h2>) will be injected only of some authorization service will find user as admin...

Check it here