Majority of javascript developers use AngularJs MVC pattern, because its offers architectural benefits over standard javascript. It decouples the model and view which leads to effortless maintenance in the project.
Model
Model represents the current state of the application data. Model is primarily concerned with business data. Model consistently notifies its observers (e.g views) that a change has occurred so that views reacts accordingly.
For Example: Lets consider there is a model that holds the value for a dropdown list on the page. Once the model is updated it notifies the dropdown to show the new set of values.
View
View is a visual representation of current state of the model. A view consistently observes the model and once the model notifies a change, it reacts accordingly. View is a DOM element which interacts with the users.
Controller
In Angular, controller is a Javascript function which controls the models and views. Controller has two parts i.e state ($scope variable) and behavior ($scope function). Controller is attached to the DOM via the ng-controller directive.
Controller runs only once during the page load. After that a hook is created between View (DOM) and Model ($scope variable/ $scope function). Once the view is updated all the hooked functions for the respective controller are executed. A page can have more than one controller. It can be associated to any DOM element like div,p,input,label.
Sample code for above output
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<body ng-app="employeeApp">
<div ng-controller="pfController">
Please Enter Your Basic Pay : <input ng-model="basicAmount" type="text"/>
<p ng-bind="pf"></p>
<p ng-bind="epf"></p>
<p class="ng-cloak">{{ pfAmount() }}</p>
</div>
</body>
<script>
var employeeApp = angular.module("employeeApp",[]);
employeeApp.controller("pfController",function($scope){
/* scope varibales */
$scope.basicAmount = 0;$scope.pf='';$scope.epf='';
/* scope function - Below function will call when
you trying to change the value in basic Pay textbox */
$scope.pfAmount = function(){
$scope.pf = "PF Amount for Your Basic Pay : "+($scope.basicAmount*12)/100;
$scope.epf = "EPF Amount for Your Basic Pay : "+($scope.basicAmount*12)/100;
return "Above Calculation is 12% of Basic Pay";
};
});
</script>
| Previous Topic : AngularJS Basics Directives |
Thanks for sharing this Information. AngularJS Institute in Gurgaon
ReplyDeleteThis post will be very useful to us....i like your blog and helpful to me..
ReplyDeleteHire AngularJS 2 Development in India
Besides the platforms already mentioned, Java is also used to develop software for Linux, Mac OS X, Solaris, embedded systems and even games consoles. To apply for remote java developer jobs, one must know these. Anyway, thanks for the informative blog. This would be helpful for beginners in Java.
ReplyDeleteWonderful, you have shared really helpful information. Your post covers important points. Being a tech blogger, I know what modern businesses need. You can also look at my page where I discuss the untouched and trending topics in the industry.
ReplyDeleteYou can visit our Services here
PHP development services
PWA Development Company
AngularJs Development Services
One of the recommended blog. Which is very useful to new learners and professionals. Thank your valuable content.
ReplyDeleteHave you checked all the App Ideas? How many app ideas excites you most? Which App Idea would you like to execute in 2022? We are at, The App Ideas offer a great consultation and perfect deal for Mobile Apps. Feel free to reach us.
I want to say thank you for all this valuable information. There are many reasons to consider working with a progressive web app development company. First, they can help you create a progressive web app that is fast, reliable, and engaging. Secondly, they can ensure that your app is available offline and can be used on any device. Finally, they can help you create an app that is safe and secure.
ReplyDelete