0

I am just getting started with Angular, and do not have a programming background (I'm a designer, uh-oh). I'm mixing together two PhoneGap starter projects, picking apart their code to fit my idea. I'm trying to reverse-engineer a very simple master-detail app that uses some JSON, and change this so it fetches the data via AJAX. Eventually I would like to store the data in the app once intially fetched, and get it to update any new data from the AJAX source.

At the moment the app has:

module.factory('$data', function() {
    var data = {};
    data.items = [
        {
            title: 'A bunch of data',

..etc..

Outside of this (in fact before it), I have written my AJAX call:

module.controller('AppController', ['$scope','$http', function($scope,$http) {
    $http({
        method: 'GET',
        url: 'http://www.my-web-adddress.net/api/blah'
    }).then(function successCallback(response) {
        var results = response["data"];
        for( var i = 0, len = results.length; i < len; i++ ){...

..Where I can then manipulate the data. However I am unsure about passing the data between these two functions, or whether I am best trying to write a single function. If it should be a single function, I am struggling with the factory vs service vs controller conventions, scope, injection, etc, so if someone could give me a quick example about how they would structure it that would be amazing.

byzantine cucumber
  • 531
  • 1
  • 5
  • 12
  • 1
    I would recommend using localstorage for phonegap application. so the data will be available even if the user is offline and once user becomes online u can update the localstorage again – Arif Jan 02 '16 at 12:57
  • OK yes, I thought I'd get the basics of how to correctly fetch and manipulate the data for use as the source of the master-detail view, before moving on to storage (as I am inexperienced with both aspects). If you had time to do a simple demo of using localstorage alongside fetched data that would be much appreciated. – byzantine cucumber Jan 02 '16 at 16:12

1 Answers1

1

As a rule of thumb, it is good practice to place all CRUD operations (Create, Read, Update and Delete) in a separate factory/service. This allows for easier testing and re-usability.

module.factory('MyDataFactory', ['$http',
  {
    return {
      getData: function(){
        return $http.get('http://www.my-web-adddress.net/api/blah')
      }

      // My other CRUD operations

    };
  }]);

This is returned as a promise which can now be called from you controller:

module.controller('AppController', ['$scope','MyDataFactory',
  function($scope, MyDataFactory) {
    MyDataFactory.getData().then(function successCallback(response){
      var results = response["data"];
    },  
    function errorCallback(response){
      console.log(response);
    }
}])

You might also want to look into caching, which is really easy using $http.
When it comes to the whole factory vs service vs ... this thread is a good read

Note that the above code has not been tested, it should provide you with an outline.

Community
  • 1
  • 1
sjokkogutten
  • 2,005
  • 2
  • 21
  • 24