World Of Information Technology: AngularJS : Model-View-Controller Architecture And Different Ways of Writing Code

What is Model-View-Controller (MVC) Architecture ?

Model-View-Controller (MVC) is one of the software architectural pattern for implementing user interfaces (UI). This architecture divides a software application into three interconnected parts as given in its name i.e. Model, View and Controller. It separate internal representation of information from the ways that information is shown to or accepted from the user.

• Model : Model is the data shown to the user in the view and with which the user interacts. Data can be of two types :
-----1) Dynamic data: It can get from database like MySQL, SQL, Oracle, MS-Access etc.
-----2) Static data : It can get from JSON file.

• View : View actually represents the application data to the user and also takes the data from the user and send to the controller. There is no any business logic.
• Controller : The controller is responsible for controlling entire application. It also contain business/application logic behind views.

A controller can send commands to the model to update the model's state (e.g.- editing a document). It can also send commands to its associated view to change the view's presentation of the model (e.g. - by scrolling through a document).

AngularJS

AngularJS is a structural JavaScript framework for developing dynamic web applications. It uses HTML as your template language and lets you extend HTML's syntax to express your application's components clearly.

In programming languages, AngularJS is built around the belief that declarative code is better than imperative when it comes to building User Interfaces and writing software components together, while imperative code is excellent for expressing business logic.

What is Imperative Code and Declarative Code? What are the differences between them?

There are two ways of writing code: imperative programming and declarative programming.

• Imperative programming: It tells to the machine how to do something and as a result what you want to happen will happen.
• Declarative programming: It tells to the machine what you would like to happen, and let the computer figure out how to do it.

If you are not understand this concept more clearly by this theoretical definitions, then following examples will clear your all the problems practically.

Example : To double all the numbers in an array.

Imperative Code:

var arrNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var arrResults = [];
 
for(var i = 0; i < arrNumbers.length; i++) {
  var newNumber = arrNumbers[i] * 2;
  arrResults.push(newNumber);
}
console.log(arrResults);

Output : => [0, 2, 4, 6, 8, 10, 12, 14, 16, 18]

Here in this example, for loop explicitly iterate over the length of the array, pull each element out of the array, double it, and add the doubled value to the new array (arrResults), mutating the arrResults array at each step until we are done.

Declarative Code:

This approach might use the Array.map function and look like:

var arrNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  
var arrResults = arrNumbers.map(function(i) {
  return i * 2;
});
console.log(arrResults);

Output : => [0, 2, 4, 6, 8, 10, 12, 14, 16, 18]

map creates a new array from an existing array, where each element in the new array is created by passing the elements of the original array into the function passed to map (function(n) { return n*2 } in this case).

map function is abstract away the process of explicitly iterating over the array, and lets us focus on what we want to happen. Note that the function we pass to map is pure; it doesn't have any side effects (change any external state), it just takes in a number and returns the number doubled.

There are other common declarative abstractions for lists that are available in languages with a functional bent. For example, to add up all the items in a list .

Imperative Code:

var arrNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var totalSum = 0;
 
for(var i = 0; i < arrNumbers.length; i++) {
  totalSum += arrNumbers [i];
}
console.log(totalSum);

Outout : => 45

Declarative Code:

using the reduce function:

var arrNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
var totalSum = arrNumbers.reduce(function(previousSum, i) {
  return previousSum + i;
});
console.log(totalSum);

Output : => 15

reduce boils a list down into a single value using the given function. It takes the function and applies it to all the items in the array. On each invocation, the first argument (sum in this case) is the result of calling the function on the previous element, and the second (n) is the current element. So in this case, for each element we add n to sum and return that on each step, leaving us with the sum of the entire array at the end.

Again, reduce abstracts over the how and deals with the iteration and state management side of things for us, giving us a generic way of collapsing a list to a single value. All we have to do is specify what we are looking for.

Conclusion :

I hope that this article would have helped you in understanding AngularJS Model-View-Controller Architecture And Different Ways of Writing Code. Please share your knowledge if you know more about this attribute. Your feedback and constructive contributions are always welcome.