Tuesday, August 20, 2013

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

No comments:

Post a Comment