Load HTML template from file into a variable in AngularJs

Angularjs

Angularjs Problem Overview


I'm working with a form that needs to bind HTML to a Rich Text Editor. The best way to store this HTML content would be an HTML file.

I can't quite figure out how to load an HTML template from a file and assign it to a variable.

Directives seem to do be able to do this when working with templateUrl. Was wondering if this there is any low level api in angular to achieve the same thing inside of a controller

Angularjs Solutions


Solution 1 - Angularjs

Using $templateRequest, you can load a template by it’s URL without having to embed it into your HTML page. If the template is already loaded, it will be taken from the cache.

app.controller('testCtrl', function($scope, $templateRequest, $sce, $compile){
    // Make sure that no bad URLs are fetched. You can omit this if your template URL is
    // not dynamic.
    var templateUrl = $sce.getTrustedResourceUrl('nameOfTemplate.html');

    $templateRequest(templateUrl).then(function(template) {
        // template is the HTML template as a string

        // Let's put it into an HTML element and parse any directives and expressions
        // in the code. (Note: This is just an example, modifying the DOM from within
        // a controller is considered bad style.)
        $compile($("#my-element").html(template).contents())($scope);
    }, function() {
        // An error has occurred
    });
});

Be aware that this is the manual way to do it, and whereas in most cases the preferable way would be to define a directive that fetches the template using the templateUrl property.

Solution 2 - Angularjs

All templates are loaded into a cache. There is an injectable $templateCache service you can use to get access to the templates:

app.controller('testCtrl', function($scope, $templateCache){
    var template = $templateCache.get('nameOfTemplate.html');
});

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAbhinav GujjarView Question on Stackoverflow
Solution 1 - AngularjscdauthView Answer on Stackoverflow
Solution 2 - AngularjsdustyrockpyleView Answer on Stackoverflow