Anber / uirouter-extended-views

Extended version of UI-Router's ui-view

Installation

npm install --save uirouter-extended-views

Usage

import extendedViewsModule from 'uirouter-extended-views';

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

Now you can use resolve with components inside views:

{
    name: 'root',
    url: '/',
    views: {
        '@': {
            component: 'testComponent',
            resolve: [
                {
                    token: 'user', // user will be bound to testComponent's controller 
                    resolveFn: () => ({ login: '…', email: '…' }),
                }
            ],
        },
    },
}

Component's render will be delayed until all resolves' promises are ready.

{
    component: 'testComponent', // will be rendered with resolved user
    resolve: [
        {
            token: 'user', 
            deps: ['UserService', Transition],
            resolveFn: (userSvc, trans) => userSvc.fetchUser(trans.params().userId) },
        }
    ],
},

If you want to show any preloader in your view, you can specify css class which will be added to ui-view, while it is loading a data:

app.config(($extendedViewsProvider) => {
    'ngInject';

    $extendedViewsProvider.setDefaultClasses({
        loading: 'loading',
    });
});