AngularJs vs EmberJs


Next, we add transclude, like so:

App.directive('fooComponent', function() {
    return {
        restrict: 'E',
        transclude: true,
        templateUrl: 'components/foo.html'

… and we modify the template file at components/foo.html:

    <div ng-transclude></div>
    <p>Foo component</p>

Do not let the word transclude scare you - I think of it, simply, as include with an outside transfer. All it really means is that we can now do this in the DOM:

    <p>Some text included from outside the component</p>

And <p> tag containing "Some text included from outside the component", will get rendered within the <div> tag with the ng-transclude attribute.