degliwe/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    #AngularJS: encapsulate components and template together
AngularJS best pratices recommends to organise your code by components, however, when you need to declare template (ie. templateUrl attribute in your directive) then you are supposed to provide a path relative to your main script (usually app.js) which makes your components dependent of their positione in the file tree.
##Let's do it
Since javascript provide Document and HTMLDocument types and since document.scripts exists and do part of the job, I've decided to extend the Document prototype to provide getScriptAbsPath().
You can do it the AngularJS way by implementing a service, but to me it was more a problem at Javascript level.
Document.prototype.getScriptAbsPath = function(filename){
    var scripts = document.scripts;
    var scriptPath = '';
    if(scripts && scripts.length>0) {
        for(var i in scripts) {
            if(scripts[i].src && scripts[i].src.match(filename)) {
                scriptPath = scripts[i].src.substr(0,scripts[i].src.lastIndexOf('/') + 1);
                break;
            }
        }
    }
    return scriptPath;
};
What is my own path?

Ok now we've got a new getScriptAbsPath() method for Document, let's use it.
At the top of each of my *.js file where I want to get the file path, let's declare the following
// get the absolute script path
var scriptPath = document.getScriptAbsPath("myFileName.js");
Where is my template?

Now, you just have to declare templateUrl as shown below.
app.directive("myAwesomeDirective", function () {
    return {
        restrict: "E",
        templateUrl: scriptPath +'my-awesome-directive.html'
    };
});
Conclusion

This is kind of workaround but it let you embed your templates inside your components folder and then make your components reusable.
If you find a better way, I'm very interested, leave a comment below.