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

score 2 · Accepted Answer · edited May 23 '17 at 11:52

2

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

edited May 23 '17 at 11:52

Community

1
1

answered Oct 21 '15 at 16:11

Radim Köhler

122,561
47
239
335

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"}}` – Kosmonaft Oct 22 '15 at 09:29
Right, good adjustment! Really ;) Enjoy mighty UI-Router, sir ;) – Radim Köhler Oct 22 '15 at 09:30
Thank you very much again! Thanks of you I learned something new about AngularJS :) Do you thing that my adjustment is acceptable? – Kosmonaft Oct 22 '15 at 09:38
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? – Kosmonaft Oct 22 '15 at 14:39
1

I guess that you can still use my approach with templateProvider. but just instead of templateRequest.. try this http://stackoverflow.com/a/25290194/1679310 – Radim Köhler Oct 22 '15 at 14:55

ui router nested views condtions

1 Answers1

Confusing $locationChangeSuccess and $stateChangeStart

Linked