How to use directive to load an external template in Angular?

Question

How can I use directive to load an external template in Angular?

Angular,

app.directive('helloWorld', function() {
    return {
        restrict: 'AE',
        replace: true,

        //templateUrl points to an external html template.
        emplateUrl: 'fixture/main.html'
    };
});

html,

fixture/main.html,

<div ng-controller="SimpleController">{{sayHello()}}</div>

Nothing is loaded. Any idea what have I missed?

Answer 1

Use this

app.directive('helloWorld', function() {
    return {
        restrict: 'AE',
        replace: true,

        //templateUrl points to an external html template.
        templateUrl: 'fixture/main.html'
    };
});

and in HTML

<div ng-controller="SimpleController"><div hello-world></div></div>