Installation guide for ui router

Before start

Make sure you are familiar with:

• Managing permissions
• Managing roles

Overview

1. Including dependencies in module
2. Known issues

Including dependencies in module

In order to angular-permission cooperate with your router you should include two modules permission and permission.ui to your module:

angular.module('yourModule', [
  ...
  'ui.router', ('ct.ui.router.extras.core',) 
  'permission', 'permission.ui', 
  ...
]);

When using modular import support (Webpack/Browserify/Rollup/CommonJS), angular-permission exports modules permission,uiPermission and ngPermission that can be imported directly in your code:

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import {permission, uiPermission} from 'angular-permission';

angular.module('app', [uiRouter, permission, uiPermission]);

...

🔥 Important
Angular permission is using ui-router state decoration to be able to inherit permissions/roles from parent states. So make sure that permission and permission.ui modules are included just after ui-router as in example above to ensure execution order form angular dependency injection mechanism.

Known issues

Because of a bug in ui-router, when using $urlStateProvider.otherwise we get an infinite digest loop error. A workaround was found by @shoaibmerchant and it goes like this:

// Normal usage (creates INFDG error)
$urlRouterProvider.otherwise('/somestate');

// Use instead
$urlRouterProvider.otherwise( function($injector) {
  var $state = $injector.get("$state");
  $state.go('/somestate');
});

---

Next to read: 👉 Usage in states