Quick Contact


    AngularJS MVC

    MVC stands for Model View Controller. It is a software design pattern for developing web applications. It is a software design pattern for designing and developing a web application.

    MVC is nothing but the software design pattern for designing and developing a web application. It is considered as the architectural pattern that has existed for a long time in software engineering. Many languages use MVC architecture with little variations in each one of them but conceptually it remains the same.

    In angular, we organize things in some different manner as compare to regular javascript. Therefore, Model View Controller architecture is the most popular and latest way of organizing an application.

    MVC Architecture & Components

    AngularJS MVC divides an application into three parts- Model part, View Part, Controller Part. Let’s see for what purpose each component of MVC serves:

    MODEL:-

    Model part consists of a database (use to store data), application data (application data are variables that are specific to a user. Application and logic (Logic refers to code that is written to perform a certain task).

    VIEW:-

    View part is the user interface part of an application. The information that is being displayed to the user in an application is written in this part.

    CONTROLLER:-

    The interaction between the model part and view part is controlled by a controller. It is more like software code.

    MVC in AngularJS

    Here, we will see how the components of MVC works in AngularJS:

    Enroll Yourself in Live Classes For Online Summer Training.

    Model Part in Angular Application

    It responds to the request made from view part. It can obtain data dynamically means you can get data from database like from MySQL or you can get data from static JSON (JavaScript Object Notation) file.

    < script>

    $scope.person = {

    ‘Name’:’Navi Singh ‘,

    ‘Address’:’Sadar road, New Delhi’,

    }

    < /script>

    View Part In Angular Application

    It is the presentation part of an application. Through the view part, a user can see the Model part. Therefore, the model and view part join together.

    < h1>{{person.name}}< /h1>

    Controller Part in Angular Application

    It is the central part of the angular application. Everything starts with a controller in angular. The model part and the view part join with each other. It means whatever happen to the model part automatically effects to the view part and whatever happens to the view part automatically effects to the model part also. Controller joins the model and view part.

    functionaddress($scope)

    {

    // Model Part is written here

    }

    Look at this final code with a model part, view part and controller part in the single code.
    	
    	< htmlng-app>
    	< head>
    	< title>Angular MVC < /title>
    	< scriptsrc=”lib/Angular/angular.min.js”>< /script>
    	< /head>
    	< body>
    	< div ng-controller = “address”>
    	< h1>{ {Person.Name} }< /h1>
    	< /div>
    	< script type=”text/javascript”>
    	function address($scope){
    	$scope.Person= {
    	'Name' : 'Navi Singh ', 
    	'Address' : 'Sadar road, New Delhi ', 
    	}
    	}
    	< /script>
    	< /body>
    	< /html>
    	
    Output

    Ram Kumar

    Enroll Yourself in Live Classes For Angular Training Online.

    Copyright 1999- Ducat Creative, All rights reserved.