Model View Controller (MVC):-
AngularJS framework में Model-View-Controller (MVC) architecture का उपयोग किया जाता है।
MVC एक common web development pattern है जो लगभग सभी web applications में पाया जाता है।
MVC Architecture कैसे काम करता है? 1. Model (M) – डेटा को Represent करता है
Model application के data को store और manage करता है।
Example:
Shopping Cart application में Model products की जानकारी store कर सकता है।
हर product की जानकारी जैसे:
- ID
- Name
- Price
- Inventory (Stock)
Database में stored रहती है।
2. View (V) – Presentation Layer
View application का वह भाग होता है जिसे user देखता और use करता है।
जब आप किसी web page को open करते हैं, तब आप वास्तव में उसके View के साथ interaction कर रहे होते हैं।
Example:
- Buttons
- Text
- Images
- Forms
- Product List
ये सभी View का हिस्सा होते हैं।
3. Controller (C) – Business Logic Layer
Controller application की logic को handle करता है।
जब user View में कोई action करता है, जैसे:
- Button click
- Form submit
- Product add
तो Controller उस action को process करता है।
Controller background में Model को update करता है।
Example:-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- ==================== VIEW (V) ==================== -->
<div ng-app="myApp" ng-controller="myCtrl">
<h3>नमस्ते {{name}}!</h3>
</div>
<!-- ==================== VIEW END ==================== -->
<script>
/* ==================== CONTROLLER (C) ==================== */
angular.module("myApp", [])
.controller("myCtrl", function($scope) {
/* ==================== MODEL (M) ==================== */
$scope.name = "राहुल";
/* ==================== MODEL END ==================== */
/* Controller में functions भी बना सकते हैं
Example:
$scope.changeName = function() {
$scope.name = "Aman";
}
*/
});
/* ==================== CONTROLLER END ==================== */
</script>
</body>
</html>