通过角度javascript或其他任何方式生成html css源代码

Question

I build a drag & drop HTML Layout generator using Angular.js. Now I want to save generated HTML,CSS source code removing angular.js code from only the design. Is their any solution for generating HTML, CSS code using angular.js?

Answer 1

Here you can use jquery to get your html like as

var allContent = $('.page-content').clone();

Remove extra tag by this way

//remove all angular class
allContent.find("div[class^='ng-'],div[class*='ng-']").each(function () {
   //check and remove class
});

//remove all ng-model attribute ans so no
allContent.find('*[ng-model]').removeAttr('ng-model');

Clean your html and get all html

allContent.htmlClean();
var customPageContent = allContent.html();

and finally save this by using https://github.com/eligrey/FileSaver.js

var blob = new Blob([customPageContent], {
                type: "application/xhtml+xml;charset=charset=utf-8"
            });
saveAs(blob, fileName + ".html");

Extra function

//clear your html
$.fn.htmlClean = function () {
    this.contents().filter(function () {
        if (this.nodeType != 3) {
              $(this).htmlClean();
              return false;
          } else {
              this.textContent = $.trim(this.textContent);
              return !/\S/.test(this.nodeValue);
          }
      }).remove();
      return this;
};

I think this will help you.