如何将Laravel变量传递到我的AngularJS视图中


How can I pass a Laravel variable into my AngularJS view?

我正在构建一个小型照片应用程序来学习AngularJS 1.3。我有PHP背景,所以从概念上讲,这对我来说相当不同:)

我想将一个变量(照片文件夹的URL)传递到我的AngularJS视图(一个.html文件)中。我该怎么做?

换句话说,将应用程序常量从PHP传递到AngularJS ngRoute视图的最佳实践是什么

这是代码:

Laravel控制器方法

public function showHome()
{
    $upload_url = Config::get('app.url');
    return View::make('home')->with('upload_url', $upload_url."photos/");
}

刀片模板

$upload_url是我想在AngularJS视图(index.html)中使用的变量。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
        <title>Test Application</title>
    </head>
    <body ng-app="app" ng-controller="mainController">
        <div class="container">
            <p>The location of the photo files is:</p>
            <p>{{ $upload_url }}</p>
            <ng-view></ng-view>
        </div>
        {{ HTML::script('assets/js/jquery-2.1.1.min.js') }}
        {{ HTML::script('https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js') }}
        {{ HTML::script('http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js') }}
        {{ HTML::script('app/controllers/mainController.js') }}
        {{ HTML::script('app/services/photoService.js') }}
        {{ HTML::script('app/app.js') }}
    </body>
</html>

应用程序.js

var constantsHelper = {};
var app = angular.module('app', ['ngRoute', 'mainController', 'photoService']);
app.config(function($routeProvider){
    $routeProvider.when("/",
        {
            templateUrl: "app/views/home.html",
            controller: "mainController"
        }
    );
});

主控制器(mainController.js)

angular.module('mainController', [])
.controller('mainController', function($scope, $http, Photo) {
    Photo.get()
        .success(function(data) {
            $scope.photos = data;
        });
});

照片服务(photoService.js)

angular.module('photoService', [])
.factory('Photo', function($http) {
    return {
        // Get all the photos
        get : function() {
            return $http.get('/api/photos');
        }
    }
});

最后是我的Angular视图(home.html)

我想在photo.filename前面加上我的刀片模板中的$upload_url值(它来自我的Laravel控制器的showHome()方法)。

<div class="photo" ng-repeat="photo in photos">
   <div class='row'>
       <div class='col-md-10 col-md-offset-1'>
           <div class='loaded-image mb25'>
               <img src='{{ photo.filename }}'>
               <p>{{ photo.description }}</p>
           </div>
       </div>
   </div>
</div>

谢谢!任何能让我走上正确道路的指针都会受到赞赏:)

编辑:

我有它的工作,但不知道这是否是最好的做法!

我已经把这个添加到我的刀片模板的底部:

<script>
    constants = {};
    constants.upload_url = {{ $upload_url }}}";
</script>

并用$scope对主控制器进行了修改,使其能够传递常量。

angular.module('mainController', [])
.controller('mainController', function($scope, $http, Photo) {
    Photo.get()
        .success(function(data) {
            $scope.photos    = data;
            $scope.constants = constants;
            console.log(constants);
        });
});

然后我可以简单地使用{{ constants.upload_url }}访问index.html中的上传URL。

所以。。。它起作用了,但我不知道这是否有问题;)

如有任何意见,我们将不胜感激!

我想知道这是否是最佳实践。但是如果值不需要是安全的,那么从服务器传递常量值的最简单方法之一就是这样。

在html中。

<script type="text/javascript">
    var _config = {
        key1: server_value1,
        key2: server_value2
    };
</script>

在角度模块运行方法中。

angular.module('yourapp', [])
    .run(function($rootScope) {
        $rootScope.config = _config;
    });

在您的控制器中。

console.log($scope.config);

您是否设法将Angular和Blade语法按顺序排列?在我的案例中,我改变了Laravel用于回显变量和评估表达式的方法在routes.php:

Blade::setContentTags('[[', ']]');        // for variables and all things Blade
Blade::setEscapedContentTags(',.', '.,');   // for escaped data

我不确定一个好的做法是什么,但有时我会这样设置一些ng-init指令:

刀片模板

<div ng-controller="mainController" ng-init="constants={upload_url:'[[$upload_url]]'}">
  ...
</div>

查看

我以这种方式获得渲染视图的方式:

<div ng-controller="mainController" ng-init="constants={upload_url:'some_url_string'}">
 ...
</div>

然后你可以从控制器上访问它,并以这种方式将其用于ng-Route

$scope.constants.upload_url