Advice on moving components / controllers / services out of userModule

[BobDay]

well, doing exactly that, and setting the location to /modules/mangoUI/web/dev/userModule.js,
left me with:
"Failed to load AMD module modules/mangoUI/web/dev/userModule.js Error: Script error for "modules/mangoUI/web/dev/userModule.js" in Chrome console - no component error logged.

and this file is there:

define(['angular', 'require','./components/pushLamp.js'],
  function (angular, require, pushLamp) {
    var userModule = angular.module('userModule', ['maUiApp']);

    userModule.filter('unsafe', ['$sce', function($sce) {
       return $sce.trustAsHtml;
    }]);

    try
    {
      userModule.component('pushLamp',pushLamp);
    }
    catch(e)
    {
      console.log('error: ', e);
    }

});

[MattFox]

You've got the right idea, the first thing I suggest is to see if you can even manually load the userModule from your web browser

[mangoURL]/modules/mangoUI/web/dev/userModule.js

if you can pull that, then try with the components directory

[MattFox]

Hang on, your mango install is in /opt/mango36 ?
Not in /opt/mango ?

[BobDay]

yes, but using Mango36 in the url... as in /opt/mango36/overrides/web/modules/mangoUI/web/dev/userModule.js

hmmm... does it need to live in /mango?

[MattFox]

nope, just wanted to make sure you did have the files inside the mango's installation directory regardless of how it is named.

Did the http requests from your browser work?

If the mango is on localhost it'd be localhost/modules/mangoUI/web/dev/userModule.js

[BobDay]

nope. clearly have a path issue here...

[MattFox]

if you're in linux, can you navigate to the directory where your usermodule is and enter

pwd

otherwise if in windows, open a command prompt in the location and enter

DIR

to print the path

[BobDay]

(osx)
pwd
/opt/mango36/overrides/web/modules/mangoUI/web/dev

[MattFox]

nope that's definitely correct, check your directory permissions and the owner.
I'll wager mango itself may not have access to the file.
Whatever the user runs as in mango set that as your modules etc directories for a start.
up to web. everything inside that shouldn't matter.

We'll start with that and work our way up from there...

sudo chown [user]:[user] /opt/mango36/overrides -R

sudo find /opt/mango36/overrides -type d -exec chmod 755 {} \;

[BobDay]

@mattfox said in Advice on moving components / controllers / services out of userModule:

sudo find /opt/mango36/overrides -type d -exec chmod 755 {} ;

I assume it runs as root - I have to sudo to start it. In any event, the entire mango36 directory is recursively 755.

and still no joy.

[MattFox]

ps aux | grep java

This will tell us what mango runs as. Also can you also print

ls -la /opt/mango36/overrides/web/modules/mangoUI/web/dev

[BobDay]

@mattfox said in Advice on moving components / controllers / services out of userModule:

ps aux | grep java

▶ ps aux | grep java

