title: How to avoid "polluting" the resolve method with ui-router
body: <p>I want to limit as much possible the "flickering" in my AngularJS application. I use <em>resolve:</em> from the router (works with <strong>ngRouter</strong> and <strong>ui-router</strong>) to load the data so that everything needed to display my page is available before changing the route.</p>
  
  <p>Common example:</p>
  
  <pre><code>.state('recipes.category', {
      url: '/:cat',
      templateUrl: '/partials/recipes.category.html',
      controller: 'RecipesCategoryCtrl as recipeList',
      resolve: {
           category: ['$http','$stateParams', function ($http, $stateParams) {
               return $http.get('/recipes/' + $stateParams.cat).then(function(data) { return data.data; });
           }]
       }
  });
  </code></pre>
  
  <p>Now my <em>RecipesCategoryCtrl</em> controller can load <em>category</em> and the promise will be directly resolved.</p>
  
  <p>Is there a way to embed the loading code directly inside my controller? Or somewhere else more "clean"? I don't like having too much logic inside the route definition…</p>
  
  <p>Something like:</p>
  
  <pre><code>.state('recipes.category', {
      url: '/:cat',
      templateUrl: '/partials/recipes.category.html',
      controller: 'RecipesCategoryCtrl as recipeList',
      resolve: 'recipeList.resolve()' // something related to RecipesCategoryCtrl and "idiomatic" AngularJS
  });
  </code></pre>