https://github.com/anber/uirouter-extended-views

Extended version of UI-Router's ui-view
https://github.com/anber/uirouter-extended-views

angular ng1 ui-router ui-router-extras

Last synced: 25 days ago
JSON representation

Extended version of UI-Router's ui-view

• Host: GitHub
• URL: https://github.com/anber/uirouter-extended-views
• Owner: Anber
• License: mit
• Created: 2017-05-12T12:07:57.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-10-16T13:31:47.000Z (about 6 years ago)
• Last Synced: 2024-05-01T19:16:26.714Z (6 months ago)
• Topics: angular, ng1, ui-router, ui-router-extras
• Language: JavaScript
• Size: 64.5 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Installation

~~~

npm install --save uirouter-extended-views

~~~

## Usage

~~~ javascript

import extendedViewsModule from 'uirouter-extended-views';

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

~~~

Now you can use resolve with components inside views: 

~~~ javascript

{

    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.

~~~ javascript

{

    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:

~~~ javascript

app.config(($extendedViewsProvider) => {

    'ngInject';

    $extendedViewsProvider.setDefaultClasses({

        loading: 'loading',

    });

});

~~~