如何在Laravel中使用AngularJS

 我来答

1个回答

#热议# 应届生在签三方时要注意什么？

机涤0Iv
2017-08-03 · 超过54用户采纳过TA的回答

知道答主

回答量：78

采纳率：100%

帮助的人：61万

我也去答题访问个人页

关注

展开全部

app/route.php：
//设置输出原生数据的标签
//相当于Laravel 5中的{!!!!}，对应设置方法为setRawTags
Blade::setContentTags('<%', '%>');

//设置输出经HTML转义数据的标签
//相当于Laravel 5中的{{}}或{{{}}}，对应设置方法为setContentTags或setEscapedContentTags
Blade::setEscapedContentTags('<%%', '%%>');

Route::get('/', function()
{
return View::make('index');
});

Route::group(array('prefix'=>'api/v1'), function() {
Route::resource('users', 'UsersController');
});

app/views/index.blade.php：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Laravel-angularJS</title>

<script type="text/javascript" src="app/js/jquery.min.js"></script>
<script src="app/js/jquery-ui.js" type="text/javascript"></script>
</head>

<body>

<div class="main-container" ng-view></div>

<script src="app/lib/angular/angular.js"></script>
<script src="app/lib/angular/angular-resource.min.js"></script>
<script src="app/js/app.js"></script>
<script src="app/js/services.js"></script>
<script src="app/js/controllers.js"></script>
<script src="app/js/filters.js"></script>
<script src="app/js/directives.js"></script>
<script src="app/js/date.js"></script>
<script src="app/lib/angular/ui_bootstrap.js"></script>
<script src="app/lib/angular/ui-bootstrap-tpls-0.9.0.min.js"></script>
<script src="app/js/underscore.js"></script>
<script>
angular.module("myApp").constant("CSRF_TOKEN", '<?php echo csrf_token(); ?>');
</script>
</body>
</html>

public/app/js/app.js：
'use strict';

var app = angular.module('myApp',
['ngResource','myApp.filters','myApp.services','myApp.directives','myApp.controllers']
);

app.config(function($routeProvider){
$routeProvider.when('/', {
templateUrl: 'app/partials/users/index.html',
controller: 'UserListCtrl'
});
$routeProvider.otherwise({templateUrl:'app/partials/404.html'});
})

public/app/js/controllers.js：
'use strict';

/* Controllers */

var app = angular.module('myApp.controllers', ['ui.date', 'ui.bootstrap']);
app.controller('UserListCtrl', ['$scope', 'UsersFactory', '$location',
function ($scope, UsersFactory, $location) {
$scope.users = null;
UsersFactory.query(function(res){
$scope.users = res;
});
//console.log($scope.users);
}
]);

public/app/js/services.js：
'use strict';

/* Services */
var app = angular.module('myApp.services', []);
app.factory('UsersFactory', function ($resource, CSRF_TOKEN) {
return $resource('/api/v1/users', { 'csrf_token' :CSRF_TOKEN }, {
//query: { method: 'GET', isArray: true },
//create: { method: 'POST' }
})
});

app/controllers/UsersControllers.php：
class UsersController extends BaseController {

/**
* User Repository
*
* @var User
*/
protected $user;

public function __construct(User $user)
{
$this->user = $user;
}

/**
* Display a listing of the resource.
*
* @return Response
*/
public function index()
{
$users = DB::table('users')->get();
return Response::json($users, 200);
}

}

public/app/partials/users/index.html：
<div class="contentWrapper">
<div class="contentInnerWrapper">
<table>
<tr>
<th><div class="gap">Email</div></th>
<th>First Name</th>
<th>last name</th>
<th>Status</th>
<th>Created</th>
</tr>
<tr ng-repeat="data in users">
<td>
<div class="subTitle">{{data.email}}</div>
</td>
<td>{{data.first_name}}</td>
<td>{{data.last_name}}</td>
<td ng-show="data.activated">Activate</td>
<td ng-hide="data.activated">De-activate</td>
<td>{{data.created_at}}</td>
</tr>
</table>
</div>
</div>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何在Laravel中使用AngularJS

其他类似问题

为你推荐：