1

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?

SoftTimur
  • 5,630
  • 38
  • 140
  • 292

2 Answers2

1

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,

            }
    })
    }])
cccross
  • 76
  • 7
  • Sorry, I was not clear with one thing... Actually `commonResolver` contains a **chain** of resolvers (that's why it is long). It looks like `first: function(...) {...}, second: function(...){...}, ...`. Is there a way to wrap all these in one function? – SoftTimur Jul 03 '17 at 03:21
  • Yeap just create function for each resolver, and then just inject them where needed. – cccross Jul 03 '17 at 03:24
  • So cannot we create only one function for the chain? – SoftTimur Jul 03 '17 at 03:25
  • If you want to create only one for the chain , you might need to create your states in a way parent/child, in order to inject the resolver from the parent to the child. – cccross Jul 03 '17 at 03:35
0

I don't have experience angularjs but i found a solution, you can specify the parent of a state via the parent property.

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',
        parent : 'edit'
    })
}])
tiepnv
  • 336
  • 2
  • 9