AngularJS directive as components

Question

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!

Answer 1

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?

If your directives are variations of visualization, but keep the same functionality, I recommend you to have only one main directive and create inner directives that allow the developer to customize how it'll look.

A good example of this includes Angular UI Bootstrap Tabs.

Is it faulty to make the directives actually load the data themselves or should I always pass the data to them?

Directives are pieces of reusable components. If you embed the data loading into the directive, your controllers will be simpler.

But what if there's a need to filter that data in just an specific part of your application? Let the developer pass the data they want, either filtered or not.

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.

A good approach would be to create a myComponentTestData service, which allow you to decide from the controller what to use, and then pass that data to your directive.

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.

You're right in thinking that the state should lie in the directive. You can control this behavior by passing a promise instead of the fetched data -- if the promise is fulfilled, then you test if your data is faulty or not.