How to pass a PHP variable to an AngularJS config

Question

Let's say I have a HTML file that has AngularJS loaded in with 'ngRoute'.

Then I'm initialize the app by making an index.php file (I'm not displaying the basic HTML tags + angular JS includes here):

<?php $path = 'www.test.com' ?>

<div ng-app="testApp" ng-init="path='<?php echo $path ?>">
   <div ng-view></div>    
</div>

I'm trying to pass the PHP variable to my AngularJS App Config, by this:

// Module
var test = angular.module('testApp', ['ngRoute']);

// Routes
test.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: $rootScope.path + '/pages/display.htm',
        controller:  'testController'
    }) 
});


// Controllers
test.controller('testController', ['$scope', function($scope) {

}]);

This does not work though because the $rootScope is not definied. Can anyone tell me what am I missing here?

charlietfl · Accepted Answer · 2016-01-17 00:24:50Z

3

Based on comments about wanting to keep php and scripts separate just add a script tag with a variable that you can then access from anywhere in angular

<script>
     var myPathVar = '<?= $someVar; ?>';
</script>

Then you can do anything you want with inside angular such as add it as constant , pass it to $rootScope in your config or whatever

answered Jan 17, 2016 at 0:24

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Radical_Activity Over a year ago

Thank you I've used this approach. Yeah basically if there's no other workaround, I'm doing this. Cool! Cheers for the answer!

charlietfl Over a year ago

no real need for a workaround. Sure it can be argued it's a global but one global can be tolerated with minimal impact potential

user1114 Over a year ago

WARNING This code is probably vulnerable to cross-site scripting attacks. Do not use this code unless you want your site to be hacked. See Everything You Need to Know About Preventing Cross-Site Scripting Vulnerabilities in PHP for an introduction to the topic.

mzulch · Accepted Answer · 2016-01-17 00:24:46Z

3

You can define a constant in a script tag in the page generated with PHP:

<script type="text/javascript">
    angular.module('testApp').constant('path', '<?php echo $path ?>');
</script>

And in your app config:

// Routes
test.config(function($routeProvider, path) {
    $routeProvider
    .when('/', {
        templateUrl: path + '/pages/display.htm',
        controller:  'testController'
    }) 
});

If path contains any user-supplied content, make sure to escape it appropriately for echoing as a javascript string.

answered Jan 17, 2016 at 0:24

mzulch

1,54812 silver badges14 bronze badges

1 Comment

ArtisticPhoenix Over a year ago

This may not work if the JS code is wrapped in a function( $ ) {$(document).ready( ... );} )(jQuery); type block then you will have to attached it to something global like the window.

ArtisticPhoenix · Accepted Answer · 2016-01-17 00:19:01Z

-1

you might want do do this instead

// Controllers
test.controller('testController', ['<?php echo $scope; ?>', function($scope) {

}]);

I dont use angularJs, but regardless '$scope' would literately be the word $scope

edited Jan 17, 2016 at 0:19

answered Jan 17, 2016 at 0:17

ArtisticPhoenix

21.7k2 gold badges27 silver badges38 bronze badges

6 Comments

Radical_Activity Over a year ago

Thank you for your answer. What can I do if my Angular app is in a separate .js file?

ArtisticPhoenix Over a year ago

Pass it to it somehow, hard to answer without knowing how you combine them, also, just as a practice I would avoid using the $ for JS variables, as it is confusing when combined with PHP.

Patrick Evans Over a year ago

What would be the point of this? This does not help get OP's php $path data into AngularJS's scopes

ArtisticPhoenix Over a year ago

@PatrickEvans - well with all $ signed variables, and whatnot ( incomplete example ) I just picked the most obvious issue because in either JS or PHP '$scope' is just a word and not a variable.

charlietfl Over a year ago

@ArtisiticPhoenix unfortunately you can't inject external variables into angular components without registering them ..and $scope is protected in angular also

|

Collectives™ on Stack Overflow

How to pass a PHP variable to an AngularJS config

3 Answers 3

3 Comments

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related