The complete AngularJS tutorial for beginners. We provide an easy way to learn AngularJS in this tutorial.

Thursday, 14 July 2016

AngularJS MVC Concept

with 0 Comment
AngularJS MVC Concept - With Example

Angularjs MVC Architecture:  MVC (model view controller) is widely used software design pattern for developing web based applications. If you already worked with PHP, ASP then this concept will be very familiar to you. If you don’t know about MVC that is not a problem we will explain  you about MVC with examples. In Angularjs MVC it contains three parts those are---

Angularjs MVC concept
Angularjs MVC concept
                                 

Model – How the application behaves with data’s

View – whatever visible to the user.

Controller – This is what the coding would act between model and view.


AngularJS MVC –Model


In angularjs MVC, The model for a controller contains the information to be shown, and in addition, information to be gathered in any information fields or structures. Furthermore, models may contain functions that are conjured in light of client info or different exercises like clicking a catch or rolling out improvements to the model information.

Angularjs MVC concept
Angularjs MVC concept
                                  
The $scope object injected into the controller can be utilized as the model specifically. For the straightforward case over, the accompanying code can be utilized to announce and set a quality on the model.

var indexController = hackApp.controller("indexController", function ($scope) {
// controller logic goes here
$scope.message = "Hello Hacking World"
}
);


AngularJS MVC –  View


A presentation of information in a specific form, activated by the controller's choice to show the information. They are script-based layout frameworks, for example, JSP, ASP, PHP and simple to coordinate with AJAX innovation.

Views are nothing but an HTML page this is used to display content and data to the users through browser. In Angular MVC view use expressions to insert data into view.

Eg: <html tag>{{view data}} </html tag>

AngularJS MVC –  Controller


Controller will act as a link between model and view like the below structure
               “Model <-----------Controller-------------> View “
Both model and view are isolated from each other the controller makes a bridge between these two. The MVC architecture is widely used concept because of isolated model and view in Agularjs.
So the controller receives all the information from the user via a view and passes that to the model.
On model similarly whatever it does with the data from the view it passes that to the controller. the controller may or may not modify the data and give that to the view that is the user. So the controller will react for both view and model.

Angularjs MVS Example:


<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="demo" ng-controller="DemoController">
    Postal Code: <input type=text ng-model="query.postalCode">
    Country: <input type=text ng-model="query.countryCode">
    <button ng-click="performPostcodeLookup()">Lookup</button><br>
    Result: {{lookupResult.displayValue}}
</div>

<script>
var demoModule = angular.module("demo", []);

function DemoController($scope, $http) {
   $scope.query = {
      postalCode: "97845",
      countryCode: "DE"
   };

   $scope.lookupResult = {
      displayValue: "Not yet retrieved"
   };

   $scope.performPostcodeLookup = function () {
      var url = "http://api.geonames.org/postalCodeLookupJSON?" +
         "postalcode=" + $scope.query.postalCode +
         "&country=" + $scope.query.countryCode +
         "&username=henriquatre" +
         "&callback=JSON_CALLBACK";

      $http.jsonp(url).then(function (response) {
         var data = response.data;
         if (data.status) {
            $scope.lookupResult.displayValue = "Error: " + data.status.message;
         } else {
            if (data.postalcodes.length === 0) {
               $scope.lookupResult.displayValue = "No data found";
            } else {
               $scope.lookupResult.displayValue = data.postalcodes[0].placeName;
            }
         }
      }, function (data, status) {
         $scope.lookupResult.displayValue = "HTTP Error - " + status;
      });
   }

}

</script>
</body>
</html>


Just try the above example if you have any doubts just use the comment box below.

You should know:





0 comments:

Post a Comment