用 ionic 编写代码的最佳方法是什么

Question

我正在使用离子框架，这是我的代码

<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>

以下代码在所有文件中通用

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

和控制器

.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");
    })
});

现在的问题是它在每次加载页面时发送服务器请求。我想发送一次，因为我们已经有了列表。

我们该怎么做？

谢谢

Answer 1

您可以使用 factory 作为 provider 访问任何控制器中的数据。

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

因此，在您的主控制器中，您将注入工厂并调用 getValueFromServer() 并获取数据并将其存储在工厂 data 中声明的 var 中。然后通过调用 displayValue():

获取值

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

而在其余控制器中，您只需调用 displayValue():

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

我创建了一个带有工厂的 Codepen - http://codepen.io/keval5531/pen/ZGEZMw

Answer 2

您应该将 $http 移出到一个服务中，并将该服务注入到控制器中。

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

    return{
        getCategories: getCategories
    }
}]);

然后在你的控制器中：

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

用 ionic 编写代码的最佳方法是什么

what is the best way to write the code in ionic

android

angularjs

ionic-framework