我如何传递一个Laravel可变进我AngularJS看法？ [英] How can I pass a Laravel variable into my AngularJS view?
问题描述
我建立一个小的照片应用学习AngularJS 1.3。我来自一个PHP的背景，使概念，这是对我来说相当不同：）
I am building a small photo application to learn AngularJS 1.3. I come from a PHP background so conceptually this is rather different for me :)
我想一个变量（我的照片文件夹的URL）传递到我的AngularJS视图（.html文件）。我怎样才能做到这一点？
I'd like to pass a variable (the URL of my photos folder) into my AngularJS view (an .html file). How can I do this?
换句话说，什么是用于传递应用程序常量从PHP到AngularJS ngRoute意见的最佳做法？
这里的code：
public function showHome()
{
$upload_url = Config::get('app.url');
return View::make('home')->with('upload_url', $upload_url."photos/");
}
刀片模板
$ UPLOAD_URL 是可变的，我想在我的AngularJS视图中使用（ index.html的）
Blade Template
$upload_url is the variable I would like to use in my AngularJS view (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>
App.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');
}
}
});
...最后我的角度视图（home.html做为）
我想preFIX photo.filename 从我的刀模板中的 $ UPLOAD_URL 价值（这是从我的Laravel控制器的 showHome（）法）。
...and finally my Angular view (home.html)
I'd like to prefix photo.filename with the $upload_url value from my blade template (which comes from the showHome() method of my Laravel controller).
<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>
谢谢！可以把我在正确的道路上的任何指针AP preciated：）
Thanks! Any pointers that can put me on the right path are appreciated :)
我有工作，但不知道这是否是最好的做法！
I have it working, but no idea if this is the best practice!
我添加这到我的刀模板的底部：
I've added this to the bottom of my blade template:
<script>
constants = {};
constants.upload_url = {{ $upload_url }}}";
</script>
和修改主控制器采用传递常量 $范围。
And modified the main controller to pass the constants using $scope.
angular.module('mainController', [])
.controller('mainController', function($scope, $http, Photo) {
Photo.get()
.success(function(data) {
$scope.photos = data;
$scope.constants = constants;
console.log(constants);
});
});
然后我就可以访问上传的URL的index.html 简单地 {{} constants.upload_url} 。
所以... ...它的工作原理，但我没有这方面的想法是哈克与否;）
So... it works but I have no idea of this is hacky or not ;)
任何投入将是AP preciated！
Any input would be appreciated!
推荐答案
我不知道这是否是最好的做法还是不行。但是如果该值并不需要是安全后，最简单的方法来从服务器传递常量一个是这样的。
I wonder whether this would be the best practice or not. However If the value doesn't need to be secure, one of the most simple way to pass constant values from server is something like this.
在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);
这篇关于我如何传递一个Laravel可变进我AngularJS看法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
