Angular、Laravel 4 和 MySQL 数据库最佳实践

Question

我对 Angular 很陌生，并且对 Laravel 4 有一些经验。 我正在构建一个应用程序，用户可以在其中“即时”编辑，但也可以保存到 MySQL。

最初的计划是使用 Angular 来管理实时编辑，并使用 Eloquent 将数据存储和检索到 MySQL DB。我知道您可以通过 Angular 连接到 DB，但我想知道最好的解决方案是什么。

• 最好是分开还是使用 Angular？
• 如果对所有事情都使用 Angular，会不会出现一些性能问题？
• Angular 是否像 Eloquent 一样易于用于 DB 交互？
• 如果我使用 Eloquent for DB，是否可以直接将数据传递给 Angular？

我已经开始使用 Angular 构建应用程序的实时编辑部分，我不得不说我发现它非常容易学习并且非常强大。我现在必须决定如何处理存储。

谢谢

Answer 1

查看伟大的 Dave Mosher 的本教程，我认为它可能正是您正在寻找的，他使用 Laravel、Angular 和 MySQL：

Youtube 截屏：http://www.youtube.com/watch?v=hqAyiqUs93c

源码：https://github.com/davemo/end-to-end-with-angularjs

Answer 2

使用 angular.js 和 laravel 的最佳方式是使用 REST API。

例如，如果您有一个管理面板来管理用户，那么方法将是，

在你的路线中，

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

控制器长这样，

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

}

然后是脚本，

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 - 获取所有用户

$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 - 获取单个用户进行编辑

$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 - 更新单个用户

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

POST - 保存新用户

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

DELETE - 删除用户

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

Answer 3

创建 RESTful 端点以使用 Laravel 管理资源。正如已经指出的，这对于资源控制器来说非常简单：

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

然后您使用 AngularJS 资源与之交互。获取用户、编辑模型然后保存（通过回调中的 $ 调用）的示例（来自文档）。

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

更好的是，为资源创建一个 Angular JS 服务，这样您就可以将其注入多个控制器并获取所有定义的方法。

这是一篇关于如何设置的精彩帖子：

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