Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

Advice on moving components / controllers / services out of userModule


  • 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
        };
    
    });

  • 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


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


  • 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.


  • yes - that occurred to me - might make things a little more straightforward. Thanks - didn't think about the REST rate issue. Is there anything about using Webpack with mango?


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

    Is there anything about using Webpack with mango?

    Not currently but I could put together a little help section tomorrow.


  • Sorry to storm in but I think that'd be beneficial for a lot of people Jared. Also thanks for your input, I think I've lost sight of a few things lately!


  • Thanks, @Jared-Wiltshire. Let me bug you when things appear to be getting out of hand!


  • well, on second thought then, that would be super!