How do i prettify XML which is returned as a String in AngularJS

Question

I have my HTML below return something from Angular (my angular code is below)

<section>
    <p>{{xml}}</p>
</section>

And in Angular, from the Java back-end, I am getting this "XML" as a string.

But I want to prettify it using the following plugin

https://github.com/krtnio/angular-pretty-xml

I don't know how to use this plugin after including it in my HTML file and this is where I ask for your help.

app.controller('xmlController', function($scope, $http){

    $http.get("/api/xml").then(function (response) {
        $scope.xml = response.data; //I need to PRETTIFY IT HERE ON $scope.xml
     });

});

Answer 1

Well, I think you are missing something in the installation process.

First you have to install the package on your app:

Via Bower:

bower install angular-pretty-xml --save

Via npm:

npm install angular-pretty-xml --save

Make sure to include it on your html file within the script tag (unless you are using some automated packaging system like webpack or something else that bundles it for you), so that you can add it as a dependency on your angular module declaration like so:

angular
    .module('myApp', ['prettyXml'])
    .controller('xmlController', function($scope, $http){

        $http.get("/api/xml").then(function (response) {
            $scope.xml = response.data; //I need to PRETTIFY IT HERE ON $scope.xml
        });
    });

This way you'll be able to use the filter on your templates like so:

<p>{{ xml | prettyXml}}</p>

References:

angular-pretty-xml