A brief discussion on the pitfalls of angularjs module returning objects

By splitting different components in the module into different js files, I found a strange problem in the module during assembly. I wonder if it is a bug in AngularJS. No explanation has been found so far.

The problem is this. According to understanding, angular.module('app.main', []); is equivalent to returning an app object from the app.main namespace. Then, no matter in any js file, the pointer stored in the app variable I obtained through this method should point to the only heap memory, and the app object is stored in this memory. There is indeed no problem with this kind of operation in the js file of the module, the js file of the controller, and the js file of the service. They are the same object. But when adding the directive, the app object was not registered by the module. Why is it not registered? The conclusion is naturally that the object pointed to by the returned app variable is no longer the one we registered.

That is, there will be problems if you write it like this:

app.js

(function(angular){
    angular.module('app.main',
        ['app.login']
    );
})(window.angular);

menuController.js

(function(angular){
  angular.module('app.main', []);
  .controller('MenuController',function($scope,menuService,userService){
    var loginname=Cookies.getCookieValue("loginname");
    var token=Cookies.getCookieValue("token");
        Cookies.delCookieValue("token");
        Cookies.delCookieValue("loginname");
    alert(userService.getToken());
    $scope.menu=[];
     
    menuService.initMenu(loginname,token,function(menu){
        $scope.menu=menu;
        $scope.$broadcast("menuLoaded");
    });
     
        $scope.displaySwitch=function(index){
        if($scope.menu[index].isShow)
            $scope.menu[index].isShow=false;
        else
            $scope.menu[index].isShow=true;
    };
     
    });
   
})(window.angular);

menu.js

