3

I am pretty new to Angular and have a bit of experience with Laravel 4. I am building an app where the user can edit "on-the-fly" but also save to a MySQL.

The initial plan was to use Angular to manage the live editing, and to store and retrieve data to the MySQL DB using Eloquent. I am aware you can connect to DB via Angular, but I'd like to know what the best solution would be.

  • Is it best to keep it separated or to use Angular for everything?
  • Is there some performance issues if using Angular for everything?
  • Is Angular as easy to use as Eloquent for DB interactions ?
  • If I use Eloquent for DB, is it straight-forward to pass data to Angular?

I have already started building the live-editing part of the app with Angular and I have to say I found it very easy to learn and extremely powerful. I now have to make a decision as to how I will handle storage.

Thank you

1
  • Can anyone mention the + and - of using one against the other? It seems I can do everything I want using Laravel and jQuery. I'd like to know if there are advantages in using Angular for the business logic and DB interaction? Commented Oct 22, 2013 at 21:04

3 Answers 3

2

Check out this tutorial by the great Dave Mosher, I think it might be exactly what you're looking for, he uses Laravel, Angular, and MySQL:

Youtube Screencast: http://www.youtube.com/watch?v=hqAyiqUs93c

Source code: https://github.com/davemo/end-to-end-with-angularjs

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks will have a look now
2

The best way to use angular.js and laravel is, using a REST API.

For example, if you have an admin panel to manage users, the method will be,

In your route,

Route::resource('users', 'UsersController');

The controller looks like this,

<?php

/**
*
* Users  Controller
* 
*/

class UsersController extends AdminController {

    /**
     * Display all users.
     *
     * @return Response
     */

    public function index() {

        $users = User::where('id', '!=', Auth::user()->id)->get();

        return Response::json(array(
            'status' => 'success',
            'users' => $users->toArray()),
            200
        );

    }


    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */

    public function create() {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @return Response
     */

    public function store() {
        // add some validation also
        $input = Input::all();

        $user = new User;

        if ( $input['name'] ) {
            $user->name = $input['name'];
        }
        if ( $input['username'] ) {
            $user->username = $input['username'];
            $user->password = Hash::make($input['username']);
        }
        if ( $input['email'] ) {
            $user->email = $input['email'];
        }


        $user->save();

        return Response::json(array(
            'status' => 'success',
            'users' => $user->toArray()),
            200
        );
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return Response
     */

    public function show($id) {
        $user = User::where('id', $id)
                    ->take(1)
                    ->get();

        return Response::json(array(
            'error' => false,
            'users' => $user->toArray()),
            200
        );
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return Response
     */

    public function edit($id) {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  int  $id
     * @return Response
     */

    public function update($id) {
        // add some validation also
        $input = Input::all();

        $user = User::find($id);

        if ( $input['name'] ) {
            $user->name = $input['name'];
        }
        if ( $input['username'] ) {
            $user->username = $input['username'];
        }
        if ( $input['email'] ) {
            $user->email = $input['email'];
        }


        $user->save();

        return Response::json(array(
            'status' => 'success',
            'message' => 'User Updated'),
            200
        );
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return Response
     */

    public function destroy($id) {
        $user = User::find($id);

        $user->delete();

        return Response::json(array(
            'status' => 'success',
            'message' => 'User Deleted'),
            200
        );
    }

}

Then the script,

var app = angular.module('myApp', []);
// include this in php page to define root path
app.factory('Data', function(){
    return {
        root_path: "<?php echo Request::root(); ?>/"
    };
});

GET - Get all users

$http({method: 'GET', url: Data.root_path + 'users'}).
success(function(data, status, headers, config) {
    $scope.users = data.users;
}).
error(function(data, status, headers, config) {
    $scope.users = [];
});

GET - Get single user for edit

$http({method: 'GET', url: Data.root_path + 'users/'+id}).
success(function(data, status, headers, config) {
    $scope.entry = data.users[0];
}).
error(function(data, status, headers, config) {
    $scope.entry = [];
});

PUT - Update single user

$http.put(Data.root_path + 'users/'+entry.id, entry).
success(function(data, status, headers, config) {
    //
}).
error(function(data, status, headers, config) {
    //
});

POST - Save new user

$http.post(Data.root_path + 'users', entry).
success(function(data, status, headers, config) {
    //
}).
error(function(data, status, headers, config) {
    //
});

DELETE - Delete a user

$http.delete(Data.root_path +'users/'+id)
.success(function(response) { 
    //
})
.error(function(response) {
    //
});

2 Comments

Do you see any advantage in using Angular over Laravel for business logic in this instance? Do you think it would balance the load between server and client?
I have a great feeling with Laravel 4 + Angular JS which is used for making a custom flexible framework.
0

Create RESTful endpoints to manage resources using Laravel. This is dead simple with the resource controller as already pointed out:

Route::resource('user', 'UsersController');

Then you use an AngularJS resource to interact with that. Example (from docs) of fetching a user, editing the model and then saving (calling via the $ in the callback).

var User = $resource('/user/:userId', {userId:'@id'});
var user = User.get({userId:123}, function() {
  user.abc = true;
  user.$save();
});

http://docs.angularjs.org/api/ngResource.$resource

Even better, create an Angular JS Service for the resource so you can just inject that into multiple controllers and get all the methods defined.

Here's a great post on how to set this up:

http://blog.brunoscopelliti.com/building-a-restful-web-service-with-angularjs-and-php-more-power-with-resource

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.