Following the principle of separation of powers, he could not miss in AngularJS support to one of the most well-known pattern of presentation: the Model View Controller (MVC). Actually Angular is very flexible in the support of this pattern, and some interpret it more like a Model-View-ViewModel (MVVM), or, as defined by one of its authors, Model View Whatever (MVW or MV *).
The classic MVC pattern provides a graphical interface break it down into three components:
Component Description
Model : responsible for maintaining data
View : responsible for displaying the data (or part thereof) to the user
controller: controls the interaction between Model and View : it receives input from the view, the valid and executes business rules that change the status of the data model
To the classification there, the presentation pattern significant benefits in the development of graphical interfaces. Indeed separating the application logic from the presentation we can change the view without affecting the data model or have View different for the same model or even change data validation mode performed by the controller without operating the View .
In other words, a greater independence between the components involved and a more simple manutenibiltà. Thus we see in practice how they apply this pattern in Angular.
the view
In AngularJS a view is the visual result generated from an HTML template possibly enriched by directives. Consider for example the following HTML:
<div>
<p>Nome: <input type="text" ng-model="nome"></p>
<p>Cognome: <input type="text" ng-model="cognome"></p>
</div>
It is a page area within which is defined as display the name and the last name of a user. In it we see the use of a directive that we know already ng-model.
In other words, with this piece of code to be enriched directives we have defined how the user interface will display the data, ie a view.
In principle, the entire HTML environment managed by Angular application represents a view . The directive ng-apptakes over the management of all the HTML code controlled by it and automatically applies the bindings and evaluation of Angular expressions.
However, if we need a closer monitoring of what to display in a view, and how the user can interact with it, we need to associate a controller .
The controller
The definition of an controllerin Angular course requires writing JavaScript code, but what is important is that right from the start should be organized in such a timely fashion code.
First, in fact, you must assign a name to our application which was so far remained "anonymous." To do this, simply name the Directive ng-app :
<body ng-app="myApp">
So let's start writing our JavaScript code defining the first thing a module that contains the instructions of our application:
<script type="text/javascript">
angular.module("myApp", []);
</script>
The form definition is carried out using the method module()global object angularand passing a string representing the name of the form and a list of any dependencies. For the moment we do not go deeper than the definition of the modules. We will go into more detail later.
By matching the module name with the name assigned to the directive ng-appwe are informing Angularthat the code that handles our application is in the eponymous form.
Within this module we define the controller we need, and we do it thanks to the method controller():
<script type="text/javascript">
angular.module("myApp", [])
.controller("userController",
function($scope) {
$scope.nome = "Mario";
$scope.cognome = "Rossi";
});
</script>
The method controller()allows you to bind to a string a function which will have the task of representing our controller. In this specific case we have associated with the name userControllerof a function that performs assignments which we will return shortly.
The association between a view and a controller takes place via HTML-Directive ng-controller :
<div ng-controller="userController">
<p>Nome: <input type="text" ng-model="nome"></p>
<p>Cognome: <input type="text" ng-model="cognome"></p>
</div>
At this point the coupling between view and controller is carried out and the application is already running, even though they at present does not do much more than it did before having a controller.
