Angularjs called from an extension?

Question

Good morning from Canada. I am trying to create an extension with angularjs forms. I have followed the development guide and have created the angularjs page but I cannot get it to display in CiviCRM. I have a Tabset function used with Events, it calls the php page, which in turn I have the AngularLoader configuration. When it gets to the useApp() command I get an Unknown Path error. The examples in the doc don't go as far as to show how to do this within an extension or as a new tab under event. Even if you can point me to an example extension, I can analyse it to try and figure it out. The default_route value in the useApp() command I'm assuming is the ang entry in angular? When I do a cv ang:html:list the page I want is listed (as well as ang:module:list has the module). Thanks for any advance or help you can give. I ran all of the suggested civix commands from the documentation. From the php called from the extension: ...

$loader = new \Civi\Angular\AngularLoader();
$loader->setModules(array('trialadmin'));
$loader->setPageName('TrialDetails');
//$loader->useApp(['defaultRoute' => '/trialadmin']);
$loader->load();
parent::run();

And in my module I have

if ($eventID) {
$url = CRM_Utils_System::url( 'civicrm/event/manage/TrialAdmin', "reset=1&force=1&eventid=$eventID&snippet=5&angularDebug=1" );
error_log($url);
$tab['Administration'] = array(
  'title' => "Administration",
  'link' => $url,
  'valid' => 1,
  'active' => 1,
  'current' => false,
);

output from cv ang:module:list trialadmin | civicrm/a | crmUi, crmUtil, ngRoute

output from cv ang:html:list trialadmin/TrialDetails.html

I've tried different arrangements of the defaultroute but I'm not clear on why I'm getting the unknown path error. If I comment out the useApp line it continues on to use the *.tpl that I originally had in place. I wanted to do this with the newer forms format rather than the quickforms as suggested in the docs.

Answer 1

Ok, sorted it out with some suggestions and examples.

$loader = new \Civi\Angular\AngularLoader(); $loader->setModules(array('trialadmin')); $loader->setPageName('Administration'); $loader->useApp(['activeRoute' => '/trialadmin/trialdetails']); $loader->load();

Worked with this, but I also used the trace and debug in the browser to determine there likely was another issue with the form actually loading. Regardless, I've been able to sort it out.

Answer 2

You are trying to inject an angular snippet into an otherwise non-angular page, and you're wanting to place it into a new tab in the Manage Events page. This is doable but there are a few things to understand:

1. Yours might not be the only Angular snippet on the page. Other extensions may want to add them in the future.
2. Angular routing requires control of the URL, which your snippet shouldn't assume it has, so I don't recommend using crmApp or ng-route.
3. Tab content loads via ajax by default, but it's also possible to pre-load it by supplying a "template" property. This makes Angular stuff simpler.

I recently faced these same challenges while adding this feature to the new Form Builder (Afform) extension, and ended up improving the way AngularJS loads in Civi. It's available in version 5.37+ and I highly recommend you start using this new service:

In your hook you'd do this:

function my_hook_civicrm_tabset($tabsetName, &$tabs, $context) {
  //check if the tab set is Event manage
  if ($tabsetName == 'civicrm/event/manage') {
    if (!empty($context['event_id'])) {
      // Add our Angular module to the page
      Civi::service('angularjs.loader')->addModules(['trialadmin']);
      // Add the tab
      $tab['Administration'] = [
        'title' => "Administration",
        'template' => 'path/to/your/template.tpl',
        'valid' => 1,
        'active' => 1,
        'current' => false,
      ];
    }
  }
}

Note that I didn't supply a URL but instead gave a 'template' which will cause the tab content to load immediately. So now you've got your module loaded and don't have to worry about ajax for the tab content.

In your tpl file you need to initialize your Angular module. This will look a little different than the docs which use crmApp and ng-route. It's actually going to be a lot simpler. All you do is add a tag which tells Civi to boostrap Angular and load your module, then just have your module do it's thing.

So skip all the stuff about routes and controllers. Best practice is to just define a module and a component.

E.g.

(function(angular, $, _) {
  angular.module('mymodule', CRM.angRequires('mymodule'));

  angular.module('mymodule').component('myComponent' {
    // do your thing
  });
})(angular, CRM.$, CRM._);

Then your .tpl file would look like this:

<crm-angular-js modules="mymodule">
  <my-component></my-component>
</crm-angular-js>