We are creating a new widget in that we are implementing a feature which tells how many css files which are included in a html page.
We need the count of css files used in the page and also the names of the css files.
I am bit new to angular and I have heard this can be done using directives but have no idea how to achieve it.
Need your help guys. Thanks in advance.
Is your application already in Angular? This jQuery code would do this task easily:
var cssList = []
$('head link[type="text/css"]').each(function(){
cssList.push($(this).attr("href"));
});
console.log("List of files:" + cssList.join());
console.log("Number of files:" + cssList.length);
Using angular:
.directive('cssCounter', ['$document', function($document) {
function cssFilter(l) {
return l.type === 'text/css' || l.rel === 'stylesheet';
}
function link(scope, element, attrs) {
var links = $document[0].querySelectorAll('link');
var linksAsArray = Array.prototype.slice.call(links, 0);
var cssLinks = linksAsArray.filter(cssFilter);
var cssNames = cssLinks.map(function(c) {
return c.href;
});
scope.cssFiles = cssNames;
}
return {
link: link,
template: '<p>CSS count: {{cssFiles.length}}<ul><li ng-repeat="c in cssFiles">{{c}}</li></ul></p>'
};
}]);
And example plunker can be found here: http://plnkr.co/edit/TqNAOKw4biyA7akdHfa4
type="text/css", but in your html, you specify rel="stylesheet".Using no external libraries, this is how you can do it:
var links = document.querySelectorAll('link');
var linksAsArray = Array.prototype.slice.call(links, 0);
var cssLinks = linksAsArray.filter(function(l){return l.type === 'text/css';});
var cssNames = cssLinks.map(function(c){return c.href;});
var count = cssNames.length;
console.log("css count and names:", count, cssNames);
