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');
    });
});

Community · Accepted Answer · 2017-05-23 11:52:53Z

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

Kohler. Thank you! Unfortunately it doesn't work for my project. I have to use Angular up to version 1.3. $templateRequest is a feature for v1.3 + . I have to use this version of Angular because the app should work on IE8. In fact I can use templateUrl: function(){ if(){ retrun "templateURL"}}
Right, good adjustment! Really ;) Enjoy mighty UI-Router, sir ;)
Thank you very much again! Thanks of you I learned something new about AngularJS :) Do you thing that my adjustment is acceptable?
My solution is not perfect. I cannot inject any services or factory to my app.config . Any idea how to solve my problem? Is it possible to prevent loading of template?
I guess that you can still use my approach with templateProvider. but just instead of templateRequest.. try this stackoverflow.com/a/25290194/1679310

Collectives™ on Stack Overflow

ui router nested views condtions

1 Answer 1

Confusing $locationChangeSuccess and $stateChangeStart

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related