Angular Ng Routing Bundle Laravel Package

Getting Started

Minimal Setup

1. Install Dependencies Ensure FOSJsRoutingBundle is installed (this bundle depends on it). Add via Composer:

   composer require friendsofsymfony/js-routing-bundle
   

   Then install the target bundle:

   composer require cypresslab/angular-ng-routing-bundle:dev-master
   

2. Enable the Bundle Add to config/bundles.php:

   return [
       // ...
       CypressLab\AngularNgRoutingBundle\CypressLabAngularNgRoutingBundle::class => ['all' => true],
   ];
   

3. Generate Routing Assets Run:

   php bin/console assets:install public --symlink
   

4. First Use Case: Inject Routing into Angular In your base template (e.g., base.html.twig), add these scripts after fos_js_routing_js:

   <script src="{{ asset('bundles/cypressangularngrouting/ng-router.js') }}"></script>
   <script src="{{ path('fos_js_routing_js', {'callback': 'cypress.NgRouter.setData'}) }}"></script>
   

   Now NgRouting is globally available in Angular.

Implementation Patterns

Workflow: Integrating with Angular Services

1. Expose Symfony Routes as Angular Resources Use NgRouting.generateResourceUrl() to convert Symfony route names into Angular-compatible URLs:

   // In your Angular service/controller
   var resourceUrl = NgRouting.generateResourceUrl('api_user_show', { id: 123 });
   $resource(resourceUrl).get().then(function(data) {
       // Handle response
   });
   

2. Dynamic Route Parameters Pass parameters as the second argument:

   var url = NgRouting.generateResourceUrl('api_post_edit', { id: postId });
   

3. Reuse with $resource Combine with Angular’s $resource for RESTful APIs:

   var User = $resource(NgRouting.generateResourceUrl('api_user_show', { id: ':id' }));
   User.get({ id: 1 }).$promise.then(...);
   

4. Global Configuration Override default behavior in config.yml (if supported) or extend ng-router.js via custom assets.

Gotchas and Tips

Pitfalls

1. Dependency on FOSJsRoutingBundle

   • Ensure FOSJsRoutingBundle is properly configured (e.g., fos_js_routing_js route exists).
   • Debug missing routes by checking Symfony’s router dump:

     php bin/console debug:router
     

2. Asset Paths

   • If ng-router.js is missing, verify:
     • Assets are installed (assets:install).
     • Bundle is enabled in bundles.php.
     • Paths in Twig are correct (e.g., bundles/cypressangularngrouting/).

3. Angular Scope Pollution

   • NgRouting is global. Avoid naming conflicts by:
     • Using a namespace (e.g., app.NgRouting).
     • Minifying scripts to shorten global names.

4. Outdated Codebase

   • Last release is 2014. Test thoroughly in your environment.
   • Fork and update if critical features (e.g., Symfony 5+) are needed.

Debugging Tips

1. Check Router Data Log the generated data to verify routes are loaded:

   console.log(cypress.NgRouter.getData());
   

2. Fallback to Manual URLs If NgRouting fails, hardcode URLs temporarily:

   $resource('/api/users/:id').get({ id: 1 });
   

3. Extend the Bundle Override ng-router.js by copying it to web/bundles/cypressangularngrouting/ and modifying:

   // Custom logic to transform routes
   cypress.NgRouter.setData = function(data) {
       // Preprocess data here
       angular.module('yourApp').constant('NgRouting', data);
   };
   

4. Symfony Cache Clear cache after route changes:

   php bin/console cache:clear