I am in a project where we want to componentify a lot of "information boxes".
These boxes (lets say they are mostly different types of tables) should easily be included into different pages and even different projects(we include the components as a library into an angular js project, so angular js a requirement). In the long run these components might even be available as an API for other developers to use.
So far the directives include their own template, a common css styling + a unique style for the component, a set of testdata files.
So my question is basically: can this be a good approach? Is it faulty to make the directives actually load the data themselves or should I always pass the data to them?
The reason I want the directive to load data themselves is that I include testdata in the library allowing for testing the components in place (on for instance a dashboard) without having to implement the "real" data.
Also, the components will have at least three states (loading, faulty data, finished loading) which I think should lie with the directive, again prompting for the directive to load the data itself.
My thought was to either pass (for testing):
<my-directive test-data="testfile.json"> <my-directive load-data="/myurl">
Is this a good approach. If yes, should I put the data loading in the directive controller and utilizing some common "data-fetching-service" for all components?
I understand that this "question" is more a ramble than anything else but it's really hard to make a design decision which such limited angularjs knowledge, so I am reaching out!