2015-02-18 20 views
5

Così ho iniziato a lavorare su un proprio progetto, dove mi trovo nel mezzo dello sviluppo del front-end del mio sito web. Ho iniziato con un back-end PHP di Laravel e ho impostato un servizio API per il mio database.Best practice di RestAngular

Con un'app ibrida in mente, ho iniziato a utilizzare angularjs per la mia applicazione web front-end. Per la comunicazione con la mia API che utilizza REST, mi sono imbattuto in Restangular, che è molto carino perché era esattamente quello che speravo.

C'è solo un problema che mi dà fastidio, non esiste una vera "guida" su come configurare un modulo gestibile/fabbrica/fornitore/servizio per replicare l'API con un sistema che memorizza i dati nella memoria locale o sistema semplice di installazione in cui è possibile iniettare il "Modello" in un controller e fare semplicemente Model->getAll() per il recupero di tutti i modelli.

Perché sono nuovo di angularJS, e quindi il mio know-how su come appeach questo, è abbastanza limitato. Finora ho fatto questo:

principale

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

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

}]); 

Quindi, la mia domanda è semplice:

Come posso migliorare questo codice in modo che la sua più efficiente e più manutenibile?

Grazie in anticipo, Nick van der Meij

risposta

11

Prima di tutto non utilizzano logica di servizio sul controller, invece utilizzano i servizi angolari per questo scopo.

Mi permetta di condividere come costruisco i miei progetti,

prima costruire Restangular Servizio:

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; 

}]); 

qui si costruiscono exampleService ora cerchiamo di iniettare in un 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 (example) { 
     $scope.example = example; 
    }); 

}]); 

Ecco come lo uso fondamentalmente. Per un utilizzo più avanzato è possibile guardare gli esempi in Restangular Github Page.

+2

Sto osservando il modello di design di Restangular e ho una domanda riguardante la tua affermazione. "Prima di tutto non utilizzare la logica di servizio sul controller"> Non pensi che Restangular stia in qualche modo fornendo questa logica di servizio, e nel tuo esempio tutto ciò che stai facendo è il proxy/creazione di un altro livello astratto sulla funzionalità Restangular ? – Blowsie

+0

@Blowsie So che questo è vecchio ma sto avendo la stessa domanda e sono diviso tra le alternative. Usare Restangular come sarebbe funzionante ma allo stesso tempo legherebbe tutta la mia app e tutti i controller a Restangular. D'altra parte, la creazione di una factory e il proxy di tutte le chiamate aggiungerebbero un layer (inutile?) Astratto sopra Restangular. È troppo brutto aggiungere questo strato in più per motivi di migliore astrazione? – tomidelucca

+1

@tomidelucca In realtà ho abbandonato il restangular e ho finito con ngResource, con un livello astratto molto leggero per http://pastebin.com/54bp2nQC – Blowsie