AngularJS - Directives vs Controllers

I think you should only use controllers to wire up services, dependencies & handle business logic.

Directives should be used for DOM manipulation so its great for handling user interactions e.g. add/edit a widget. It would be an anti pattern to add that to a controller as it's not a concern of the controller and it would get bloated by other features, it's easy enough to pass values(scope) from your controller to a directive if required.

You then get the advantage of being able to place your add a widget directive in other places of your app if required, and generally makes the code base easier to follow as its following Law of Demeter

Knowing when and where to split functionality is one of the hardest things for me about Angular you will make mistakes but it gets easier with practice.

To answer the question you probably should split it into a directive(s) but it's also a matter of complexity, If your app is simple like you said you may find what you have will be okay. It may just become a case of refactoring when a requirement changes.


Here's a brief stand-alone answer, with links to official docs for further info (definition of "services" added for good measure):

http://docs.angularjs.org/guide/controller

In AngularJS, a controller is a JavaScript constructor function that is used to augment the AngularJS scope.

When a controller is attached to the DOM via the ng-controller directive, AngularJS will instantiate a new controller object, using the specified controller's constructor function. A new child scope will be available as an injectable parameter to the controller's constructor function as $scope.

http://docs.angularjs.org/guide/directive

At a high level, directives are markers on a DOM element (such as an attribute, element name, or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even to transform the DOM element and its children.

http://docs.angularjs.org/guide/services

AngularJS services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.