feat(ng-include): basic implementation of ng-include directive

Author: vojtajina

lib/angular.dart

@@ -22,6 +22,7 @@ part 'directives/ng_controller.dart';
 part 'directives/ng_disabled.dart';
 part 'directives/ng_hide.dart';
 part 'directives/ng_if.dart';
+part 'directives/ng_include.dart';
 part 'directives/ng_model.dart';
 part 'directives/ng_mustache.dart';
 part 'directives/ng_repeat.dart';
@@ -147,6 +148,7 @@ class AngularModule extends Module {
     directive(NgDisabledAttrDirective);
     directive(NgHideAttrDirective);
     directive(NgIfAttrDirective);
+    directive(NgIncludeAttrDirective);
     directive(NgRepeatAttrDirective);
     directive(NgShowAttrDirective);
 

lib/directives/ng_include.dart

@@ -0,0 +1,57 @@
+part of angular;
+
+class NgIncludeAttrDirective {
+
+  NgIncludeAttrDirective(dom.Element element, Scope scope, NodeAttrs attrs, BlockCache blockCache, Injector injector) {
+
+    var previousBlock = null;
+    var previousScope = null;
+
+    cleanUp() {
+      if (previousBlock == null) {
+        return;
+      }
+
+      previousBlock.remove();
+      previousScope.$destroy();
+      element.innerHtml = '';
+
+      previousBlock = null;
+      previousScope = null;
+    };
+
+    updateContent(createBlock) {
+      cleanUp();
+
+      // create a new scope
+      previousScope = scope.$new();
+      previousBlock = createBlock(injector.createChild([new ScopeModule(previousScope)]));
+
+      previousBlock.elements.forEach((elm) {
+        element.append(elm);
+      });
+    };
+
+    scope.$watch(attrs[this], (value, another) {
+      print('ng-include tpl changed to $value');
+
+      if (value == null || value == '') {
+        cleanUp();
+        return;
+      }
+
+      if (value.startsWith('<')) {
+        // inlined template
+        updateContent(blockCache.fromHtml(value));
+      } else {
+        // an url template
+        blockCache.fromUrl(value).then((createBlock) {
+          updateContent(createBlock);
+
+          // Http should take care of this
+          scope.$digest();
+        });
+      }
+    });
+  }
+}

test/directives/ng_include_spec.dart

@@ -0,0 +1,41 @@
+import '../_specs.dart';
+import '../_test_bed.dart';
+import '../_http.dart';
+
+main() {
+  describe('NgInclude', () {
+    TestBed _;
+
+    beforeEach(beforeEachTestBed((tb) => _ = tb));
+
+    beforeEach(module((AngularModule module) {
+      module.type(HttpFutures, MockHttpFutures);
+    }));
+
+    it('should fail', inject((Scope scope, TemplateCache cache, HttpFutures futures) {
+      cache.put('tpl.html', 'my name is {{name}}');
+
+      var element = _.compile('<div ng-include="template"></div>');
+
+      expect(element.html()).toEqual('');
+
+      scope.$apply(() {
+        scope['name'] = 'Vojta';
+        scope['template'] = 'tpl.html';
+      });
+      futures.trigger();
+      expect(element.text()).toEqual('my name is Vojta');
+    }));
+
+
+    it('should support inlined templates', inject((Scope scope) {
+      var element = _.compile('<div ng-include="template"></div>');
+
+      scope.$apply(() {
+        scope['name'] = 'Vojta';
+        scope['template'] = '<span>my inlined name is {{name}}</span>';
+      });
+      expect(element.text()).toEqual('my inlined name is Vojta');
+    }));
+  });
+}