如何在Laravel中使用AngularJS

 我来答
机涤0Iv
2017-08-03 · 超过54用户采纳过TA的回答
知道答主
回答量:78
采纳率:100%
帮助的人:61.7万
展开全部
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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> -->
<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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式