title: Angularjs -- Using directives for data load or resolve
body: <p>I'm working on a large mobile application and I've come across a debate.  Currently I have the resources for the various rest api's wired into a directive which then loads the data into the scope at that point.</p>
  
  <p>Is it better practice with angularjs to inject the data from a resource in a directive or to utilize the resolve property on the RouteProvider config?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Directive:</p>
  
  <pre><code>angular.module('categories')
  
      .directive( 'Category', [function() { 
          return {
              restrict: 'EA',
              priority: 1000,
              controller: ['$scope', '$attrs', '$log', 'CategoryFactory', function($scope, $attrs, $log, CategoryFactory) {
                  var categoryObject = {};
                  var item = $scope.$eval($attrs.ppdCategory);
                  if( item !== "" &amp;&amp; ! isNaN(parseInt(item, 10)) ) {
                      categoryObject.categoryId = item;
                  }
  
                  var $promise = CategoryFactory.get(categoryObject).$promise;
                  $promise
                      .then( function( result ) {
                          $scope.childCategories = result.response.childCategories;
                          $scope.category = result.response.category;
                      })
                      .catch( function( error ) {
                          $log.error( "An error ocurred while fetching categories" + error );
                      });
               }]
          };
      }]);
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>.config([ '$routeProvider', function($routeProvider) {
      $routeProvider
          .when( '/browse-aisles', {
              reloadOnSearch: false,
  
              controller: 'CategoryController',
  
              // this will eventually be a function that
              // manages the switching of the mobile, tablet,
              // and full site templates
              templateUrl: 'partials/pages/browse/browse_aisles.html'
          })
          .when( '/browse-aisles/:categories*', {
              reloadOnSearch: false,
  
              controller: 'CategoryController',
  
              // this will eventually be a function that
              // manages the switching of the mobile, tablet,
              // and full site templates
              templateUrl: 'partials/pages/browse/browse_aisles.html'
          });
  }])
  .controller( 'CategoryController', [ '$scope', '$routeParams', 'keyedRouteService', 'SharedProperties', 'BROWSE_PARAMS', function( $scope, $routeParams, keyedRouteService, SharedProperties, BROWSE_PARAMS ) {
  
          var categoryParams = typeof $routeParams.categories === 'undefined' ? "" : $routeParams.categories;
          var params = keyedRouteService.getKeyedArray( "categories//" + categoryParams );
          $scope.params = SharedProperties.setProperty(BROWSE_PARAMS, params );
  
          $scope.$emit('loadSubHeader', 'partials/pages/browse/browse_aisles_subheader.html');
  
          var baseUrl = "/browse-aisles/";
          for( var category in $scope.params.categories ) {
              if( $scope.params.categories[category] !== "" ) {
                  baseUrl += "categories/" + $scope.params.categories[category] + "/";
              }
          }
          $scope.baseCategoryUrl = baseUrl;
  
      }]);
  </code></pre>
  
  <p>The resolve would parse a url of the format:
  /browse-aisles/categories/123/categories/1234/categories/2444/products/233</p>