what is the best way to write the code in ionic

Question

I am using ionic framework and here is my code

<ion-side-menus>
    <!-- Center content -->
    <ion-nav-bar class="bar-positive nav-title-slide-ios7 has-tabs-top">
        <ion-nav-buttons side="left">
            <button class="button button-icon icon ion-navicon" ng-click="toggleDrawer()">
            </button>
        </ion-nav-buttons>
    </ion-nav-bar>

    <ion-side-menu-content>
        <ion-view title="Home Page">
            <ion-content>
                hello
            </ion-content>
        </ion-view>
    </ion-side-menu-content>

    <!-- Left menu -->
    **
    <--below is common code in all files --->**

        <drawer side="left">
            <ion-nav-bar class="bar-stable nav-title-slide-ios7 has-tabs-top">
                <ion-nav-buttons side="left">
                    <button class="button button-icon icon ion-navicon" ng-click="toggleDrawer()">
                    </button>
                </ion-nav-buttons>
            </ion-nav-bar>

            <ion-view title="Categories">
                <ion-content>
                    <ion-list>
                        <ion-item data-ng-repeat="category in categories">{{category.category_name}}</ion-item>
                    </ion-list>
                </ion-content>
            </ion-view>
        </drawer>
</ion-side-menus>

the following code is common amongnt all files

<ion-list>
    <ion-item data-ng-repeat="category in categories">{{category.category_name}}</ion-item>
</ion-list>

and controller

.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
    $http({
        url: 'getCateogroies.php',
        method: 'GET',
        withCredentials: true,
    })
    .success((function(data) {
        $scope.categories = data;
    })
    .error(function(data) {
        alert("Login failed");
    })
});

Now problem is that it is sending server request on each page load. I want to send it once since we already have the list.

How can we do this?

Thanks

Answer 1

You can use factory as a provider for accessing the data in any controller.

.factory('shareData', function($http) {
    var data = "undefined";
    return {
        getValueFromServer: function() {
            //your HTTP call
            data = your_response_object;
        },
        displayValue: function() {
            return data;
        }
    }
});

So, in your main controller, you will inject the factory and call getValueFromServer() and fetch the data and store it in a var declared in your factory data . And then fetch the value by calling displayValue() :

.controller('MainCtrl', function($scope, shareData) {
    shareData.getValueFromServer();
    $scope.display_t = shareData.displayValue();
})

And in the rest controllers, you just need to call displayValue() :

.controller('OtherCtrl', function($scope, shareData) {
    $scope.display_again = shareData.displayValue();
})

I have created a Codepen having a factory - http://codepen.io/keval5531/pen/ZGEZMw

Answer 2

You should move the $http out into a Service and inject the Service into the controller.

.service('categoryService', ['$http', function ($http) {
    function getCategories(){
        return $http(/*your request here, withouth the .success, .error*/);
    }

    return{
        getCategories: getCategories
    }
}]);

Then in your controller:

.controller('MainCtrl', ['$scope','categoryService',function ($scope, categoryService) {
    categoryService.getCategories().then(function(success){
        $scope.categories = success.data;
    })
}]);