root             81841   1.4  5.1  8617284 855636 s000  S     1:51PM   4:13.58 /usr/bin/java -server -cp /opt/mango36/overrides/classes:/opt/mango36/classes:/opt/mango36/overrides/properties:/opt/mango36/overrides/lib/*:/opt/mango36/lib/* -Dma.home=/opt/mango36 -Djava.library.path=/opt/mango36/overrides/lib:/opt/mango36/lib:/usr/lib/jni/:/Users/bullit/.jenv/bin:/Users/bullit/local/n/bin/:/Users/bullit/local/n/bin/node:/opt/local/bin:/opt/local/sbin:/usr/local/bin:/usr/local/sbin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin:/usr/local/git/bin:/Users/bullit/bin:/Users/bullit/local/n/bin:/usr/bin/pear:/usr/local/bin/dayone com.serotonin.m2m2.Main
bullit           87269   0.0  0.0  2424612   1248 s001  R+    3:42PM   0:00.00 grep --color=auto --exclude-dir=.bzr --exclude-dir=CVS --exclude-dir=.git --exclude-dir=.hg --exclude-dir=.svn java

bullit has read/write access...

[BobDay]

mangoUI/web/dev
▶ cat /opt/mango36/overrides/web/modules/mangoUI/web/dev/userModule.js
define(['angular', 'require','./components/pushLamp.js'],
  function (angular, require, pushLamp) {
    var userModule = angular.module('userModule', ['maUiApp']);

    userModule.filter('unsafe', ['$sce', function($sce) {
       return $sce.trustAsHtml;
    }]);

    try
    {
      userModule.component('pushLamp',pushLamp);
    }
    catch(e)
    {
      console.log('error: ', e);
    }

});

...just checking

[MattFox]

I know what i've done wrong....

I didn't return the user module!
So sorry man!

define(['angular', 'require','./components/pushLamp.js'],
  function (angular, require, pushLamp) {
    var userModule = angular.module('userModule', ['maUiApp']);

    userModule.filter('unsafe', ['$sce', function($sce) {
       return $sce.trustAsHtml;
    }]);

    try
    {
      userModule.component('pushLamp',pushLamp);
    }
    catch(e)
    {
      console.log('error: ', e);
    }
 return userModule; //MISSING THIS!!! aerghhh I hate mondays...
});

Man I need a swift kick...

[BobDay]

so WE did! same problem tho.

lets take this back to chat...

[MattFox]

Fixed, just mixed up the full path of the file with the userModule URL after closer inspection.

[BobDay]

ok, @MattFox... I feel like a post (as in dumb as one). Can you refresh me again as to how to now break out (and where to declare) the component's controller in its own file?

userModule.js

define(['angular', 'require','./push/pushLamp.js'],
  function (angular, require, pushLamp) {
    var userModule = angular.module('userModule', ['maUiApp']);

    userModule.filter('unsafe', ['$sce', function($sce) {
       return $sce.trustAsHtml;
    }]);

    try
    {
      userModule.component('pushLamp',pushLamp);
    }
    catch(e)
    {
      console.log('error: ', e);
    }
    return userModule.js;

});

pushLamp.js:

define(['angular', 'require'], function (angular, require) {

  pushCtrl.$inject = ['$scope','$timeout'];

  function pushCtrl($scope,$timeout) {

    const $ctrl = this;
    $ctrl.$onChanges = function (changes) {
      if (changes.points && Array.isArray($ctrl.points)) {

        $ctrl.point = $ctrl.points.find(p => p.xid === 'DP_ind_' + $ctrl.target);
        $ctrl.switchPoint = $ctrl.points.find(p => p.xid === 'DP_sw_' + $ctrl.target);

        $ctrl.ptCSS = { // point css values for color and blink; ex, ng-class=""
          get color(){
            if ($ctrl.point.color < 10) {
              return 0;
            }
            return Math.floor($ctrl.point.value / 10)},
          get blink(){return 'blink' + $ctrl.point.value % 10},
          get colStyle(){return 'color'+this.color}
        };

        $timeout(function() {
          console.log('color:', $ctrl.ptCSS.colStyle, 'blink:', $ctrl.ptCSS.blink );
        },1000);
      }
    };

    $ctrl.pushed = function() {
      console.log($ctrl.switchPoint.value);
        if ($ctrl.switchPoint) {
            $ctrl.switchPoint.toggleValue();
          console.log('switch ' + $ctrl.target + ' was switched.' );
       }
    };
  }

return {
      templateUrl: '/modules/mangoUI/web/dev/push/push.html',
      bindings: {
        points: '<',
        target: '@'
      },
      controller: pushCtrl
    };

});

[MattFox]

I'm a little confused as to why you'd want to go that far but I believe you'd do something along the lines of..
/opt/mango36/overrides/web/modules/mangoUI/web/dev/controllers/pushCtrl.js

define(['angular', 'require'], function (angular, require) {

  pushCtrl.$inject = ['$scope','$timeout'];

  function pushCtrl($scope,$timeout) 
  {
    const $ctrl = this;
    $ctrl.$onChanges = function (changes) {
      if (changes.points && Array.isArray($ctrl.points)) {

        $ctrl.point = $ctrl.points.find(p => p.xid === 'DP_ind_' + $ctrl.target);
        $ctrl.switchPoint = $ctrl.points.find(p => p.xid === 'DP_sw_' + $ctrl.target);

        $ctrl.ptCSS = { // point css values for color and blink; ex, ng-class=""
          get color(){
            if ($ctrl.point.color < 10) {
              return 0;
            }
            return Math.floor($ctrl.point.value / 10)},
          get blink(){return 'blink' + $ctrl.point.value % 10},
          get colStyle(){return 'color'+this.color}
        };

        $timeout(function() {
          console.log('color:', $ctrl.ptCSS.colStyle, 'blink:', $ctrl.ptCSS.blink );
        },1000);
      }
    };

    $ctrl.pushed = function() {
      console.log($ctrl.switchPoint.value);
        if ($ctrl.switchPoint) {
            $ctrl.switchPoint.toggleValue();
          console.log('switch ' + $ctrl.target + ' was switched.' );
       }
    };
  }

return pushCtrl;
)};//define

then pushLamp.js:

define(['angular', 'require','/modules/web/mangoUI/web/dev/controllers/pushCtrl.js'], function (angular, require,pushCtrl) {

return {
      templateUrl: '/modules/mangoUI/web/dev/push/push.html',
      bindings: {
        points: '<',
        target: '@'
      },
      controller: pushCtrl
    };

});//define

I'm confident you can leverage require in the userModule.js to shorten that controller call into a single word but I've not done a great deal of angularJS lately due to other work commitments....

Fox

[BobDay]

Thanks. I tried that, but obviously suffered pilot error in the process. Good point why bother...

[Jared Wiltshire]

Just be careful with splitting out your user modules into too many files, you may hit the REST rate limiter and your page could fail to load. Test it out with cache disabled to make sure. You can adjust the rate limits in env.properties.

As I mentioned in the other thread, you may want to consider using Webpack if your project becomes cumbersome.