Best practice of RestAngular

Issue

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.

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.

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.

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

main application

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

}]);

So, my question is simple:

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

Thanks in advance,
Nick van der Meij

Solution

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

Let me share you how I build my projects,

First build Restangular Service :

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;

}]);

here we build exampleService now let’s 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 (example) {
        $scope.example = example;
    });

}]);

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

Answered By – Poyraz Yilmaz

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.