MVC in Angular Js

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>