First pass to extract $view into separate service.

Author: nateabele

Gruntfile.js

@@ -36,6 +36,7 @@ module.exports = function (grunt) {
           'src/urlMatcherFactory.js',
           'src/urlRouter.js',
           'src/state.js',
+          'src/view.js',
           'src/viewDirective.js',
           'src/stateDirectives.js',
           'src/compat.js'

config/karma.js

@@ -16,6 +16,7 @@ files = [
   'src/templateFactory.js',
   'src/urlMatcherFactory.js',
   'src/urlRouter.js',
+  'src/view.js',
   'src/state.js',
   'src/viewDirective.js',
   'src/stateDirectives.js',

src/state.js

@@ -186,8 +186,8 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory,           $
 
   // $urlRouter is injected just to ensure it gets instantiated
   this.$get = $get;
-  $get.$inject = ['$rootScope', '$q', '$templateFactory', '$injector', '$stateParams', '$location', '$urlRouter'];
-  function $get(   $rootScope,   $q,   $templateFactory,   $injector,   $stateParams,   $location,   $urlRouter) {
+  $get.$inject = ['$rootScope', '$q', '$view', '$injector', '$stateParams', '$location', '$urlRouter'];
+  function $get(   $rootScope,   $q,   $view,   $injector,   $stateParams,   $location,   $urlRouter) {
 
     var TransitionSuperseded = $q.reject(new Error('transition superseded'));
     var TransitionPrevented = $q.reject(new Error('transition prevented'));
@@ -332,14 +332,7 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory,           $
       // necessary. In addition to being available to the controller and onEnter/onExit callbacks,
       // we also need $stateParams to be available for any $injector calls we make during the
       // dependency resolution process.
-      var $stateParams;
-      if (paramsAreFiltered) $stateParams = params;
-      else {
-        $stateParams = {};
-        forEach(state.params, function (name) {
-          $stateParams[name] = params[name];
-        });
-      }
+      var $stateParams = (paramsAreFiltered) ? params : filterByKeys(state.params, params);
       var locals = { $stateParams: $stateParams };
 
       // Resolves the values from an individual 'resolve' dependency spec
@@ -366,21 +359,21 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory,           $
       // Resolve template and dependencies for all views.
       forEach(state.views, function (view, name) {
         // References to the controller (only instantiated at link time)
-        var $view = dst[name] = {
+        var _$view = dst[name] = {
           $$controller: view.controller
         };
 
         // Template
         promises.push($q
-          .when($templateFactory.fromConfig(view, $stateParams, locals) || '')
+          .when($view.load(name, { view: view, locals: locals, notify: false }) || '')
           .then(function (result) {
-            $view.$template = result;
+            _$view.$template = result;
           }));
 
         // View-local dependencies. If we've reused the state definition as the default
         // view definition in .state(), we can end up with state.resolve === view.resolve.
         // Avoid resolving everything twice in that case.
-        if (view.resolve !== state.resolve) resolve(view.resolve, $view);
+        if (view.resolve !== state.resolve) resolve(view.resolve, _$view);
       });
 
       // Once we've resolved all the dependencies for this state, merge
@@ -422,6 +415,15 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory,           $
     }
     return true;
   }
+
+  function filterByKeys(keys, values) {
+    var filtered = {};
+
+    forEach(keys, function (name) {
+      filtered[name] = values[name];
+    });
+    return filtered;
+  }
 }
 
 angular.module('ui.state')

src/view.js

@@ -0,0 +1,28 @@
+
+$ViewProvider.$inject = [];
+function $ViewProvider() {
+
+  this.$get = $get;
+  $get.$inject = ['$rootScope', '$templateFactory', '$stateParams'];
+  function $get(   $rootScope,   $templateFactory,   $stateParams) {
+    return {
+      // $view.load('full.viewName', { template: ..., controller: ..., resolve: ..., async: false })
+      load: function load(name, options) {
+        var result;
+        options = extend({
+          template: null, controller: null, view: null, locals: null, notify: true, async: true
+        }, options);
+    
+        if (options.view) {
+          result = $templateFactory.fromConfig(options.view, $stateParams, options.locals);
+        }
+        if (result && options.notify) {
+          $rootScope.$broadcast('$viewContentLoading', options);
+        }
+        return result;
+      }
+    };
+  }
+}
+
+angular.module('ui.state').provider('$view', $ViewProvider);

src/viewDirective.js

@@ -4,7 +4,7 @@ function $ViewDirective(   $state,   $compile,   $controller,   $injector,   $an
   // TODO: Change to $injector.has() when we version bump to Angular 1.1.5.
   // See: https://github.com/angular/angular.js/blob/master/CHANGELOG.md#115-triangle-squarification-2013-05-22
   var $animator; try { $animator = $injector.get('$animator'); } catch (e) { /* do nothing */ }
-
+  var viewIsUpdating = false;
 
   var directive = {
     restrict: 'ECA',
@@ -52,7 +52,19 @@ function $ViewDirective(   $state,   $compile,   $controller,   $injector,   $an
         var view = { name: name, state: null };
         element.data('$uiView', view);
 
-        scope.$on('$stateChangeSuccess', function() { updateView(true); });
+        var eventHook = function() {
+          if (viewIsUpdating) return;
+          viewIsUpdating = true;
+
+          try { updateView(true); } catch (e) {
+            viewIsUpdating = false;
+            throw e;
+          }
+          viewIsUpdating = false;
+        };
+
+        scope.$on('$stateChangeSuccess', eventHook);
+        scope.$on('$viewContentLoading', eventHook);
         updateView(false);
 
         function updateView(doAnimate) {
@@ -80,8 +92,7 @@ function $ViewDirective(   $state,   $compile,   $controller,   $injector,   $an
           viewLocals = locals;
           view.state = locals.$$state;
 
-          var contents = render.populate(locals.$template, element);
-          var link = $compile(contents);
+          var link = $compile(render.populate(locals.$template, element));
           viewScope = scope.$new();
 
           if (locals.$$controller) {