Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • MVC architecture in angular

    @munmun.sarkar
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 698
    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:-

    1. <script> 
    2.     $scope.webseries =  { 
    3.          ShowName'    :   TVF Pitchers, 
    4.          Channel :   TVF Play, 
    5.          ImdbRating   :   22 
    6.      } 
    7. </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:-

    1. <script>
    2. <p>{{webseries.ShowName}}</p>
    3. <p>{{webseries.Channel}}</p>
    4. <p>{{webseries.ImdbRating}}</p>
    5. </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:-

    1. <script> 
    2. function Worldwebseries($scope){ 
    3. } 
    4. </script>

     

    The complete code will look like this:-
     

    1. <html ng-app=myApp"> 
    2. <head> 
    3. <title> AngularJS MVC Architecture small example</title> 
    4. <script src="js/angular.min.js"></script>
    5. </script> 
    6. <script type="text/javascript"> 
    7. //Creating controller here 
    8. var app = angular.module(myApp', []); 
    9.     app.controller('Worldwebseries', function($scope) { 
    10.     //Creating model here 
    11.     $scope.webseries =  { 
    12.          ShowName'    :   TVF Pitchers, 
    13.          Channel :   TVF Play, 
    14.          ImdbRating   :   22 
    15.      } 
    16.     }); 
    17. </script> 
    18. </head> 
    19. <body> 
    20. <p>Displing model data in view through controller</p> 
    21. <div ng-controller="Worldwebseries"> 
    22. <p>{{webseries.ShowName}}</p>
    23. <p>{{webseries.Channel}}</p>
    24. <p>{{webseries.ImdbRating}}</p>
    25. </div> 
    26. </body> 
    27. </html>

     

    angular AngularJS MVC MVC in angular Model view controller model view controller in angular MVC in angularjs
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: