Bresleveloper's AngularJS Tutorial : Controller with Ajax

http://bresleveloper.blogspot.co.il/2013/08/breslevelopers-angularjs-tutorial-table.html
SPOILER : if u just want the final version goto the end of this post

to create the most basic controller with ajax we can just do something like that:
(code is in _01_simpleCtrlAjax.html)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style>
    .main { width: 400px; }
    .singleItem { width: 25%; display:inline-block; border: 2px dashed green; }
    .textContainer { text-align: center; }
  </style>
  <script src="angular.js"></script>
  <script >
    var myStudyModule = angular.module('myStudyModule', []);

    var myController = function ($scope, $http) {
       console.log("myController");
       $scope.MainCatalog = [];

       var getMyData = function (parentKey, level) {
          console.log("getMyData");
          var url = 'Handler1.ashx';
          if (parentKey && level)
             url += '?parentKey=' + parentKey + '&level=' + level;
          $http.get(url).success(function (data) {
             console.log("$http.get.success");
             $scope.MainCatalog = data;
          });
       };
      
       getMyData();

       $scope.MainItemClick = function (catalogItem) {
          console.log("$scope.MainItemClick");
          getMyData(catalogItem.key, catalogItem.level + 1);
       };
    };
          
    myStudyModule.controller(myController);
  </script>
</head>
<body>
   <div class="main" ng-app="myStudyModule" ng-controller="myController">
      <div class="singleItem" ng-repeat="catalogItem in MainCatalog" ng-click="MainItemClick(catalogItem)" >
         <a class="box" href="#" >
            <img ng-src="{{ catalogItem.image }}" width="100">
            <div class="textContainer" >
               <h4>{{ catalogItem.level }} - {{ catalogItem.name }}</h4>
            </div>
         </a>
      </div>
   </div>
</body>
</html>

but this is still MVVM, we want it to be a bit more MVC, so we would like to make a service:
(code is in _02_simpleCtrlServiceAjax.html)

var myStudyModule = angular.module('myStudyModule', []);

myStudyModule.service('myService', function ($http) {
   console.log("myService");
   var self = this;

   self.getData = function (parentKey, level) {
      console.log("myService.getMyData");
      var url = 'Handler1.ashx';
      if (parentKey && level)
         url += '?parentKey=' + parentKey + '&level=' + level;
      $http.get(url).success(function (data) {
         console.log("$http.get.success");
         return data;
      });
   };
  
   self.getDataPromise = function (parentKey, level) {
      console.log("myService.getDataPromise");
      var url = 'Handler1.ashx';
      if (parentKey && level)
         url += '?parentKey=' + parentKey + '&level=' + level;
      return $http.get(url);
   };
});

 var myController = function ($scope, myService) {
   console.log("myController");
   $scope.MainCatalog = [];
  
   var getMyData = function (parentKey, level) {
      console.log("myController.getMyData");
      //this is not working cuz it w8ts to the respose
      //$scope.MainCatalog = myService.getData(parentKey, level);
      myService.getDataPromise(parentKey, level).success(function (data) {
         $scope.MainCatalog = data;
      });
   };

   getMyData();  
   $scope.MainItemClick = function (catalogItem) {
      console.log("$scope.MainItemClick");
      getMyData(catalogItem.key, catalogItem.level + 1);
   };
};

myStudyModule.controller(myController); 

this is almost right, but we still need to ask a few Qs:
1 - what if there is a problem with my promise?
2 - the controller creates a copy of the data, isn't that bad?
3 - and if I want to use that service with multiple controllers, and 1 updates, should I keep broadcasting the rest ?

