Assetic Angular Js Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require asoc/assetic-angular-js-bundle
   

   Ensure your project uses Symfony 2.3+ and AsseticBundle (symfony/assetic-bundle:^2.3).

2. First Use Case: Add AngularJS templates to your app/config/config.yml under assetic:

   assetic:
       filters:
           angular: ~
   

   Then, in a Twig template:

   {% javascripts filter="angular"
       'path/to/templates/*.html.ng'
   %}
       <script src="{{ asset_url }}"></script>
   {% endjavascripts %}
   

3. Verify Output: Check the generated JS to confirm templates are cached in Angular’s $templateCache.

Implementation Patterns

Workflow Integration

1. Template Organization:

   • Use .html.ng (or custom extension) for Angular templates.
   • Group templates by feature/module (e.g., Resources/views/auth/*.html.ng).

2. Dynamic Template Loading:

   • Reference templates in Twig via data-ng-include:

     <div data-ng-include="'Auth/login.html'"></div>
     

   • Ensure the template path matches the put() key in the generated JS (e.g., Auth/login.html).

3. Asset Management:

   • Exclude from CSS/JS Bundles: Only include template files in the angular filter.
   • Combine with Other Filters: Chain with uglifyjs or yui_css if needed:

     {% javascripts filter="angular,uglifyjs" %}
     

4. Module-Specific Templates:

   • Prefix template paths with a module name (e.g., Auth/) to avoid collisions.
   • Reference the module in Angular:

     angular.module('Auth.templates', []).requires.push('Auth');
     

5. Environment-Specific Config:

   • Disable in production if using server-side rendering (e.g., via app_dev.php checks).

Advanced Patterns

• Custom Path Formatting: Override the default path formatter by extending the bundle’s TemplateNameFormatter service. Example:

  // src/Acme/AppBundle/DependencyInjection/Compiler/TemplateNameFormatterPass.php
  public function process(ContainerBuilder $container) {
      $definition = $container->findDefinition('asoc_assetic_angular_js.template_name_formatter');
      $definition->setArgument(0, function($formatter) {
          return function($path) {
              return str_replace(['Resources/views/', '.html.ng'], '', $path);
          };
      });
  }
  

• Lazy-Loading Templates: Use ngRoute or ui-router to load templates dynamically, bypassing the cache for specific cases.

Gotchas and Tips

Pitfalls

1. Path Resolution Issues:

   • Symlink Problems: Ensure template paths resolve correctly in production (use asset() helper or absolute paths).
   • Case Sensitivity: Template keys in $templateCache are case-sensitive (e.g., Auth/Login.html ≠ auth/login.html).

2. Caching Conflicts:

   • Assetic Cache: Clear Assetic cache after adding new templates:

     php app/console assetic:dump --env=prod --no-debug
     

   • Browser Cache: Append a query string to the script tag in development:

     <script src="{{ asset_url }}?v=1.0"></script>
     

3. Angular Module Dependencies:

   • Forgetting to declare the template module in your app:

     angular.module('App.templates', []); // Required!
     

4. HTML Escaping:

   • The filter does not escape HTML. Ensure templates are sanitized if loaded from user input.

Debugging Tips

• Inspect Generated JS: Open the browser’s dev tools to verify template paths and content in $templateCache. Example output:

  $templateCache.put("Auth/login.html", "<div>{{ form }}</div>");
  

• Log Filter Output: Temporarily add a debug dump in a custom filter:

  // src/Acme/AppBundle/Twig/Extension/DebugExtension.php
  public function getTemplateCacheDump() {
      return $this->container->get('assetic.assets')->get('your_template_asset')->getContent();
  }
  

• Check Assetic Configuration: Validate the angular filter is registered in config.yml:

  assetic:
      filters:
          angular: ~
  

Extension Points

1. Custom Filters: Extend the AngularJsFilter class to modify template processing (e.g., minification, pre-processing).

2. Template Preprocessing: Use Assetic’s raw filter to pre-process templates (e.g., with PHP includes):

   {% javascripts filter="raw,angular" %}
       {% include 'partials/header.html.twig' %}
   {% endjavascripts %}
   

3. Dynamic Module Names: Override the module name logic to use a dynamic namespace (e.g., based on route or user role).

4. Integration with Webpack/Encore: If migrating from Assetic, use encore.js to generate the template cache via a custom loader:

   // webpack.config.js
   Encore
       .addEntry('templates', './assets/templates/*.html')
       .copyFiles({
           from: './assets/templates',
           to: 'templates/[path][name].html',
       });