Larger reusable components – directives or controllers?

[Tom Green]

Hi guys,

I’m exploring angular right now and like it a lot. But I’m not sure what the best way to write reusable components is. Here my question:

I want to create reusable component that:

• Display some data
• Capture some input from the user
• Talk to the backend to load additional Data
• Get some initial data from the embedding view

I want to create a dashboard that contains several widgets. These widgets are the same component but get initialized with different data. It looks something like this:

--------------------------------------------------------------------------
| Dashboard component                                       |
|------------------------------          ------------------------------  |
|| Widget(a)             |           |Widget(b)                ||
|-----------------------------           --------------------------------|
|------------------------------          ------------------------------  |
|| Widget(c)             |           |Widget(d)                ||
|-----------------------------           --------------------------------|
--------------------------------------------------------------------------

How would you achieve this?

My current thoughts:

Directives

Plus:  Good reuse and I can easily access attributes

Minus: more the kind of a small component, how would I use Controllers or Services to call the backend?

Controllers:

Plus: Good access to services (DI), could be parameterized with ng-init

Minus: It’s only the code part. How would I bundle the view? Use ng-include?

Beside of that I’m not sure how multiple controllers and nesting them would result in some problems.

 

Kind regards

Tom

[ganaraj p r]

I think this is a very good question. 

Like you I have been confused about what we should be doing to create large reusable components or in general how we should be encapsulating "views" (Like for example EmailDetailsView )  in angular as opposed to components (date picker ). There are two kinds of large components , 1. views 2. large components itself like for example what if you are writing code mirror in angular? 

People have different solutions for this. Controllers with small reusable components doesnt really scale well (which is your suggestion 2). Directives (Dont really know where logic goes and whether its right to interact with services - for example make http calls? ). This is something I have been wondering for a long time now and your question seems to have triggered a possible solution.

TL;DR the solution is to create directives. We consider directives to be a mechanism for small components. But, there is nothing preventing us from creating our own complex "views" inside of directives. As long as you encapsulate everything in there, it should be fine. But what I failed to understand was how heavily Angular forced you to think in terms of data ( as opposed to DOM manipulation ).If we remember, Angular is meant for converting your html into a DSL. If you are creating a EmailDetailsView, you need to provide it a single data source which is what is going to be used by it to interact with the outside world (if needed ). 

I would not suggest using directive "controllers". Alternately, the best course of action would be to declare a complex template and since a directive template is going to be ng-included - it serves as a naming mechanism.

<div data-email-details-view></div>

is going to be same as

<div ng-include="'/partials/emailDetailsView.html'" ng-controller="EmailDetailsController"></div>

except that the first option is going to be more semantic (personal opinion). Also, the first option allows you the option to go isolate scope and also you can pass data to it where required. 

I think an even better option would be to go

<email-details-view></email-details-view>

with parameters as attributes.

[Sander Elias]

Hi Tom,

Isn't this where modules are for? Just write an separate module, and inject that into your 'main' app,

something like:

angular.module("widget1",[])

   .controller("controlerstuff", [$scope,function($scope){...})

   .directive(...)

   .service(...)

angular.module("MyMainApp",["widget1"]).....

Regards

Sander

[Tom Green]

Hi,

thanks for your input. So you suggest to write a template + controller instead of directives with directive controllers?
To make the reuse easier you wrap the include into a directive? How would your email-details-view directive look like? How would you initialize the controller with attributes from the embedding component?

Kind regards
Tom

[Tom Green]

Hm something didn't work? Maybe a repost:

Hi Sander,

in my example I would like to use the widget component several times. I can reuse modules but how do I include the UI stuff into my 'MyMainApp' and how do I parametrize the widget module to be widget for 'a', widget for 'b'. I want to reuse the same larger component on different places in one view.

Kind regards
Tom

[ganaraj p r]

Here is an example of what I have been talking about

http://plnkr.co/edit/QU4r05n9rQprwyL9Ltxh?p=preview

There is explicit declaration of a controller at the topmost element ( in the template ). I think this is a better approach than declaring a directive controller. I make this distinction mostly because a directive controller is meant for a different purpose ( Its purpose is to allow communication between different directives ..) - so using it would be putting two different concerns in one.. Also, the template is going to get more complex..it can define other controllers inside of it. So the whole editor module that we defined there is going to have its own set of controllers ( and even services if required )..

When bringing in this view into the main app, you will load a dependency on this module to the app and just declare the main directive at the right location. 

Hope this makes things more clearer. This architecture also gives you the freedom to define your whole app in your own DSL ( the directives convert the html into your DSL )..

[Sander Elias]

Hi Tom,

I created a really small sample, perhaps you can expand that to show what you are trying to accomplish. I created a small directive to box something in, and add an click handler on it. 

Have a look at the code, and tell me if this is in line with what you want to do, or try to enlighten me.

Regards

Sander Elias

[ganaraj p r]

@Sanders : Did you forget to paste the source ? 

[Sander Elias]

Whoops!

[Bimal Kumar]

Use Directives - 

You can inject services in the directive and thus communicate with the server. 

You can use directive controllers to communicate with other directives or to initialize some services before the link function gets executed.

Use isolate scopes for reusable components, they are difficult to wrap your head around but once you get it, it is very powerful and easy.

Infact, you can make your whole application with directives and services alone without using seperate controllers.

[Witold Szczerba]

When I do reusable components, I do create a new module. This module
contains everything the component needs: the directive (or few if
required), separate controllers (if needed) and what-else. Directives
gives you all the power you can get from Angular, this is: the
components can be parametrized, can have isolated scopes, can ask for
services and last but not least - they are extending HTML syntax, so
it is straightforward to use them.

--
Witold Szczerba

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to angular+u...@googlegroups.com.
> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

[Gaurav Ashara]

Hello Tom

Can you share what you follow in this case?

I have same what situation. It will help full to me.

Thanks & Regards
Gaurav Ashara

[Gaurav Ashara]

Hello Tom

Can you share what you follow in this case?

I have same what situation. It will help full to me.

Thanks & Regards
Gaurav Ashara

On Monday, May 13, 2013 at 2:26:17 PM UTC+5:30, Tom Green wrote: