Simple workflow with angularJs and laravel 4

Question

I start with say that i'm really new with angularJs and i felt it really useful on big environment of web application.

After some research and documentations i got in some questions that in first it has confused me on how to implement it to server side languages (in my case PHP with laravel 4.1 on the base) because angularJs has routes and templating etc... so it's a properly framework that can work even stand alone.

Let's dig better on where i want arrive to understand the workflow with this 2 framework.

---

1st- Questions

How i saw on some resources with angularJs is pretty easy show up the results in json and binding with the dom. I even saw some developers print out the results with angularJs on the first load of the dom instead use a single function on the laravel controller and handle the results with laravel.

I think it's not properly useful in terms of compatibility because angular is working IE 8 and after and if i disable javascript same i dont't see the results. Instead if i use laravel 4 how first handler the first results i'll see it always! This is an example that i saw.

Route Laravel

// set 2 types of route, the first for get the json results for do handle to Angular
// the second route for display the view
Route::get('users','UserController@getUsers');
Route::get('/','UserController@getIndex);

UserController Laravel

public function getUsers() {

$users = User::all();
return $users; // return all users in json

}

public function getIndex() {

   return View:make('index');

}

AngularJs

module.controller('UserCtrl', function($scope,$http) {

   users: function() {
         return $http.get('/users').then(function(result){
                    return result.data;
                });
   };

});

On the View

<div ng-repeat="users in user">{{ user }} </div>

Hey! if my page have 20 queries of results i don't wanna do 20 routes and angular functions. It's right what i said? But if they do like so should be some reason.

---

2nd - Question

How i said before i'm using angularjs with laravel 4.1 there is any possibility that i'll use the routes of angularJs? On my opinion is No. Because i handle my route with laravel 4.

---

3rd - Quenstion

Best way to show up results after a call ajax and bind it to my template. Maybe this question can totally go against to my first question, because if i setup my application with that logic i have all ready for the future call ajax, without rewrite partial template of my results.

Let's say that i want paginate the previous results so i'll go to do a call ajax for show the next or previous results. If i follow the logic that i saw (first example) the only thing i have to do is push the new results on the previous object json.

instead if i use laravel how first handler of my results (normal return view and foreach), after the call ajax i have to create single template for show up the results with the same style and append the results. How you show up the results and which is the best method to do it?

---

Answer 1

First of all AngularJs handle frontend routing itself. Your laravel service should be used only as RESTful api (as carlosdubusm mentioned).

If you don't want to make 20 calls you can always make angular service that will handle one call to get all the data you need, parse it and provide to controllers, directives, etc.

Angular is working asynchronously so if you wrap your code with promise it will handle data change by itself.

I hope this is what you wanted to know.

//EDIT:

promise example

$scope.user = {
        name    : '',
        email   : ''
    };

$scope.updateUserInfo = function (response) {
        $scope.user = response;
    };

// users model have rest calls to api using restangular
usersModel.getMyInfo()
.then($scope.updateUserInfo);

service sample

'use strict';
app.factory('alertService', function ($timeout){
    return new AlertService($timeout);
});

var AlertService = function($timeout) {
    this.queue = [];
    this.alerts = [];

    var AlertService = this;

    this.TYPE_INFO = 0;
    this.TYPE_SUCCESS = 1;
    this.TYPE_ALERT = 2;
    this.TYPE_ERROR = 3;

    this.add = function (msg, type) {
        var alert = new AlertItem(msg, type);
        AlertService.queue.push(alert);
        AlertService.alerts.push(alert);

        $timeout(function (){
            AlertService.closeAlert(alert);
        }, 10000);
    };

    this.closeAlert = function (alert) {
        return AlertService.queue.splice(AlertService.queue.indexOf(alert),1);
    };

    this.getAlerts = function (){
        return AlertService.queue;
    };

    this.getAll = function () {
        return this.alerts;
    };

};

var AlertItem = function(msg, type) {

    var TYPE_CLASS = {
        0: "alert-info",
        1: "alert-success",
        2: "",
        3: "alert-error"
    };

    var type = type;
    var msg = msg;

    this.getType = function() {
        return type;
    };

    this.getClass = function () {
        return TYPE_CLASS[type];
    };

    this.getMsg = function () {
        return msg;
    };

};