Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • MVC architecture in angular

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 375
    Comment on it

    Model View Controller is abbreviated as MVC. MVC is the popular web design architecture because it separates the business logic from its view or presentation.
    It has three components:-

    • Model- an object carrying data.
    • View- visualization of data that model contains.
    • Controller-controls the flow of data and relation between the model and view.

    Now, lets understand how these components works in AngularJS MVC architecture-


    1.Model - It contains all the data(primitive data types and in the form of objects). It interacts with local database and backend JSON. For example:-

    <script> 
        $scope.webseries =  { 
             ShowName'    :   TVF Pitchers, 
             Channel :   TVF Play, 
             ImdbRating   :   22 
         } 
    </script>


    In the above example webseries is a variable which is added to the object($scope).


    2.View - It is the presentation of the data that the model contains. In Angular we use expressions to display the data from the controller. It is simply the manipulation of the DOM elements to display the data. For example:-

    <script>
    <p>{{webseries.ShowName}}</p>
    <p>{{webseries.Channel}}</p>
    <p>{{webseries.ImdbRating}}</p>
    </script>


    3.Controller - In Angular controller controls the flow of data into model object and updates the view whenever data changes. It keeps the view and model separate. It provides great controller as to displaying of data in the view according to the request. For example:-

    <script> 
    function Worldwebseries($scope){ 
    } 
    </script>

     

    The complete code will look like this:-
     

    <html ng-app=myApp"> 
    <head> 
    <title> AngularJS MVC Architecture small example</title> 
    <script src="js/angular.min.js"></script>
    </script> 
    <script type="text/javascript"> 
    //Creating controller here 
    var app = angular.module(myApp', []); 
        app.controller('Worldwebseries', function($scope) { 
        //Creating model here 
        $scope.webseries =  { 
             ShowName'    :   TVF Pitchers, 
             Channel :   TVF Play, 
             ImdbRating   :   22 
         } 
        }); 
    </script> 
    </head> 
    <body> 
    <p>Displing model data in view through controller</p> 
    <div ng-controller="Worldwebseries"> 
    <p>{{webseries.ShowName}}</p>
    <p>{{webseries.Channel}}</p>
    <p>{{webseries.ImdbRating}}</p>
    </div> 
    </body> 
    </html>

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: