MVC in AngularJS Example


     AngularJS is MVC based framework. In this tutorial we will see what is Model, View and Controller in general and how this can be related to AngularJS with clear explanation and appropriate example.

Model -  is responsible for managing application data. So in AngularJS model can be a primitive type such as string, boolean, number or even the complex type such as object. Technically its nothing but the Javascript object.

View - is presentation of data in a particular format, triggered by the controller's decision to present the data or in simple words, View is what users see. In Angular View is Document Object Model (DOM). To display data from controller you can put angular expression in your view.

Controller - The controller responds to user input and performs interactions on the data model objects. In AngularJS controller is formed by javascript classes.

Now lets see them in action with an example..

Step 1: Create Controller
      Controller is a javascript object that can be created using Javascript constructor as follows.
The AngularJS application is defined by  "myApp". The application runs inside the <div>.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) 
{

}
);

So here we have created our controller named "myCtrl".  ($scope will be explained below)

Step 2 : Create Model      
      As said earlier, Model is primitive type..
$scope.message = "there !";

In the above code "message" is our model which is a String. Since we want the model available to be accessed by our view, we’re making each model as a property of $scope.
Each controller has its own scope. Scope is like a bridge between controller and view, you need scope every time you create a controller.

Step 3: Create View
   Now we have the controller and Model ready, we need View to display to the user

<!DOCTYPE html>
<html>
 <script src ="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<body>
 <!-- VIEW -->
 <div ng-app="myApp" ng-controller="myCtrl">
  Type Something <input type="text" ng-model="message"><br>
  Hello  {{message}}
 </div>

 <script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
      $scope.message = "there !";
  });
 </script>
 
 </body>
</html>

The first thing to do here is point <div> your application using ng-app directive. Then the controller to be used using ng-controller directive. This actually defines the controller.

"myCtrl" is a javascript function. AngularJS will invoke this controller with a $scope object. The controller creates one property (message)  in the scope . The ng-model directives binds the input field to the controller property (message).

Now RUN the program to see the output. Immediately after execution below will be the output. We can see whatever that was written in model(there!) is shown as output.

Output

Now Type something and see the same will get appended..

Output

Hope this tutorial helps you to understand the below stuff 
  • Model in AngularJS
  • View in AngularJS
  • Controller in AngularJS
  • ng-controller directive in AngularJS





Reactions:

0 comments :

Post a Comment