Answers.Body: <p>I figured it out.</p>
  <p>The <code>aboutme.js</code> file needs to be:</p>
  <pre><code>(function(angular, $, _) {
    // Declare a list of dependencies.
    angular.module('aboutme', [
      'crmUi', 'crmUtil', 'ngRoute'
    ]);
      
  })(angular, CRM.$, CRM._);
  </code></pre>
  <p>I also had to change the url from <code>civicrm/a/about/me</code> to <code>civicrm/a/#/about/me</code>.
  I had tried the <code>#</code> earlier, but the code was still incorrect, so it didn't work.</p>
  <p>Angular and angular-router happen to already be included in the bower components folder in <code>administrator/components/com_civicrm/civicrm</code> , so you don't need to install angular-router with npm or otherwise.</p>
  <p>The only other change I made is I removed the redundancy in the requires statement of <code>aboutme.ang.php</code> like so:</p>
  <pre><code>&lt;?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' =&gt; [
      'ang/aboutme.js',
      'ang/aboutme/*.js',
      'ang/aboutme/*/*.js',
    ],
    'css' =&gt; [
      'ang/aboutme.css',
    ],
    'partials' =&gt; [
      'ang/aboutme',
    ],
    // removed 'crmUi', 'crmUtil', 'ngRoute' (already in aboutme.js)
    'requires' =&gt; [
    ],
    'settings' =&gt; [],
  ];
  </code></pre>
  <p>Everything else that civix produced via the command line I left untouched.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2021-07-29T19:03:08.360Z
Answers.LastActivityDate: 2021-07-29T19:03:08.360Z
Answers.UserDisplayName: Kurt Leadley
Body: <p>I'm trying to learn AngularJS with CiviCRM and I am doing the tutorial found <a href="https://docs.civicrm.org/dev/en/latest/framework/angular/quickstart/" rel="nofollow noreferrer">here</a>.
  After completing the tutorial, I navigated to <code>http://localhost/Joomla/administrator/index.php?option=com_civicrm&amp;task=civicrm/a/about/me</code>, and saw this error:</p>
  <p><a href="https://i.sstatic.net/KvRh9.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/KvRh9.png" alt="enter image description here" /></a></p>
  <p>When clicking on the error message link, I am redirected to this <a href="https://code.angularjs.org/1.8.2/docs/error/$injector/modulerr" rel="nofollow noreferrer">page</a>. This page explains that the error is probably caused by <code>ngRoute</code> not being included. I went ahead and downloaded angular-route using <code>npm install angular-route</code>. There were instructions for using npm to download angular-route and use it with CiviCRM <a href="https://develop.tadpole.cc/plugins/civicrm/-/tree/c4c5de9c1bb8aa244344793d11983dde7f118907/civicrm/bower_components/angular-route" rel="nofollow noreferrer">here</a></p>
  <p>My problem is that I am not sure how to properly include <code>ngRoute</code>, or if that is even the problem. Here is what I think the relevant code is that gets produced using <code>civix</code>:</p>
  <p><strong>EditCtrl.js</strong></p>
  <p><a href="https://i.sstatic.net/PkoJi.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/PkoJi.png" alt="enter image description here" /></a></p>
  <p><strong>aboutme.js</strong></p>
  <p><a href="https://i.sstatic.net/7OfKj.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/7OfKj.png" alt="enter image description here" /></a></p>
  <p>I've tried <code> angular.module('aboutme', ['ngRoute']')</code> and <code>angular.module('myApp', [require('angular-route')]);</code> in <code>EditCtrl.js</code>. For example:</p>
  <p><a href="https://i.sstatic.net/qhvYy.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/qhvYy.png" alt="enter image description here" /></a></p>
  <p>I also tried linking the <code>angular-route</code> library in the <code>EditCtrl.html</code> file like so:</p>
  <p><a href="https://i.sstatic.net/fyFa8.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/fyFa8.png" alt="enter image description here" /></a></p>
  <p>I couldn't find an <code>index.html</code> file to try and add a reference to <code>ngRoute</code>.</p>
  <p>I'd also like to note that the <code>aboutme.js</code> file produced by <code>civix</code> is completely different than the code in the tutorial. The tutorial code shows:</p>
  <p><a href="https://i.sstatic.net/Lgp3t.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Lgp3t.png" alt="enter image description here" /></a></p>
  <p>The produced <code>civix</code> code is already shown above.</p>
  <p>Here is my file tree and <code>package.json</code> file:</p>
  <p><a href="https://i.sstatic.net/pCO1Z.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/pCO1Z.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.sstatic.net/gqS4V.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/gqS4V.png" alt="enter image description here" /></a></p>
  <p><strong>Any ideas on how to get this tutorial to work?</strong></p>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2021-07-29T18:22:37.800Z
