如何在Laravel中使用AngularJS

注:本文代码基于Laravel 4,如果你使用的是Laravel 5,请注意相关目录结构及对象方法调整和修改。

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>

学院君

学院君 has written 548 articles

资深PHP工程师,Laravel学院院长