home

Angularjs MVC Introduction

Yes, you have chosen the awesome tutorials website. Let’s start from evolution of the SPA.

AngularJs Tutorials Banner

S - Single

P - Page

AApplication

Web applications have evolved from static website application to dynamic and now it’s changed to single page application.

MVC-Model View controllerModel view controller is the key concept of mobile or desktop application, and controller is core and the dictator for the MVC concept.

Model – Model is the combination of business logic and maintaining data.

View - View is the interface for the application, complete interface depended on views. View are dynamic it keeps change based on the user needs, views always communicates with the model to fetch the Data via controller.

Controller – controller is key that coordinate or control (interact) between model and views.

MVC is design pattern to create light weighted application which interact user-friendly.

We hope by reading the above, you ate least got some idea about MVC. To learn more and to understand more please follow the below code with examples code, that will give you a brief introduction and clarification about MVC.

MVC Advantages

Angularjs Controller creation

Let’s create a basic controller code. Here we have controller called Mycontroller, controller is nothing but function class javascript. And also we have a scope object($scope), each one controller has its own scope and scope is glue between the controller and view.

function Mycontroller($scope) {
    // controller code here
$scope.firstname = "michelle";
$scope.lastname = "Obama"
}

Angularjs Model Creation

Model is nothing its like plain object in javascript to communicate with controller. But we can’t create model like a variable in javascript, so assistance of scope only we can, please check the below code it will help to understand.

Here we have created two model, first model name is wishes is a string model, and another one is person which is an array object with some values.

function Mycontroller ($scope) {
      // model called ‘greeting’ which is a string
      $scope.wishes = "Hello Good Morning";
 
    var person = [
{name: "michelle", age: 56 },
{name: "Obama", age: 25},
{name: "chikay burg", age: 67} ];

     // model called ‘user’ which is an array of objects
     $scope.persons = persons;
}

Angularjs View along with model and controller

Now the time to put together to generate the view of above code.

<!DOCTYPE html>
<html ng-app>
<head>
<title>Welcome to AngularJS</title>
</head> 
<body>

<div ng-controller="MyCtrl">
<h2>{{wishes}}</h3>
<ul> <li ng-repeat="person in person">{{person.name}} - {{person.age}}</li> </ul> </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</script>
function Mycontroller ($scope) {
$scope.wishes = "Hello Good Morning";
        
var person = [
     {name: "michelle", age: 56 },
     {name: "Obama", age: 25},
     {name: "chikay burg", age: 67} ];
$scope.person = person;
}
</script>
</body>
</html>