title: Using Resolve to show template when JSON returned in AngularJS
body: <p>I have a URL which gets hit and the model of the controller is data from an API call. At the moment by the time the template is rendered the data hasnt come back so I get a blank page.</p>
  
  <p>I looked into and apprently Resolve is the approach to take but I've not had much luck.  Below is what I have but I'm very new at Angular so it maybe completely the wrong approach.</p>
  
  <pre><code>//app.js    
  (function () {
      'use strict';
  
      var app = angular.module('barbato', []).
             config(function ($routeProvider) {
                 $routeProvider.
                     when('/', {
                         controller: 'ReposController',
                         templateUrl: '/Content/templates/repos.html',
                         resolve: {
                             myVar: function(repoService) {
                                 return repoService.getItems();
                             }
                         }
                     }).
                     otherwise({ redirectTo: '/' });
             });
  
      app.factory('repoService', function ($http) {
  
          return {
              getItems: function () {
                  $http.get('http://localhost:12008/getrepodata/jchannon').then(function (response) {
                      return response.data;
                  });
              },
          };
      });
  
  })();
  
  
  
  
  //repo.js    
  (function () {
      'use strict';
  
      var app = angular.module('barbato');
  
      var repooController = app.controller(
          'ReposController', ['$scope','myVar', function ($scope, myVar) {
              $scope.items = myVar;
          }
      ]);
  
  })();
  </code></pre>