javascriptangularjsangular-ui-routernested-routesnested-views

Makes 2 states share a part of resolve


I have defined two states as follows:

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider
        .state('edit', {
            url: '/edit/{id}',
            templateUrl: '/htmls/h1.html',
            controller: 'SameCtrl',
            onEnter: ...sameOnEnter...
            resolve: {
                ...commonResolve...
            }
        })
        .state('addinEdit', {
            url: '/addin/edit/{id}',
            templateUrl: '/htmls/h2.html',
            controller: 'SameCtrl',
            onEnter: ...sameOnEnter...
            resolve: {
                special: [ ... ],
                ...commonResolve...
            }
        })
}])

So they share the same controller, the same onEnter, and they have a very long and common part for resolve (which is actually a chain of resolves: first: function (...){...}, second: function (...){...}, ...). Does anyone know how to rewrite them so that I don't have to write commonResolve twice?


Solution

  • Just create a function for the resolver:

        app.config(['$stateProvider', function ($stateProvider) {
    
            resolverFunction.$inject = ['resolverA', 'resolverB'];
            function ResolverFunction(myService1, myService2) {
                return 'something';
            }
    
            resolverAFunction.$inject = ['resolverC'];
            function resolverAFunction(resolverC) {
                return 'anything';
            }
    
            resolverBFunction.$inject = ['resolverC'];
            function resolverBFunction(resolverC) {
                return 'something else';
            }
    
            resolverCFunction.$inject = ['service'];
            function resolverCFunction(service) {
                return 'something else';
            }
    
    
            $stateProvider
                .state('edit', {
                    url: '/edit/{id}',
                    templateUrl: '/htmls/h1.html',
                    controller: 'SameCtrl',
                    onEnter: ...sameOnEnter...
                    resolve: {
                       commonResolver: resolverFunction,
                           resolverA: resolverAFunction,
                           resolverB: resolverBFunction,
                           resolverC: resolverCFunction,
    
                    }
        })
            .state('addinEdit', {
                url: '/addin/edit/{id}',
                templateUrl: '/htmls/h2.html',
                controller: 'SameCtrl',
                onEnter: ...sameOnEnter...
                resolve: {
                   special: [ ... ],
                   commonResolver: resolverFunction,
                    resolverA: resolverAFunction,
                    resolverB: resolverBFunction,
                    resolverC: resolverCFunction,
    
                }
        })
        }])