Angular controller - why do they name it controller?

Question

From here

In general, a Controller shouldn't try to do too much. It should contain only the business logic needed for a single view.

I can't understand why it's controller. It must be model. Please,explain.

EDIT:
This is the example from official developer guider:

angular.module('invoice1', [])
.controller('InvoiceController', function() {
  this.qty = 1;
  this.cost = 2;
  this.inCurr = 'EUR';
  this.currencies = ['USD', 'EUR', 'CNY'];
});

<div ng-app="invoice1" ng-controller="InvoiceController as invoice">
  <b>Invoice:</b>
  <div>
    Quantity: <input type="number" min="0" ng-model="invoice.qty" required >
  </div>
  <div>
    Costs: <input type="number" min="0" ng-model="invoice.cost" required >
    <select ng-model="invoice.inCurr">
      <option ng-repeat="c in invoice.currencies">{{c}}</option>
    </select>
  </div>

What I don't understand is that controller = model here. Am I not right?

Answer 1

please understand controller does the business logic only.

MVC-model views and controllers.

model:only the data

view:View is display of model that is your data.  only the visible part(html)

controller: which handles and manipulates the data.

Model is data, not the business logic and controller handles it. also read this

Answer 2

Model usually contains data and methods directly connected with that data. Controller connects that data with view (and services etc. in Angular's case). What exactly Angular's controllers do. It is common practice when people put a lot of logic to models or controllers. In Angular way there is a lot of other stuff that contain the logic. Models contain just the data, controllers using just to connect all that parts together. Look closely at ng-model directive: it's actually bind to view just a variable!

[Added later, after example added to question] He-he! That's tricky example. In it controller actually looks like a model. Look better at this example

phonecatApp.controller('PhoneListCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.',
     'age': 1},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.',
     'age': 2},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.',
     'age': 3}
  ];

  $scope.orderProp = 'age';
});

Here controller is controller, phones and orderProp are models and $scope is scope. =) Look at this picture: You can see there models are 'inside' the controller's scope.

MVC is actually just pattern. You are free to use it in different mysterious ways, there are no compiller errors about wrong pattern usage. But the only reason to use it - to make stuff more straightforward. So less tricky ways are better!

Answer 3

Angular does not strictly follow the MVC. It is closer to MVVM: Model-View-ViewModel (or Model-View-Whatever, not that it is very helpful though).

In a nutshell:

• Angular Controller and Scope go into the ViewModel layer:

The ViewModel can be considered a specialized Controller that acts as a data converter. (From here).

Its responsibility is to represent only the data needed for the View and glue them to the View. The data here are typically copied or referenced from the actual Model layer.

• The Model layer (in MVVM) knows nothing about the View. This is where Angular Services go, and where you want to put the most of your business logic, to keep the Angular Controller (i.e. the ViewModel layer) thin.

---

A typical violation of this pattern, sadly frequently occuring in various tutorials, is to put server requests into Controller. Imagine you want to change your backend - now you are rewriting your Controller! Every single one that talks to your backend! Instead your Controllers should not know anything about the server. That information goes into your Model (Angular Services). Then with any change of the backend, you only need to rewrite the Services specifically dealing with it. Much cleaner and easier to maintain.