Provide ui-router resolved resources without injecting directly into controller

Question!

I'm working on an angular 1.5 app that makes heavy use of ui-router.

We define our states like this:

$stateProvider
  .state('jobs', {
    url: '/jobs',
    template: '<ut-jobs></ut-jobs>',
});

Notice that the template for this page is a simple angular directive rather than a template string (or templateUrl) with a separate controller. Our directive's controllers are defined inline, like this:

angular.directive('utJobs', () => {
  return {
    templateUrl: 'jobs.html',
    controllerAs: 'jobs',
    controller: [() => {
      console.log('jobs directive loaded!');
    }],
  }
});

This lets us keep things nice and tidy, since our directive's controllers are close to the directive definition.

We would like to leverage ui-router's resolve feature to help simplify our resource fetching. However, since our state controllers aren't kept in $stateProvider.state definitions, I can't figure out for the life of me how to access the result of resolve (job in the above example.) Is there some kind of $resolve service that I could inject into the directive's controller to access the resolved resources? Am I missing something obvious? Or is ui-router not support this?



Answers

You have two options depending on your version of UI-Router.

If you are using ui-router 1.0.0-beta or greater

ui-router 1.0.0-beta allows for routed components, so your resolves would map directly with your directive's scope binding.

$stateProvider
  .state('jobs', {
    url: '/jobs',
    resolve: {
      jobs: (JobsService) => JobsService.getAll()
    }
    component: 'ut-jobs'
});

Then bind the resolve property to your .directive:

angular.directive('utJobs', () => {
  return {
    templateUrl: 'jobs.html',
    scope: {
      jobs: '<'
    },
    controllerAs: 'jobs',
    controller: () => {
      // do what you will this.jobs
    },
  }
});

If you are not using ui-router 1.0.0-beta

You will have to create a controller on your state and pass in the resource from your resolve, and then pass that into your directive.

$stateProvider
  .state('jobs', {
    url: '/jobs',,
    resolve: {
      jobs: (JobsService) => JobsService.getAll()
    },
    controller: function($scope, jobs) {
      $scope.jobs = jobs;
    },
    template: '<ut-jobs jobs="jobs"></ut-jobs>',
});

In this case, the jobs object on $scope is getting passed to your directive:

angular.directive('utJobs', () => {
  return {
    templateUrl: 'jobs.html',
    scope: {
      jobs: '<'
    },
    controllerAs: 'jobs',
    controller: [() => {
      // do what you will this.jobs
    }],
  }
});

Notes/Reading



The order of the execution is determined by the specific OS scheduling policy and not guaranteed by anything. In order to synchronize the processes there are special facilities for the inter-process communication (IPC) which are designed for this purpose. The mentioned pipes are one example. They make the reading process to actually wait for the other process to write it, creating a (one-way) synchronization point. The other examples would be FIFOs and sockets. For simpler tasks the wait() family of functions or signals can be used.



They will execute concurrently. This is basically the point of processes.

Look into mutexes or other ways to deal with concurrency.



This video can help you solving your question :)
By: admin