Wrapping Features in Directives?

[Mark Nutter]

One thing about app organization I haven't quite nailed down in my head is whether or not an app's features should be split up into a bunch of directives or whether they should be controllers that use smaller more generic directives to compose functionality. I've seen it done both ways. I've seen apps where a huge feature is wrapped inside a directive with a template and a tiny controller basically just works with ng-view and angular's router to serve a small template with a single element that invokes the much larger directive. I've also seen apps where most of the business logic is in controllers and view templates and directives are extremely generic and relatively small and simple. 

I wanted to get a sense of what people are doing these days. So far, the rule of thumb I've come up with is that directives should really only ever be used if you plan to re-use the functionality they implement extensively. Otherwise just stick to controllers and view templates/partials. Also, keep any logic dealing with server communication or data manipulation/gathering out of directives. Data should be properly manipulated and passed into a directive from a controller which in turn should be relying on services to do the bulk of that work. That way your directives don't rely on specific requirements related to data retrieval. 

To make this post clearer, here's an example of a scenario I am struggling with:

Let's say you have blog app. You have an index page that has blog posts. The blog index page's logic should go in a controller which uses a service to retrieve the blog posts and attach them to the scope. I don't think a directive that wraps the index of blog posts would make sense here. However, the blog posts themselves may have a lot of logic tied to them. That logic shouldn't go in the blog post index page. But should one create a "blogPost" directive in this case and throw all the logic related to individual blog posts in there? Or should it just be an ng-controller tag on each blog post? What if this is the only place you'll ever use that blogPost directive? What's the value in even making it a directive? The ability to isolate the scope? 

In short, how much should directives know about your apps business logic? Should they be ultra generic like the built in ng-* directives?

[Jim Lavin]

If you think about the lines we've tried to draw for each of the component types; directives to manipulate the DOM, controllers to handle user interaction and services to perform business logic and interacting with back end services, you can see that trying to shove business logic into a directive goes against best practices. 

What I would do is try using a ng-repeat that repeats a partial tied to a controller. To assign the blog post to the controller you could use a ng-init directive in the partial. This way you are reusing the same functionality over and over but sticking to what is considered best practice.

[Mark Nutter]

That's the same conclusion I think I've reached too so it's good to get confirmation on it. Thanks!

On Wed, Feb 19, 2014 at 3:04 PM, Jim Lavin <jim.la...@gmail.com> wrote:

If you think about the lines we've tried to draw for each of the component types; directives to manipulate the DOM, controllers to handle user interaction and services to perform business logic and interacting with back end services, you can see that trying to shove business logic into a directive goes against best practices. 

What I would do is try using a ng-repeat that repeats a partial tied to a controller. To assign the blog post to the controller you could use a ng-init directive in the partial. This way you are reusing the same functionality over and over but sticking to what is considered best practice.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/vp1ZLb1V4ZA/unsubscribe.
To unsubscribe from this group and all its topics, 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.
For more options, visit https://groups.google.com/groups/opt_out.