Angularjs directives without html in the code?

You've got the majority of it right.

I'm not sure what you mean by "whole page", though.

Angular works on template "partials", the same way a server-side template might...

// currentDirective = {.....
templateUrl : "/templates/current-directive.html"
// ...}; return currentDirective;

Meanwhile, the contents of that file are just:

<div class="current-directive>
    <div><span>{{ property }}</span><button ng-click="method(arg)">click</button></div>
</div>

Yes, that seems like a waste.
It's a whole round-trip just for a few HTML elements.

But, angular also caches that directive template.
Future instances of the directive result in in-memory reconstruction of the template, making it lighter than a lot of other solutions out there (only loading a template when it's actually going to be used, and only loading it one time, rather than loading a whole app's worth of templates, if you're only going to use two pages worth of widgets, or hitting the server for regenerated templates over and over).

That said, if you do have a strong case for batching templates together, what you can do is have your server batch all of the templated strings ''... and all of the URLs that they should live at... into an array of objects, in a batch-process:

/templates my-template.html other-template.html another-template.html

becomes

[{
    url : "/templates/my-template.html",
    template : '<div>{{prop}}</div>;
 } /*,...*/]

Then, what you can do is request the $templateCache object.
I'm not sure exactly what it is (service/factory), and therefore, I'm not sure exactly when it needs to be run, but basically, when everything is getting set up.

If that JS array is printed into the page, dynamically, then you can just say:

angular.module("myApp").run(function ($templateCache) {
    templates.forEach(function (cached) {
        $templateCache.put(cached.url, cached.template);
    });
});

This happens before you're actually inside of Angular (ie: before window.load).

If you were to get that array as a JSON package, from an HTTP request, then you'd need to manually bootstrap Angular, afterward, as it's too late to use ng-app, automatically.

angular.bootstrap(document.documentElement, ["myApp"]);

The other alternative is to use <script> tags on the first page.

<script type="text/ng-template" id="/templates/my-template.html">
    <div >{{ prop }}</div>
</script>

Angular will now automatically cache that template to that URL. All of your templates now need to be in script tags, and embedded on the page, before the window.onload event, and within the confines of the ng-app boundaries.

Downside being you're now back to having the user download absolutely everything, to start.

In order to use these pre-cached templates, all you need to do is inject $templateCache into a directive (top-level definition for the directive, rather than into a scope/controller is fine), and then call .get(url)

// currentDirective = { ...
        template : $templateCache.get("/templates/current-directive.html"),
// }; return directive

No extensions needed.
Just be aware that both using "templateUrl", and using $templateCache.get(url) have their various downsides.