All geek questions in one place

How to pass Laravel variable to my AngularJS view?

I am creating a small photo application to learn AngularJS 1.3. I come from the background of PHP, so conceptually this is completely different for me :)

I want to pass a variable (the URL of my photo folder) to my AngularJS view (.html file). How can i do this?

In other words, what is the best practice for passing application constants from PHP to AngularJS ngRoute views?

Here is the code:

Laravel Controller Method

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

Blade pattern

$upload_url is a variable that 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" } ); });

Main controller (mainController.js)

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

Photo Service (photoService.js)

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

... and finally my Angular view (home.html)

I would like the photo.filename prefix photo.filename value $upload_url 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>

Thanks! Any pointers that can put me on the right track are appreciated :)

Edit:

I have a job, but I don’t know if this is the best practice!

I added this to the bottom of my blade template:

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

And modified the main controller to pass 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); }); });

Then I can access the download URL in index.html simply using {{ constants.upload_url }} .

So ... it works, but I have no idea that it is hacks or not;)

Any input would be appreciated!

+5
source share
2 answers

I wonder if this will be best practice or not. However, if the value should not be safe , one of the easiest ways to send constant values ​​from the server is something like this.

In html.

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

In the angular module.

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

In your controller.

 console.log($scope.config);
+6
source

You didn't have Angular and Blade syntax? In my case, I changed what Laravel uses to reflect variables and evaluate expressions, this method is set in routes.php :

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

I'm not sure how good the practice is, but from time to time I set some ng-init directives like this:

Click Template

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

View

A method of obtaining a visualized representation as follows:

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

Then you can contact the controller and use it for ng-Route as follows:

 $scope.constants.upload_url
+2
source

Source: https://habr.com/ru/post/1216046/

More articles:


All Articles