AngularJS follows the MVC pattern of software engineering and encourages loose coupling between presentation, data, and logic components. However, in the AngularJS framework, we do not declare the model as in other MVC libraries such as Ember.js and Backbone.js.
In AngularJS, we declare the model within the controller, through the use of $scope. Let's check the MVC behavior inside AngularJS in the upcoming sections.
AngularJS Model can be considered as a JavaScript object or a primitive JavaScript type such as string, number, boolean, or complex objects.
Synthesizing its definition, AngularJS Model is a JavaScript object inside controllers using $scope. The properties and behaviors that represent the object can be accessed by its respective View.
Later, we will go deeper in to the use of $scope; for now, let's see a simple example:
function UserController($scope) {
// A simple JavaScript object to hold our Model
var user;
user = {
// User properties, add as many as you need
name: "Fernando",
age: "25"
}
$scope.user = user
}The preceding snippet is based on pure JavaScript object and is assigned to $scope.user, we can declare it directly as:
function UserController($scope) {
$scope.user = {
// User properties, add as many as you need
name: "Fernando",
age: "25"
}
}There are several ways to declare objects within the controller, and you can choose the way that suits you.
Imagine that View is what we have in the browser; it is where the user interacts with our application, manipulating DOM. This is done using AngularJS expressions. Expressions are a very practical way to interact with the View (HTML) example:
<div ng-controller="UserController">
<h1>{{ user.name }}</h1>
</div>Its syntax is comprised of double brackets and the name of the variable / property that we want to render. There is another way to do the same, using ng-bind:
<div ng-controller="UserController"> <h1 ng-bind="user.name"></h1> </div>
The main difference is if AngularJS takes a while to compile the application code, the user might see the double brackets expression before the content. To avoid this type of behavior, we can use the ng-cloak directive, applied to the body element on the HTML page, as shown in the following code:
<body ng-cloak>
Otherwise, we can use the ng-cloak directive inside any HTML element of the page as follows:
<div ng-controller="BandController" ng-cloak>
<ul>
<li ng-repeat="band in bands">{{ band.name }} - {{ band.album}}</li>
</ul>
</div>By the use of two-way data binding of AngularJS, this expression is bound to the property of our Controller to server.
Taking into consideration the definition of Controller in the MVC pattern, Controller is where we place all the application logic. However, in AngularJS, controllers are like classes in JavaScript, and here is where our AngularJS Model resides, as we mentioned earlier.
The AngularJS controller concept is quite different from other MVC libraries, where we can create models separately from controllers' code, like in Backbone.js and Ember.js.
Let's take a look at how it all relates. For the following example, we use all the JavaScript code in the same file, but for a modular and scalable development, you must organize each file in its place:
<html>
<head>
<title>Angular MVC Example</title>
</head>
<!-- Setup Angular App -->
<body ng-app>
<!-- Setup User Controller -->
<div ng-controller="UserController">
<h1>{{ user.name }} - {{ user.age }}</h1>
</div>
<!-- Setup Band Controler -->
<div ng-controller="BandController">
<ul>
<li ng-repeat="band in bands">{{ band.name }} - {{ band.album }}</li>
</ul>
</div>
<!-- Include Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<script>
// Set the controller with a basic function
function UserController($scope) {
// A simple JavaScript object to hold our Model
var user;
user = {
// User properties, add as many as you need
name: "Fernando",
age: "25"
}
$scope.user = user
}
function BandController($scope) {
// A simple JavaScript object to hold our Model
// using $scope
$scope.bands = [
{name: "Metallica", album: "Master of Puppets" },
{name: "Slayer", album: "Seasons in the Abyss"},
{name: "Anthrax", album: "Persistence of Time"}
];
}
</script>
</body>
</html>In this simple example, we can see something beyond what we talked about previously: ng-app, ng-controller, and ng-repeat.
Now, we'll see what this means in more detail.