Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Thread Contributor: Ravishankar ChavarePart 3-MVC in AngularJS
#1
In this Tutorial I am defining Model view Controller in single html file for better understanding
for defining model and controller in another javascript file read tutorial Here.


AngularJS support MVC Architecture

[Image: QAmBGWZ.png]

MVC : Model View Controller

-Model contains the data and logic,
-View contains the visual layout and presentation,
-Controller connects the two.

mvc is loosely couple and we can reuse the structure of the pattern


1.Model:

-Model contains the data and logic.
-Binding the view into the model.
-In AngularJS, model consists of all primitive data type such as integer, string and Boolean and complex type in form of object.
-Model is just a plain JavaScript object. But you can build your model from any database like SQL Server or MySQL or from JSON file.

Syntax and Example:
Code:
<script>
$scope.person={
'name':'ravi'
'mobile':'7507500084'
}
</script>


2.View:

-This directive creates new scope.
-View is the DOM element which is used to present or display the data.
-To display data the in the AngularJs Expressions is used,AngularJs support two-way data binding

Two-way data bind:

-Any changes to the view are immediately reflected in the model.
-Any changes in the model are propagated to the view.
-So it also called as MVC architecture.

[Image: Two_Way_Data_Binding.png]


Syntax and Example:
Code:
<script>
{{person.name}}
{{person.mobile}}
</script>


3.Controller:

-Model is lives inside in the Controller
-Controllers in AngularJS allow you to create an isolated scope and “control” data before it is passed to the view.
-In AngularJS, controller provide great control over view and model in order to fetch the data as per request and display in the view.
-Controller is a coordinator between the view and the model

Syntax and Example:


Code:
<script>
function Contact($scope){  //here Contact is your function name  
}
</script>



How to create Controller,Model,Initialize the AngularJS app

First initialize angular js module
Code:
var app = angular.module('applicationname', []);


Add app to controller
Code:
app.controller('controllername',function($scope){
});



Add model to function of controller
Code:
app.controller('controllername',function($scope){
//Model of controller
$scope.person={
'name':'ravi'
mobile':'123456789'
}
});



Full Code of AngularJS Model View Controller

Code:
    <!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>mvc</title>
<script src="../angular.min.js"></script>
<script type="text/javascript">
    var app=angular.module("myApp",[]);
    app.controller("myController",function($scope){
        $scope.person={
            'name':'ravi',
            'mobile':'123456789'
        }
    });
</script>
</head>
<body>
<p>Show Model data in View through Controller</p>
<div ng-controller="myController">
    Name:{{person.name}}
    <br>
    Mobileno:{{person.mobile}}
</div>
</body>
</html>
if any issue replay here 

Part 4- MVC AngularJS controller defined in another file
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)