我对 Angular 很陌生,对 Laravel 4 有一点经验。我正在构建一个应用程序,用户可以在其中"即时"编辑,也可以保存到 MySQL。
最初的计划是使用Angular来管理实时编辑,并使用Eloquent存储和检索数据到MySQL DB。我知道您可以通过 Angular 连接到数据库,但我想知道最好的解决方案是什么。
- 最好是将其分开还是将所有内容都使用 Angular?
- 如果对所有内容都使用 Angular,是否存在一些性能问题?
- Angular 是否像 Eloquent 一样易于使用数据库交互?
- 如果我对数据库使用 Eloquent 时,将数据传递给 Angular 是否很简单?
我已经开始用 Angular 构建应用程序的实时编辑部分,我不得不说我发现它非常容易学习并且非常强大。我现在必须决定如何处理存储。
谢谢
看看伟大的Dave Mosher的本教程,我认为这可能正是你要找的,他使用Laravel,Angular和MySQL:
优酷截屏视频:http://www.youtube.com/watch?v=hqAyiqUs93c
源代码:https://github.com/davemo/end-to-end-with-angularjs
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(); ?>/"
};
});
获取 - 获取所有用户
$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) {
//
});
开机自检 - 保存新用户
$http.post(Data.root_path + 'users', entry).
success(function(data, status, headers, config) {
//
}).
error(function(data, status, headers, config) {
//
});
删除 - 删除用户
$http.delete(Data.root_path +'users/'+id)
.success(function(response) {
//
})
.error(function(response) {
//
});
创建 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