feat(directives): $templateUrl

Author: jbdeboer

demo/web/book.html

@@ -0,0 +1,9 @@
+<div>Shadow backed template. Greeting from the controller:
+    <span ng-bind='greeting'></span>
+
+    <h2>Table of Contents</h2>
+    <ul class='nav nav-tabs'>
+        <li ng-repeat='chapter in chapters' ng-bind='chapter.title'></li>
+    </ul>
+    <content></content>
+</div>

demo/web/main.dart

@@ -60,14 +60,7 @@ class BookComponent {
   BookController controller;
   BookComponent(BookController this.controller);
 
-  static String $template = '''
-    <div>Shadow backed template. Greeting from the controller:
-        <span ng-bind='greeting'></span>
-    <h2>Table of Contents</h2><ul class='nav nav-tabs'>
-      <li ng-repeat='chapter in chapters' ng-bind='chapter.title'></li>
-    </ul>
-    <content></content>
-    </div>''';
+  static String $templateUrl = 'book.html';
 
   attach(Scope scope) {
     controller.attach(scope);

lib/block.dart

@@ -179,7 +179,9 @@ class Block implements ElementWrapper {
       try {
         var directiveInstance = injector.get(directiveType);
         if (directiveRef.directive.isComponent) {
-          directiveInstance = new ComponentWrapper(directiveRef, directiveInstance, node, $injector.get(Parser));
+          directiveInstance = new ComponentWrapper(directiveRef, directiveInstance, node,
+              $injector.get(Parser), $injector.get(Compiler), $injector.get(Http));
+
         }
         directives.add(directiveInstance);
       } catch (e,s) {
@@ -338,17 +340,35 @@ class ComponentWrapper {
   DirectiveRef directiveRef;
   dynamic controller;
   dom.Element elementRoot;
-  Block shadowBlock;
   Scope shadowScope;
   Parser parser;
+  Block shadowBlock;
 
-  ComponentWrapper(this.directiveRef, this.controller, this.elementRoot, this.parser) {
-    // TODO(misko): this way of getting shadowBlock is dumb!
-    shadowBlock = directiveRef.blockTypes['']();
+
+  ComponentWrapper(this.directiveRef, this.controller, this.elementRoot, this.parser, $compiler, $http) {
+    var directive = directiveRef.directive;
     var shadowRoot = elementRoot.createShadowRoot();
-    // TODO(misko): this look should be moved into Block: shodowBlock.appendTo(shadowRoot);
-    for (var i = 0, ii = shadowBlock.elements.length; i < ii; i++) {
-      shadowRoot.append(shadowBlock.elements[i]);
+
+    _appendAndCompileTemplate(data) {
+      shadowRoot.innerHtml = data;
+      shadowBlock = $compiler(shadowRoot.nodes)(shadowRoot.nodes);
+    }
+    // There is support here for directives having both $template and
+    // $templateUrl.  This could be a clever way to add a 'LOADING'
+    // message.
+    if (directive.$template != null) {
+      _appendAndCompileTemplate(directive.$template);
+    }
+
+    if (directive.$templateUrl != null) {
+      $http.getString(directive.$templateUrl).then((data) {
+        _appendAndCompileTemplate(data);
+        // re-attach the scope.
+        if (shadowScope != null) {
+          shadowBlock.attach(shadowScope);
+          shadowScope.$digest();
+        }
+      });
     }
   }
 
@@ -382,7 +402,9 @@ class ComponentWrapper {
       }
     });
     controller.attach(shadowScope);
-    shadowBlock.attach(shadowScope);
+    if (shadowBlock != null) {
+      shadowBlock.attach(shadowScope);
+    }
   }
 }
 

lib/compiler.dart

@@ -65,14 +65,6 @@ class Compiler {
         }
         directiveRef.blockTypes = blockTypes;
         usableDirectiveRefs.add(directiveRef);
-        if (directive.$template != null) {
-          // TODO(deboer): port this function.
-          denormalizeTemplate(x) => x;
-          var templateValue = denormalizeTemplate(directive.$template);
-          var div = new dom.DivElement();
-          div.innerHtml = templateValue;
-          directiveRef.blockTypes = {'': this(div.nodes)};
-        }
       }
 
       if (compileChildren && domCursor.descend()) {

lib/directive.dart

@@ -12,6 +12,7 @@ class Directive {
   int $priority = 0;
   Type $controllerType;
   String $template;
+  String $templateUrl;
   Map<String, String> $map;
 
   bool isComponent = false;
@@ -41,6 +42,7 @@ class Directive {
     // It would be awesome if $transclude could be an enum.
     $transclude = reflectStaticField(type, '\$transclude');
     $template = reflectStaticField(type, '\$template');
+    $templateUrl = reflectStaticField(type, '\$templateUrl');
     $priority = reflectStaticField(type, '\$priority');
     $map = reflectStaticField(type, '\$map');
     if ($priority == null) {

lib/http.dart

@@ -2,5 +2,5 @@ part of angular;
 
 class Http {
   async.Future<String> getString(String url, {bool withCredentials, void onProgress(dom.ProgressEvent e)}) =>
-    dom.HttpRequest.getString(url, withCredentials, onProgress);
+    dom.HttpRequest.getString(url, withCredentials: withCredentials, onProgress: onProgress);
 }

test/_http.dart

@@ -7,13 +7,19 @@ import 'package:angular/angular.dart';
 
 class MockHttp extends Http {
   Map<String, String> gets = {};
+  List futures = [];
+
   expectGET(url, content) {
     gets[url] = content;
   }
 
+  flush() => Future.wait(futures);
+
   Future<String> getString(String url, {bool withCredentials, void onProgress(ProgressEvent e)}) {
     if (!gets.containsKey(url)) throw "Unexpected URL $url";
-    return new Future.value(gets.remove(url));
+    var f = new Future.value(gets.remove(url));
+    futures.add(f);
+    return f;
   }
 }
 

test/templateurl_spec.dart

@@ -0,0 +1,44 @@
+import "_specs.dart";
+import "_log.dart";
+import "_http.dart";
+
+class LogAttrDirective {
+  static var $priority = 0;
+  Log log;
+  LogAttrDirective(Log this.log, DirectiveValue value) {
+    log(value.value == "" ? "LOG" : value.value);
+  }
+  attach(Scope scope) {}
+}
+
+class SimpleUrlComponent {
+  static String $templateUrl = 'simple.html';
+  attach(Scope scope) {}
+}
+
+main() {
+  describe('templateUrl', () {
+    beforeEach(module((module) {
+      var mockHttp = new MockHttp();
+      module.value(MockHttp, mockHttp);
+      module.value(Http, mockHttp);
+      module.directive(LogAttrDirective);
+      module.directive(SimpleUrlComponent);
+    }));
+
+    it('should replace element with template from url', inject((MockHttp $http, Compiler $compile, Scope $rootScope, Log log) {
+      $http.expectGET('simple.html', '<div log="SIMPLE">Simple!</div>');
+
+      var element = $('<div><simple-url log>ignore</replace><div>');
+      $compile(element)(element)..attach($rootScope);
+
+      $http.flush().then(expectAsync1((data) {
+        expect(renderedText(element)).toEqual('Simple!');
+        // Note: There is no ordering.  It is who ever comes off the wire first!
+        expect(log.result()).toEqual('LOG; SIMPLE');
+      }));
+
+    }));
+  });
+}
+