繁体   English   中英

用离子写代码的最佳方法是什么

[英]what is the best way to write the code in ionic

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

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

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

我们应该怎么做?

谢谢

您可以将factory用作提供程序来访问任何控制器中的数据。

.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

您应该将$ 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;
    })
}]);

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM