0

I'm trying to learn AngularJS with CiviCRM and I am doing the tutorial found here. After completing the tutorial, I navigated to http://localhost/Joomla/administrator/index.php?option=com_civicrm&task=civicrm/a/about/me, and saw this error:

enter image description here

When clicking on the error message link, I am redirected to this page. This page explains that the error is probably caused by ngRoute not being included. I went ahead and downloaded angular-route using npm install angular-route. There were instructions for using npm to download angular-route and use it with CiviCRM here

My problem is that I am not sure how to properly include ngRoute, or if that is even the problem. Here is what I think the relevant code is that gets produced using civix:

EditCtrl.js

enter image description here

aboutme.js

enter image description here

I've tried angular.module('aboutme', ['ngRoute']') and angular.module('myApp', [require('angular-route')]); in EditCtrl.js. For example:

enter image description here

I also tried linking the angular-route library in the EditCtrl.html file like so:

enter image description here

I couldn't find an index.html file to try and add a reference to ngRoute.

I'd also like to note that the aboutme.js file produced by civix is completely different than the code in the tutorial. The tutorial code shows:

enter image description here

The produced civix code is already shown above.

Here is my file tree and package.json file:

enter image description here

enter image description here

Any ideas on how to get this tutorial to work?

1

1 Answer 1

1

I figured it out.

The aboutme.js file needs to be:

(function(angular, $, _) {
  // Declare a list of dependencies.
  angular.module('aboutme', [
    'crmUi', 'crmUtil', 'ngRoute'
  ]);
    
})(angular, CRM.$, CRM._);

I also had to change the url from civicrm/a/about/me to civicrm/a/#/about/me. I had tried the # earlier, but the code was still incorrect, so it didn't work.

Angular and angular-router happen to already be included in the bower components folder in administrator/components/com_civicrm/civicrm , so you don't need to install angular-router with npm or otherwise.

The only other change I made is I removed the redundancy in the requires statement of aboutme.ang.php like so:

<?php
// This file declares an Angular module which can be autoloaded
// in CiviCRM. See also:
// \https://docs.civicrm.org/dev/en/latest/hooks/hook_civicrm_angularModules/n
return [
  'js' => [
    'ang/aboutme.js',
    'ang/aboutme/*.js',
    'ang/aboutme/*/*.js',
  ],
  'css' => [
    'ang/aboutme.css',
  ],
  'partials' => [
    'ang/aboutme',
  ],
  // removed 'crmUi', 'crmUtil', 'ngRoute' (already in aboutme.js)
  'requires' => [
  ],
  'settings' => [],
];

Everything else that civix produced via the command line I left untouched.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.