Comments.Text: I haven't looked at that in a while, but it's possible some changes since then have made it out of date, e.g. maybe this one although it's not about routing specifically: https://github.com/civicrm/civicrm-core/pull/20419. But depending on what you're ultimately trying to do, you might want to look at the higher-level `afform` framework, which sits on top of angular: https://docs.civicrm.org/dev/en/latest/afform/overview/
Comments.UserDisplayName: Demerit
Tags: <joomla><angular>
Title: Router problem. AngularJS on Jooma
ThreadText: # Router problem. AngularJS on Jooma
  
  (Asked by: username_0 on 2021-07-29)
  
  I'm trying to learn AngularJS with CiviCRM and I am doing the tutorial found [here](https://docs.civicrm.org/dev/en/latest/framework/angular/quickstart/).
  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](https://i.sstatic.net/KvRh9.png)](https://i.sstatic.net/KvRh9.png)
  
  When clicking on the error message link, I am redirected to this [page](https://code.angularjs.org/1.8.2/docs/error/$injector/modulerr). 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](https://develop.tadpole.cc/plugins/civicrm/-/tree/c4c5de9c1bb8aa244344793d11983dde7f118907/civicrm/bower_components/angular-route)
  
  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](https://i.sstatic.net/PkoJi.png)](https://i.sstatic.net/PkoJi.png)
  
  **aboutme.js**
  
  [![enter image description here](https://i.sstatic.net/7OfKj.png)](https://i.sstatic.net/7OfKj.png)
  
  I've tried  `angular.module('aboutme', ['ngRoute']')` and `angular.module('myApp', [require('angular-route')]);` in `EditCtrl.js`. For example:
  
  [![enter image description here](https://i.sstatic.net/qhvYy.png)](https://i.sstatic.net/qhvYy.png)
  
  I also tried linking the `angular-route` library in the `EditCtrl.html` file like so:
  
  [![enter image description here](https://i.sstatic.net/fyFa8.png)](https://i.sstatic.net/fyFa8.png)
  
  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](https://i.sstatic.net/Lgp3t.png)](https://i.sstatic.net/Lgp3t.png)
  
  The produced `civix` code is already shown above.
  
  Here is my file tree and `package.json` file:
  
  [![enter image description here](https://i.sstatic.net/pCO1Z.png)](https://i.sstatic.net/pCO1Z.png)
  
  [![enter image description here](https://i.sstatic.net/gqS4V.png)](https://i.sstatic.net/gqS4V.png)
  
  **Any ideas on how to get this tutorial to work?**
  
  **Tags:** joomla, angular
  
  > **Comments:**
  > **username_1**: I haven't looked at that in a while, but it's possible some changes since then have made it out of date, e.g. maybe this one although it's not about routing specifically: https://github.com/civicrm/civicrm-core/pull/20419. But depending on what you're ultimately trying to do, you might want to look at the higher-level `afform` framework, which sits on top of angular: https://docs.civicrm.org/dev/en/latest/afform/overview/  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2021-07-29. Score: 1 | Accepted answer
  
  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.
  
  
  ---
  
  