RestAngular的最佳实践 [英] Best practice of RestAngular

查看:134
本文介绍了RestAngular的最佳实践的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

于是我开始在一个自己的项目,在那里我发展我的网站的前端的中间是工作。我开始了一个PHP Laravel后端,我已经设置好的了一个API服务,为我的数据库。

So I've started to work on an own project, where I'm in the middle of developing the front-end of my website. I started out with an PHP Laravel back-end and I've setted up an API service for my database.

考虑到混合的应用程序,我开始使用我的前端Web应用程序angularjs。有关使用REST API我沟通,我已经跨越restangular来了,这是pretty很好,因为它正是我所希望的。

With a hybrid app in mind, i started using angularjs for my front-end web application. For the communication with my API using REST, I've came across restangular, which is pretty nice because it was exactly what I hoped for.

有只有一个困扰我的问题,有没有真正的导游设置如何在维护模块/工厂/供应商/服务与存储在本地存储或设置简单的系统,其中数据的系统复制您的API你可以注入模型到一个控制器和刚做型号 - 方式> GETALL()来获取所有型号

There is only one issue that bothers me, there is no real "guide" how to setup a maintainable module/factory/provider/service to replicate your api with a system that stores the data in local storage or setup simple system where you could inject the "Model" into an controller and just do Model->getAll() to fetching all models.

由于我是新来angularJS,并为此我如何appeach这个通往知识,是相当有限的。到目前为止,我做了这样的:

Because I'm new to angularJS, and therefor my knowedge on how to appeach this, is fairly limited. So far I've made this:

主要应用

var client = angular.module('clientApp', ['angulartics', 'angulartics.google.analytics', 'ngRoute', 'restangular']);

client.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/', {
            controller: 'flongsController',
            templateUrl: '/client_partials/Homepage.html'
        })
        .when('/flongs/:slug', {
            controller: 'flongsController',
            templateUrl: 'client_partials/Flong.html'
        })
        .otherwise({
            redirectTo: '/'
        });
}]);

flongsController

flongsController

client.controller('flongsController', ['$scope', 'Restangular', '$routeParams', function ($scope, Restangular, $routeParams) {
    //controller variables
    var baseFlongs = Restangular.all('flongs');

    $scope.flongs = {};

    init();

    function init() {
        baseFlongs.getList().then(function(flongs){
            $scope.flongs = flongs;
        });
    }

}]);

所以,我的问题很简单:

So, my question is simple:

我怎样才能改善这种code,使其更高效,更易于维护的?

How can i improve this code so that its more efficient and more maintainable?

在此先感谢,
尼克·范德Meij

Thanks in advance, Nick van der Meij

推荐答案

首先不要在控制器使用的业务逻辑,而不是用于此目的使用角度的服务。

First of all do not use service logic on controller, instead use angular services for this purpose.

让我分享你我是如何建立我的项目,

Let me share you how I build my projects,

先建 Restangular服务

angular.module('example').factory('exampleService', ['Restangular', function(Restangular){

    // this is service object with list of methods in it
    // this object will be used by controller
    var service = {
        getExamples: getExamples,
        getExample: getExample
    };

    // get examples from server by using Restangular
    function getExamples(){
        return Restangular.all('examples').getList();
    }

    // get example with given id from server by using Restangular
    function getExample(exampleId){
        return Restangular.one('examples', exampleId).get();
    }

    return service;

}]);

在这里,我们打造的 exampleService 现在允许它注入到控制器

here we build exampleService now lets inject it into a controller

angular.controller('ExampleCtrl', ['exampleService', function(exampleService){

    // get examples by using exampleService
    exampleService.getExamples().then(function (examples) {
        $scope.examples = examples;
    });

    // get example with given id by using exampleService
    exampleService.getExample('1234').then(function (examples) {
        $scope.example = example;
    });

}]);

这是我如何使用它基本上是这样。对于更高级的用法你可以看看的例子 Restangular Github上页

This is how I use it basically. For more advance usage you can look the examples in Restangular Github Page.

这篇关于RestAngular的最佳实践的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