ng-ui-router-layout

Enhance UI-Router by adding a layout decorator.

Install

$ yarn add @ovh-ux/ng-ui-router-layout

Usage

modal layout

This layout is now deprecated. Prefer using ouiModal layout.

// index.js
import angular from 'angular';
import ngUiRouterLayout from '@ovh-ux/ng-ui-router-layout';

angular.module('myApp', [ngUiRouterLayout]);

With controller and template

// routing.js
import controller from './controller';
import template from './template.html';

$stateProvider.state('state.name', {
  url,
  views: {
    modal: {
      controller,
      template,
    },
  },
  layout: 'modal',
});

With component

// routing.js
$stateProvider.state('state.name', {
  url,
  views: {
    modal: {
      component: 'awesomeModal',
    },
  },
  layout: 'modal',
});

With a component provider

// routing.js
$stateProvider.state('state.name', {
  url,
  views: {
    modal: {
      componentProvider: (predicate) =>
        predicate
          ? 'awesomeModalForTruePredicate'
          : 'awesomeModalForFalsePredicate',
    },
  },
  layout: 'modal',
});

ouiModal layout

See ouiModal layout.

Test

$ yarn test

Related

• @ovh-ux/ng-ui-router-breadcrumb - Display a breadcrumb based on the UI-Router state declaration
• @ovh-ux/ng-ui-line-progress - Display a line progress between UI-Router transition hooks

Contributing

Always feel free to help out! Whether it's filing bugs and feature requests or working on some of the open issues, our contributing guide will help get you started.

License

BSD-3-Clause © OVH SAS