AngularJS MVC Design Pattern

So what MVC stands for? MVC stands for Model, View and Controller. The main idea behind MVC design approach is that we have clear separation in our codes between managing the model entities, presenting the data to user (view) and the application logic which is the controller. So to sum up what is MVC can be described below.

Model

A model can be presented as a business data that is going to be used by View to be displayed on the screen .

View

A view can be considered as a screen interface where all the interaction and respond are taking place. Model data is presented directly into View.

Controller

A controller will be responsible to coordinate between View and Model. Any changes being made in the Model will be automatically changed or synced by controller in the View entity.

In Angular applications, the view entity is the html DOM object while the controllers are the JavaScript classes that will perform the business logic and the model entities are from object properties which can be sourced from database object.

Let see the example of how MVC works in action. We will create a list of books available for you to purchase from Amazon. The book item entity will be the Model, while the html DOM contains as UL List will be the View and then we define a BookController app in javascript which will perform the business logic displaying model in entity view.

<html ng-app='bookApp'>
<head>
<title>Example of AngularJS</title>
</head>
<body ng-controller='BookController'>
	<style type='text/css'>
		ul.book-list, ul.book-list li{
			margin:0;
			padding:0;
			list-style:none;
		}
		
		ul.book-list li{
			padding-bottom:25px;			
			clear:both;
			display:inline-block;
		}
		
		.book-image{
			float:left;
		}
		
		.book-desc{
			float:left;
			margin-left:10px;
		}
		
		.book-title, .book-price, .book-url{
			margin-bottom:5px;
		}
	</style>
	
	<ul class='book-list' ng-repeat='book in books'>
		<li>
			<div class='book-image'><a target='_blank' href='{{book.url}}'><img src='{{book.imageURL}}' alt='Read book {{book.name}}'/></a></div>
			<div class='book-desc'>
				<div class='book-title'><a target='_blank' href='{{book.url}}'>{{book.name}}</a></div>
				<div class='book-price'>{{book.price | currency}}</div>
				<div class='book-url'><a target='_blank' href='{{book.url}}'>Read more</a></div>
				<div class=''><button ng-click="getBook(book)">Click Me</button> <button ng-click="remove($index)">Remove Me</button></div>
			</div>
		</li>
	</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
	var mybookModule = angular.module('bookApp', []);
	mybookModule.controller('BookController',
		function ($scope) {
			$scope.books = [
				{name: 'Pro AngularJS',  price: 42.74, imageURL: 'https://bytutorial.com/assets/content/files/angularjs/book-pro-angularjs.jpg', url: 'https://www.amazon.com/gp/product/1430264489/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1430264489&linkCode=as2&tag=bytutorial-20&linkId=TH3DTWMXTI5U2J6C'},
				{name: 'Professional AngularJS',  price: 35.95, imageURL: 'https://bytutorial.com/assets/content/files/angularjs/book-professional-angularjs.jpg', url: 'https://www.amazon.com/gp/product/1118832078/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1118832078&linkCode=as2&tag=bytutorial-20&linkId=JBLHPV4RRSSD2VD4'},
				{name: 'Learning AngularJS',  price: 33.94, imageURL: 'https://bytutorial.com/assets/content/files/angularjs/book-learning-angularjs.jpg', url: 'http://www.amazon.com/gp/product/1491916753/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1491916753&linkCode=as2&tag=bytutorial-20&linkId=Y5SAKGBXUA4CB3Q2'}
			];
			$scope.remove = function(index) {
				$scope.books.splice(index, 1);
			},
			$scope.getBook = function(book){
				alert(book.name + ' ($' + book.price + ')');
			}
		}
	);
</script>
	
</body>
</html>

Demo of MVC AngularJS

The ng-controller tells AngularJS that the area of the <body> and </body> will be managed by BookController. While the ng-repeat will be used as a for loop to each model entity to be displayed in the DOM. Remember for data binding in AngularJS, you just need to specify double curly open and close {{ }}.

You can see the actual demo below.

{{book.name}}

{{book.price | currency}}

Read more

Learn how to write your first AngularJS first application. Include a quick html demo on how the directive works in AngularJS and how to use the data binding.

In this tutorial you will learn how to use the filter feature in AngularJS When you fetch the data directly from the database in JSON format for example they are usually unformatted By using the built in filter you can ...