Generate Slim Router path URLs using Javascript.
This package provides Javascript code to generate URLs for named routes in Slim Framework using Javascript:
var url = Slim.Router.pathFor('hello', {'name': 'World'});The Slim.Router object provides the methods pathFor()
and relativePathFor() which work the same as the
Slim\Router::pathFor() and Slim\Router:relativePathFor() methods in PHP.
Install the package using composer:
composer require llvdl/slim-router-js
Then add a route to generate the Javascript code for the Slim.Router object:
$app = new \Slim\App();
// Add router javascript
$app->get('/router.js', function($req, $res, $args) {
$routerJs = new \Llvdl\Slim\RouterJs($this->router);
return $routerJs->getRouterJavascriptResponse();
});Note: router.js is considered as a static file by the PHP built-in
webserver. Either use a router script, or use a pattern without an extension,
for example '/router`. See the
PHP documentation
for more information.
Finally, in the HTML file, import the router.js file:
<html>
<head>
<script src="/router.js"></script>
</head>
</html>To make a route available in Slim.Router in javascript, add a name to it:
$app->get('/hello/{name}', function($req, $res) {
// ...
})->setName('hello');Note: routes without a name are not available to Slim.Router in javascript.
In the HTML document, import router.js. The URL for the named route can then be generated using Slim.Router.pathFor:
<html>
<head>
<script src="/router.js"></script>
</head>
<body>
<input id="name" type="text"/>
<button id="submit-button">Go</button>
<script>
document.getElementById('submit-button').on('click', function() {
var name = document.getElementById('name').value;
var url = Slim.Router.pathFor('hello', {name: name});
alert(url);
});
</script>
</body>
</html>See the example/ folder in this repository for an example script.
RouterJs is the PHP class that generates the Javascript code. It provides the following methods:
-
__constructor(\Slim\Router $router, bool $minified): constructorBy default a minified javascript is returned. Set
$minifiedto false for non-minified javascript code. -
getRouterJavascriptResponse(): Slim\ResponseReturns a HTTP response for use in an action
-
getRouterJavascript(): stringGenerates the javascript code
The Slim.Router object provides the following methods:
pathFor(name, data, queryParams)relativePathFor(name, data, queryParams)
These method work as the Slim\Router::pathFor() and
Slim\Router::relativePathFor() methods in PHP.
The repository contains PHPUnit tests for the PHP code. To run these:
phpunit -c app/phpunit.xml
There are no automatic tests for the javascript code. It has been manually tested, and found to be working, using the example code in the following browsers:
- Chrome and Chromium
- Firefox
- Microsoft Edge
- Microsoft Internet Explorer 11
This section lists some future functional improvements that can be made:
-
Filter exposed routes, for example by route argument
-
Caching
Note that middleware can be used to cache the response.
-
Allow for inclusing in a Javascript bundler, for example Webpack
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent