MVC

AngularJS is a MVC framework. It does not implement MVC in the traditional way, but rather something closer to MVVM (Model-View-ViewModel).

Model

Models are plain old JavaScript objects that represent data used by your app. Models are also used to represent your app's current state.

<script type="text/javascript">
 //defining book's authors model
 var bookAuthors=["Shailendra Chauhan","Saksham Chauhan"]
</script>

View

The View represents HTML and presentation of the data. The view is visible to the user and he can interacts with view.

<div ng-controller="Ctrl">
 <table>
 <tr>
 <td>Book Id :</td><td><span ng-bind="book.id"></span></td>
 </tr>
 <tr>
 <td>Name :</td><td><span ng-bind="book.name"></span> </td>
</tr>
 <tr>
 <td>Authors :</td><td> <span ng-bind="book.authors"></span> </td>
</tr>
 </table>
</div>

View Model

A viewmodel is an object that provides specific data and methods to maintain specific views. Basically, it is a $scope object which lives within your AngularJS app's controller. A viewmodel is associated with a HTML element with the ng-model and ng-bind directives.

<script type="text/javascript">
//defining book viewmodel
 $scope.book = { id: 'ABXY01', name: 'C# Interview Questions and Answers',
 authors: bookAuthors}
</script>

Controller

The controller defines the actual behavior of your app. It contains business logic for the view and connects the model to view with the help of $scope. A controller is associated with a HTML element with the ng-controller directive.

<script type="text/javascript">
//defining module
 var app=angular.module("app",[]);
//defining controller
 app.controller('Ctrl', function ($scope) {
 //defining book's authors model
 var bookAuthors=["Shailendra Chauhan","Saksham Chauhan"]
 //defining book viewmodel
 $scope.book = { id: 'ABXY01', name: 'C# Interview Questions and Answers',
 authors: bookAuthors}
 });
</script>

Complete Code Example

MVC pattern in AngulaJS

What do you think?

I hope you will have better understanding of MVC pattern in AngularJS. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.