How web application is developed in AngularJs using MVC Architecture

This blog is part of 1 Tute Sets.

AngularJs Tutorial

Tute set by shristi.shandilya

14 Blogs

11
Dynamic and static data generated using angularjs

by shristi.shandilya
12
Use Angularjs Expression to resolve expressions

by shristi.shandilya
13
How web application is developed in AngularJs using MVC Architecture

by shristi.shandilya
14
How to Implement AngulaJs Form Validation in a Web Application

by shristi.shandilya

prev 1 2 3 next

How web application is developed in AngularJs using MVC Architecture
- 13/14
@shristi.shandilya

Follow Recommendations Offline Message

about 8 years ago
- 1
- 1
  Positive Vote
- 0
  Negative Vote
- 0
  Save Favourite
- 0
- 0
- 1
- 0
- 1.01k
Comment on it
Hii,
This blog is in continuation with my previous blog on AngularJs, In this blog i am going to discuss about the most popular concept (MVC) on the basis of which an AngularJs application is developed.
- MVC stands for Model View Controller used in most of the programming languages other than AngularJs like in Asp.net,JAVA etc.
- MVC is used while developing any web application as it helps a programmer to create a program architecture as per their requirements.
- AngularJS is a JavaScript MVC structured framework which makes use of declarative programming to create any dynamic web applications.
- Using MVC concept one can design and develop a properly architectured, easily maintainable client-sided web-application .
- MVC plays an important role behind making AngularJS one of the most popular scripting language.
- MVC is composed for three words each of them have different meaning and importance.All three are totally dependent and synchronized with each other.
View's responsibility is to render the application data recieved by the Model so it has nothing to do with the logic behind the application data created and the Controller's responsibility is to create all the logics to create an application data and send it to the Model so it has nothing to do with the views that's why it has no knowledge about the views. In between them Model plays an important role of transferring data using $scope from views to controller and vice-versa. Data recieve by controllers is on client-side, all the data collected by controller is send to the back-end servers.

M-MODEL : Model is the last level for design pattern we create while developing web applications but it is the most important part of the architecture as it is the mediator between view and controller helps in transferring data and responding to both of them with updated and maintained application data.

Here is an example in which i have created an AngularJs datamodel to stored application data.
```
var app = angular.module('firstApp', []);
app.controller('firstCtrl', function($scope) {
  $scope.myname = "Ram";
  $scope.age = "12";
});
```
V-View : Use of view is same as the meaning of it.View is nothing but the area where output of the web application data is displayed in different ways.
Any Browsers can be considered as the view of MVC framework because this is the place where output is rendered and allow users to interact or see the application data.
To display the web application data we can either use ng-bind i.e an AngularJs directive or an AngularJs expression.

Here is an example in which i have displayed the web application data using both the ways i.e an AngularJs directive and an AngularJs expression.
```
<p ng-bind="myname"></p>

<p>{{myname}}</p>
```
C-Controller : Controller is the one who creates all the logics, collects and controls all the datas used to create an application in AngularJS and send them to the data model after validating it so that it can be rendered at the View.In MVC framework controller has the responsibility of communicating with the server code and fetch data from a server and vice-versa using Ajax requests.

Here is an example in which i have created an AngularJs Controllers to stored application data.
```
<body>

<div ng-app="firstApp" ng-controller="firstCtrl">
  <p ng-click="change()">{{name}}</p>
</div>

<script>
var app = angular.module('firstApp', []);
app.controller('firstCtrl', function($scope) {
  $scope.name = "RAM";
  $scope.change = function() {
    $scope.name = "Nelly";
  }
});
</script>

</body>
```
Tags
AngularJS MVC Framework for Web Development Blog
- 13/14
Comment on it