4

Beginning angular developer here.

Let me start off by saying that I really admire angular, I think that it is a very well architected framework.

That said, I can't understand why controllers exist. Let me explain myself:

From what I understand services have a well-defined role: 1) store parts of the model needed throughout the app 2) perform business logic 3) talk to the server

Views: 1) display the model

Directives: 1) create scopes 2) expose functionality to the scopes they create through which they take input from the user and a) change the model b) manipulate the DOM

What is the point of controllers? It seems like directives are designed to perform all the work that controllers do.

Is the delineation that the controller should be manipulating the model while the directive manipulates the DOM?

pQuestions123
  • 4,471
  • 6
  • 28
  • 59

2 Answers2

2

Angular is not a particularly opinionated framework, although some people might tell you it is.

Controllers are an easy way to access/create a scope and link lots of other parts together. They are flexible and easy and fit well for a 'that thing you just need to do some stuff in this one spot'

Directives should be reusable and expressive, like 'thing that gives me a button that makes the ajax request' that you want in 5 places. A controller doesn't make sense for that task.

Using a directive whenever you really needed a controller is pretty heavyweight and probably kind of ugly, that's where I would see the point of differentiation.

Having said that, there's nothing really stopping you from using directives everywhere if you think they're better.

Peter Ashwell
  • 4,292
  • 2
  • 18
  • 22
  • OK thanks for this, it kind of does make sense. Why do you say that directives are more heavy weight though? I mean isn't ng-controller just another directive? – pQuestions123 Feb 06 '15 at 01:24
  • 1
    ng-controller is a directive that associates a controller with an element. Controllers aren't directives. I think it's 'heavyweight' because you have to write more code to create the directive and unit test it. – Peter Ashwell Feb 06 '15 at 01:45
1

Let's quote the AngularJS documentation :

From this chapter:

What are Directives?

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

From that chapter:

Use controllers to:

  • Set up the initial state of the $scope object.

  • Add behavior to the $scope object.

Do not use controllers to:

  • Manipulate DOM — Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. Angular has databinding for most cases and directives to encapsulate manual DOM manipulation.

  • Format input — Use angular form controls instead.

  • Filter output — Use angular filters instead.

  • Share code or state across controllers — Use angular services instead.

  • Manage the life-cycle of other components (for example, to create service instances).

You've got everything there, almost.

The subtle point is that because AngularJS works on top of Html pages and js code alone (as opposed to a more traditional client/server setup), the view and the "backend" usually supported by the server are all embedded in the same document, and the directive, as a facility to manipulate the DOM, is also a core functionality to bootstrap the application, so it must be tempting to just hardcode the application directly there. And this is what is happening already in the framework: specific directives are devoted for controllers.

In the MVC architecture, the controller helps bridging the views and the models, and centralise functionalities revolving around a group of models and their data. It also helps delineating what belongs to pure UI from what is business logic: changing your UI should not impact that logic, unless you plan to deliver new functionalities. But again, here these patterns overlap, because of the platform constraints.

The decisive argument is probably the following: if you did not use the builtin controller modules and directives, you would have to derive new directives for binding UI entry points to business logic, and in the process you would recreate objects following the controller pattern to hold code behind these entry points.

AngularJS makes it easy for you and gives you that out of the box.

Or maybe you would come up with an alternative?

Community
  • 1
  • 1
didierc
  • 14,572
  • 3
  • 32
  • 52