These days I’m playing with AngularJS. Today I want to experiment with dynamic routes. Let me show your an example. Imagine a simple route configuration:

$routeProvider.when('/page/page1', {templateUrl: 'partials/page1.html', controller: Controller1}); $routeProvider.when('/page/page2', {templateUrl: 'partials/page2.html', controller: Controller2}); $routeProvider.when('/page/page3', {templateUrl: 'partials/page3.html', controller: Controller3});

It’s very simple but: What happens if our application is big and it grows fast? We need to add new lines and reload the browser.

With AngularJS we can add paramenters to the routes:

$routeProvider.when('/page/:page', {templateUrl: 'partials/page.html', controller: Controller});

Now we don’t need to add new routes but what can we do with the partials? After browse the web and stack overflow finally I found this solution:

.when('/page/:page', {template: '<div ng-include="templateUrl">Loading...</div>', controller: DynamicController})

And now we need to define our DynamicController and load there our needed partial:

function DynamicController($scope, $routeParams) { var unique = (new Date()).getTime(); $scope.templateUrl = '/api/pages/' + $routeParams.page + '?unique=' + unique; }

We can load our partial as a static file but in this example I’m using a Silex backend to provide my partials.

<?php require_once __DIR__ . '/../../vendor/autoload.php'; use Silex\Application; use Symfony\Component\HttpFoundation\Response; $app = new Application(); $app['debug'] = true; $app->register(new Silex\Provider\TwigServiceProvider(), [ 'twig.path' => __DIR__.'/../../views', 'twig.options' => [ 'cache' => __DIR__ . '/../../cache', 'auto_reload' => true ] ]); $app->before(function() use ($app){ $app['twig']->setLexer( new Twig_Lexer($app['twig'], [ 'tag_comment' => ['[#', '#]'], 'tag_block' => ['[%', '%]'], 'tag_variable' => ['[[', ']]'], 'interpolation' => ['#[', ']'], ])); }); $app->get('/pages/{name}', function($name) use ($app){ return $app['twig']->render('hello.html.twig', ['name' => $name]); }); $app->get('/pages/js/{name}', function($name) use ($app){ $response = new Response($app['twig']->render('hello.js', ['name' => $name])); $response->headers->set("Content-Type", 'application/javascript'); return $response; }); $app->run();

As you can see we need to use one small hack to use twig and AngularJS together. They aren’t good friends with the default configuration. Both uses the same syntax ‘{{ expresion }}’. Because of that we will change Twig’s default behaviour within a middleware.

And basically that’s all. You can see a working example in my github account using Booststrap and UI Booststrap