AngularJS $http HTML Parser

Question

All, we're developing a webapp with AngularJS and we have a use case/requirement (that won't happen very often at all) where we will need to retrieve a complete HTML document from our static server. However, it appears that the $http object returns a raw HTML string as its 'data'. We are trying to avoid using an external library (like jQuery, for instance), but we need to parse that raw HTML string into a queriable DOM object. We could use an iframe and be done with it, but we're also trying to avoid using iframes for well-known reasons.

So, the question is: does AngularJS have a parser for HTML (as it does for JSON)? Or else, what's the most graceful way to handle this case?

P.S.: We tried sifting through Angular's API docs, but in all honesty they are hit-or-miss and unintuitive to navigate around.

Answer 1

If you need to get a DOM element from the string programmatically, parsing html into a DOM object is pretty simple.

Basically you'd use DOMParser.

var parser = new DOMParser();
var doc = parser.parseFromString('<div>some html</div>', 'text/html');
doc.firstChild; //this is what you're after.

From there if you wanted to query to get elements from it with vanilla JS (meaning, you don't want to use JQuery for some reason), you can do this:

//get all anchor tags with class "test" under a div.
var testAnchors = doc.firstChild.querySelectorAll('div a.test'); 

... but note: querySelectorAll is only supported in IE8 and higher.

EDIT: additional approach...

The "wrap" method:

var div = document.createElement('div');
div.innerHTML = '<div>some html</div>';
var result = div.childNodes;

... do note that this method will return HTMLUnknownElements if you put SVG or MathML into it. They'll "look" normal, but they won't work.

Answer 2

First of all, Angular uses jQuery as well. (jQuery lite)

From FAQ

Does Angular use the jQuery library?

Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.

However, I think you don't need full jQuery function here anyway.

That is what I did.

I use a directive and get the html as template and set replace as true.

jsFiddle

<myhtml></myhtml>

angular.module('myApp', []).directive('myhtml', function($http) {


    return {
        restrict: 'E',
        scope: {},
        template:'',
        link: function(scope, element, attrs) {
           $http.post('/echo/json/', data).success(function(re) {
               element.html(re.html);
        });
    }
    }
});

Edit note:

I just update the jsFiddle.

I include jquery on top for echoing the request in jsFiddle. In real, you don't need that.

However, it shows you that you can use jQuery in Angular.

If your html doesn't contain any angular tag, this example should work as your expectation .

Otherwise, you need to use compile instead of link.