cherry-pick 0f6aea6 from 1.0 to legacy

feat(uiView): Expose the resolved data for a state as $scope.$resolve
feat(uiView): Route to components using templates
closes #2175
closes #2547

Author: christopherthielen

src/state.js

@@ -89,6 +89,7 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory) {
 
       forEach(isDefined(state.views) ? state.views : { '': state }, function (view, name) {
         if (name.indexOf('@') < 0) name += '@' + state.parent.name;
+        view.resolveAs = view.resolveAs || state.resolveAs || '$resolve';
         views[name] = view;
       });
       return views;
@@ -1421,6 +1422,7 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory) {
             // Provide access to the state itself for internal use
             result.$$state = state;
             result.$$controllerAs = view.controllerAs;
+            result.$$resolveAs = view.resolveAs;
             dst[name] = result;
           }));
         });

src/viewDirective.js

@@ -110,6 +110,25 @@
  * <ui-view autoscroll='false'/>
  * <ui-view autoscroll='scopeVariable'/>
  * </pre>
+ *
+ * Resolve data:
+ *
+ * The resolved data from the state's `resolve` block is placed on the scope as `$resolve` (this
+ * can be customized using [[ViewDeclaration.resolveAs]]).  This can be then accessed from the template.
+ *
+ * Note that when `controllerAs` is being used, `$resolve` is set on the controller instance *after* the
+ * controller is instantiated.  The `$onInit()` hook can be used to perform initialization code which
+ * depends on `$resolve` data.
+ *
+ * Example usage of $resolve in a view template
+ * <pre>
+ * $stateProvider.state('home', {
+ *   template: '<my-component user="$resolve.user"></my-component>',
+ *   resolve: {
+ *     user: function(UserService) { return UserService.fetchUser(); }
+ *   }
+ * });
+ * </pre>
  */
 $ViewDirective.$inject = ['$state', '$injector', '$uiViewScroll', '$interpolate', '$q'];
 function $ViewDirective(   $state,   $injector,   $uiViewScroll,   $interpolate,   $q) {
@@ -300,6 +319,9 @@ function $ViewDirectiveFill (  $compile,   $controller,   $state,   $interpolate
         extend($uiViewData, { state: locals.$$state });
         $element.html(locals.$template ? locals.$template : initial);
 
+        var resolveData = angular.extend({}, locals);
+        scope[locals.$$resolveAs] = resolveData;
+
         var link = $compile($element.contents());
 
         if (locals.$$controller) {
@@ -308,6 +330,7 @@ function $ViewDirectiveFill (  $compile,   $controller,   $state,   $interpolate
           var controller = $controller(locals.$$controller, locals);
           if (locals.$$controllerAs) {
             scope[locals.$$controllerAs] = controller;
+            scope[locals.$$controllerAs][locals.$$resolveAs] = resolveData;
           }
           $element.data('$ngControllerController', controller);
           $element.children().data('$ngControllerController', controller);

test/viewDirectiveSpec.js

@@ -9,7 +9,7 @@ function animateFlush($animate) {
 describe('uiView', function () {
   'use strict';
 
-  var scope, $compile, elem, log;
+  var $stateProvider, scope, $compile, elem, log;
 
   beforeEach(function() {
     var depends = ['ui.router'];
@@ -120,7 +120,8 @@ describe('uiView', function () {
     }
   };
 
-  beforeEach(module(function ($stateProvider) {
+  beforeEach(module(function (_$stateProvider_) {
+    $stateProvider = _$stateProvider_;
     $stateProvider
       .state('a', aState)
       .state('b', bState)
@@ -338,6 +339,87 @@ describe('uiView', function () {
     expect(elem.text()).toBe('mState');
   }));
 
+  describe('(resolved data)', function() {
+    var _scope;
+    function controller($scope) { _scope = $scope; }
+
+    var _state = {
+      name: 'resolve',
+      resolve: {
+        user: function($timeout) {
+          return $timeout(function() { return "joeschmoe"; }, 100);
+        }
+      }
+    };
+
+    it('should provide the resolved data on the $scope', inject(function ($state, $q, $timeout) {
+      var state = angular.extend({}, _state, { template: '{{$resolve.user}}', controller: controller });
+      $stateProvider.state(state);
+      elem.append($compile('<div><ui-view></ui-view></div>')(scope));
+
+      $state.transitionTo('resolve'); $q.flush(); $timeout.flush();
+      expect(elem.text()).toBe('joeschmoe');
+      expect(_scope.$resolve).toBeDefined();
+      expect(_scope.$resolve.user).toBe('joeschmoe')
+    }));
+
+    it('should put the resolved data on the resolveAs variable', inject(function ($state, $q, $timeout) {
+      var state = angular.extend({}, _state, { template: '{{$$$resolve.user}}', resolveAs: '$$$resolve', controller: controller });
+      $stateProvider.state(state);
+      elem.append($compile('<div><ui-view></ui-view></div>')(scope));
+
+      $state.transitionTo('resolve'); $q.flush(); $timeout.flush();
+      expect(elem.text()).toBe('joeschmoe');
+      expect(_scope.$$$resolve).toBeDefined();
+      expect(_scope.$$$resolve.user).toBe('joeschmoe')
+    }));
+
+    it('should put the resolved data on the controllerAs', inject(function ($state, $q, $timeout) {
+      var state = angular.extend({}, _state, { template: '{{$ctrl.$resolve.user}}', controllerAs: '$ctrl', controller: controller });
+      $stateProvider.state(state);
+      elem.append($compile('<div><ui-view></ui-view></div>')(scope));
+
+      $state.transitionTo('resolve'); $q.flush(); $timeout.flush();
+      expect(elem.text()).toBe('joeschmoe');
+      expect(_scope.$resolve).toBeDefined();
+      expect(_scope.$ctrl).toBeDefined();
+      expect(_scope.$ctrl.$resolve).toBeDefined();
+      expect(_scope.$ctrl.$resolve.user).toBe('joeschmoe');
+    }));
+
+    it('should use the view-level resolveAs over the state-level resolveAs', inject(function ($state, $q, $timeout) {
+      var views = {
+        "": {
+          controller: controller,
+          template: '{{$$$resolve.user}}',
+          resolveAs: '$$$resolve'
+        }
+      };
+      var state = angular.extend({}, _state, { resolveAs: 'foo', views: views });
+      $stateProvider.state(state);
+      elem.append($compile('<div><ui-view></ui-view></div>')(scope));
+
+      $state.transitionTo('resolve'); $q.flush(); $timeout.flush();
+      expect(elem.text()).toBe('joeschmoe');
+      expect(_scope.$$$resolve).toBeDefined();
+      expect(_scope.$$$resolve.user).toBe('joeschmoe');
+    }));
+
+    it('should put resolve data on scope even if there is no controller', inject(function ($state, $q, $timeout) {
+      var views = {
+        "": {
+          template: '{{$resolve.user}}'
+        }
+      };
+      var state = angular.extend({}, _state, { views: views });
+      $stateProvider.state(state);
+      elem.append($compile('<div><ui-view></ui-view></div>')(scope));
+
+      $state.transitionTo('resolve'); $q.flush(); $timeout.flush();
+      expect(elem.text()).toBe('joeschmoe');
+    }));
+  });
+
   describe('play nicely with other directives', function() {
     // related to issue #857
     it('should work with ngIf', inject(function ($state, $q, $compile) {