here is a broadcast example (which u shouldn't use in that kind of cases):

var myStudyModule = angular.module('myStudyModule', []);

myStudyModule.service('myService', function ($http, $rootScope) {
   console.log("myService");
   var self = this;
   self.catalog = [];

   /*
   // u can do this like that
   self.getData = function (parentKey, level) {
      console.log("myService.getMyData");
      var url = 'Handler1.ashx';
      if (parentKey && level)
         url += '?parentKey=' + parentKey + '&level=' + level;
      $http.get(url).success(function (data) {
         console.log("$http.get.success");
         self.catalog = data;
         $rootScope.$broadcast('DataUpdated');
      });
   };
   */

   self.getData = function (parentKey, level) {
      console.log("myService.getMyData");
      var url = 'Handler1.ashx';
      if (parentKey && level)
         url += '?parentKey=' + parentKey + '&level=' + level;
      $http.get(url).success(function (data) {
         console.log("$http.get.success");
         $rootScope.$broadcast('DataUpdated', { catalog: data });
      });
   };
           
   self.getData();
});

var myController = function ($scope, myService) {
   console.log("myController");
   $scope.MainCatalog = [];
             
   $scope.MainItemClick = function (catalogItem) {
      console.log("$scope.MainItemClick");
      myService.getData(catalogItem.key, catalogItem.level + 1);
   };
   /*
   // belongs to the u can do this like that part above
   $scope.$on('DataUpdated', function () {
      console.log("on DataUpdated");
      $scope.MainCatalog = myService.catalog;
   });
   */

   $scope.$on('DataUpdated', function (event, data) {
      console.log("on DataUpdated");
      $scope.MainCatalog = data.catalog;
   });
};

myStudyModule.controller(myController); 

well to solve all that you can reference the service from the scope like that (as u can see even the code gets shorter:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <style>
      .main { width: 400px; }
      .singleItem { width: 25%; display:inline-block; border: 2px dashed green; }
      .textContainer { text-align: center; }
   </style>
<script src="angular.js"></script>
<script >
   var myStudyModule = angular.module('myStudyModule', []);

   myStudyModule.service('myService', function ($http) {
      console.log("myService");
      var self = this;
      self.catalog = [];

      self.getData = function (parentKey, level) {
         console.log("myService.getMyData");
         var url = 'Handler1.ashx';
         if (parentKey && level)
            url += '?parentKey=' + parentKey + '&level=' + level;
         $http.get(url).success(function (data) {
            console.log("$http.get.success");
            self.catalog = data;
         });
      };

      self.getData();
   });
   var myController = function ($scope, myService) {
      console.log("myController");
      $scope.myService = myService;
             
      $scope.MainItemClick = function (catalogItem) {
         console.log("$scope.MainItemClick");
         myService.getData(catalogItem.key, catalogItem.level + 1);
      };
   };
  
   myStudyModule.controller(myController);

 </script>
</head>
<body>
   <div class="main" ng-app="myStudyModule" ng-controller="myController">
      <div class="singleItem" ng-repeat="catalogItem in myService.catalog" ng-click="MainItemClick(catalogItem)" >
         <a class="box" href="#" >
            <img ng-src="{{ catalogItem.image }}" width="100">
            <div class="textContainer" >
               <h4>{{ catalogItem.level }} - {{ catalogItem.name }}</h4>
            </div>
         </a>
      </div>
   </div>
</body>
</html>

Next : http://bresleveloper.blogspot.co.il/2013/08/breslevelopers-angularjs-tutorial-basic.html

Comments

Post a Comment

Popular posts from this blog

OverTheWire[.com] Natas Walkthrough - JUST HINT, NO SPOILERS

game portal: http://overthewire.org/wargames/natas/ PASSWORDS for each level are stored in /etc/natas_webpass/natasX I made this walkthrough for people like me, i needed some help, but didnt want the spoiler, so here i will give you all the information needed to pass each level, yet not the solution. For levels needed custom web request i made a different post for powershell and javascript  with how-to's, since is a piece of learning for itself, and also for those of us that play at work and have only powershell at their hands. Although its not a complete spoiler there, its quite most of the solution so try yourself 1st. Natas The Natas game is from basic to advances web hacking. Every few levels is about whole new exploitation (with some harder ones doing comeback later), so a lot of learning. If you're new, you're the reason i am writing so much even for the 1st level, just please google EVERY topic you see, since in the following levels i assume you know the
Read more

SOLVED The item could not be indexed successfully because the item failed in the indexing subsystem

if you got an error like this The item could not be indexed successfully because the item failed in the indexing subsystem. ( The item could not be indexed successfully because the item failed in the indexing subsystem.; Failed to recover content group; Aborting insert of item in Link Database because it was not inserted to the Search Index.; ; SearchID = 04081656-B51B-4DCD-96D4-6DB2D2CEEEE7 ) as well as these: The item could not be indexed successfully because the item failed in the indexing subsystem. ( The item could not be indexed successfully because the item failed in the indexing subsystem.; Caught exception when preparing generation GID[7]: (Previous generation (last=GID[6], curr=GID[7]) is still active. Cannot open GID[7]); Aborting insert of item in Link Database because it was not inserted to the Search Index.; ; SearchID = 92EB0180-C086-4853-BED8-F4878D9748AD ) the solution for me was to clear configuration cache (PS)  and then restart SP Search Services. THX to m
Read more

Asp.Net Ending Response options, Response.End() vs CompleteRequest()

this blog is for any1 who get the ThreadAbortException when caling Response.End(), and then tried the other options such as HttpContext.Current.ApplicationInstance.CompleteRequest() and found out that there was no replacement. i'll start with the bottom line: if you want to stop right now your response and send it as is you dont have any other option other than Response.End(), period and it's the right thing to throw that EX in that case. the answer is its because there is the "HTTP pipeline" and the "Asp.Net pipeline", and CompleteRequest() cuts the HTTP pipeline but not the Asp.Net one so everything that is from handlers forwars (including all page events) continues but your part, the asp one, stays in your hands so that no information will be lost, so ur suppose to manage your code currectly, since information lost is really a bad thing, although in most cases we use Response.End() we know what we are losing and we want it. see this short article ab
Read more