(function(angular){
    if(!app)
    app={};
  if(!app.main)
    angular.module('app.main', []);
    .directive('menu', function($compile) {
      return {
        restrict: 'A',
        replace: false,
        priority: 999,
        link: function ($scope, $elem, attrs) {
 
            $scope.$on("menuLoaded", function (event, args) {
             
                var tableRow = "";
                 
                angular.forEach($scope.menu, function (item) {
                    var sub='';
                    var subLi='';
 
                    if(item.main){
                        sub=[
                           &#39;<a href="&#39;+item.url+&#39;" class="home-icon">&#39;,
                           &#39;<span class="glyphicon glyphicon-home" aria-hidden="true"></span>&#39;,
                       item.name,
                         &#39;</a>&#39;
                          ].join(&#39;&#39;);
                    }else if(item.history){
                        sub=[
                           &#39;<a href="&#39;+item.url+&#39;" class="sub-icon">&#39;,
                             &#39;<span class="glyphicon glyphicon-home glyphicon-hourglass" aria-hidden="true"></span>&#39;,
                       item.name,
                         &#39;</a>&#39;
                          ].join(&#39;&#39;);
                    }else if(item.sub){
                        sub=[
                           &#39;<a href="#" class="menu1" ng-click="displaySwitch(&#39;+item.index+&#39;)">&#39;,
                           &#39;<span class="glyphicon glyphicon-film" aria-hidden="true"></span>&#39;,
                       item.name,
                       &#39;<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>&#39;,
                         &#39;</a>&#39;
                          ].join(&#39;&#39;);
                        subLi=&#39;<ul class="cl-effect-2" ng-show="menu[&#39;+item.index+&#39;].isShow">&#39;;
                        for(var i=0;i<item.sub.length;i++){
                            subLi=subLi+[&#39;<li>&#39;,
                                   &#39;<a href="&#39;+item.sub[i].url+&#39;">&#39;,
                                   item.sub[i].name,
                                   &#39;</a>&#39;,
                                   &#39;</li>&#39;
                            ].join(&#39;&#39;);
                        }
                        subLi=subLi+&#39;</ul>&#39;;
                    }else{
                        sub=[
                           &#39;<a href="&#39;+item.url+&#39;" class="sub-icon">&#39;,
                           &#39;<span class="glyphicon glyphicon-film" aria-hidden="true"></span>&#39;,
                       item.name,
                         &#39;</a>&#39;
                          ].join(&#39;&#39;);
                    }
                    tableRow = tableRow+[&#39;<li &#39;,
                               item.main ? &#39;class="active"&#39; : &#39;&#39;,
                               &#39;>&#39;,
                               sub,
                               &#39;</li>&#39;,
                               subLi
                    ].join(&#39;&#39;);
                });
                 
                $elem[0].innerHTML = tableRow;
                $compile($elem.contents())($scope);
                 
          });
 
        }
      };
    });
})(window.angular);

If you load this at the same time Three js will have the problems mentioned before. Loading app.js and menuController.js or app.js and menu.js respectively will not cause problems.

But once you know the cause of the problem, you can solve the problem. Give the application of the returned app object to the global variable. Each js will judge whether this global variable exists. If it exists, use this variable. Otherwise, obtain it through the module.

app.js

(function(angular){
    app={};
    app.main=angular.module('app.main',
        ['app.login']
    );
})(window.angular);

menuController.js

(function(angular){
     
    if(!app)
    app={};
  if(!app.main)
        app.main=angular.module('app.main', []);
  app.main.controller('MenuController',function($scope,menuService,userService){
    var loginname=Cookies.getCookieValue("loginname");
    var token=Cookies.getCookieValue("token");
        Cookies.delCookieValue("token");
        Cookies.delCookieValue("loginname");
    alert(userService.getToken());
    $scope.menu=[];
     
    menuService.initMenu(loginname,token,function(menu){
        $scope.menu=menu;
        $scope.$broadcast("menuLoaded");
    });
     
        $scope.displaySwitch=function(index){
        if($scope.menu[index].isShow)
            $scope.menu[index].isShow=false;
        else
            $scope.menu[index].isShow=true;
    };
     
    });
   
})(window.angular);

menu.js

(function(angular){
    if(!app)
    app={};
  if(!app.main)
        app.main=angular.module('app.main', []);
  app.main.directive('menu', function($compile) {
      return {
        restrict: 'A',
        replace: false,
        priority: 999,
         
        link: function ($scope, $elem, attrs) {
 
            $scope.$on("menuLoaded", function (event, args) {
             
                var tableRow = "";
                 
                angular.forEach($scope.menu, function (item) {
                    var sub='';
                    var subLi='';
 
                    if(item.main){
                        sub=[
                           &#39;<a href="&#39;+item.url+&#39;" class="home-icon">&#39;,
                           &#39;<span class="glyphicon glyphicon-home" aria-hidden="true"></span>&#39;,
                       item.name,
                         &#39;</a>&#39;
                          ].join(&#39;&#39;);
                    }else if(item.history){
                        sub=[
                           &#39;<a href="&#39;+item.url+&#39;" class="sub-icon">&#39;,
                             &#39;<span class="glyphicon glyphicon-home glyphicon-hourglass" aria-hidden="true"></span>&#39;,
                       item.name,
                         &#39;</a>&#39;
                          ].join(&#39;&#39;);
                    }else if(item.sub){
                        sub=[
                           &#39;<a href="#" class="menu1" ng-click="displaySwitch(&#39;+item.index+&#39;)">&#39;,
                           &#39;<span class="glyphicon glyphicon-film" aria-hidden="true"></span>&#39;,
                       item.name,
                       &#39;<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>&#39;,
                         &#39;</a>&#39;
                          ].join(&#39;&#39;);
                        subLi=&#39;<ul class="cl-effect-2" ng-show="menu[&#39;+item.index+&#39;].isShow">&#39;;
                        for(var i=0;i<item.sub.length;i++){
                            subLi=subLi+[&#39;<li>&#39;,
                                   &#39;<a href="&#39;+item.sub[i].url+&#39;">&#39;,
                                   item.sub[i].name,
                                   &#39;</a>&#39;,
                                   &#39;</li>&#39;
                            ].join(&#39;&#39;);
                        }
                        subLi=subLi+&#39;</ul>&#39;;
                    }else{
                        sub=[
                           &#39;<a href="&#39;+item.url+&#39;" class="sub-icon">&#39;,
                           &#39;<span class="glyphicon glyphicon-film" aria-hidden="true"></span>&#39;,
                       item.name,
                         &#39;</a>&#39;
                          ].join(&#39;&#39;);
                    }
                    tableRow = tableRow+[&#39;<li &#39;,
                               item.main ? &#39;class="active"&#39; : &#39;&#39;,
                               &#39;>&#39;,
                               sub,
                               &#39;</li>&#39;,
                               subLi
                    ].join(&#39;&#39;);
                });
                 
                $elem[0].innerHTML = tableRow;
                $compile($elem.contents())($scope);
                 
          });
 
        }
      };
    });
})(window.angular);