AngularJsでカスタムモジュールを作成し、実行時にそれらをバインドする方法

Question

私は、angularJs関連のコードを1つのファイルに書きました。 (app.js)アプリケーションが成長すると、すべてが同じファイルになるため、app.jsファイルを維持することが難しいことに気付きました。それは過去

app.js私は以下のアプリケーションに何かをモジュール化することを決定したソリューションとして

var myModule = angular.module(
     'myApp', 
     ['ngResource','ui.grid', 'ui.grid.expandable','ui.grid.pagination','ui.grid.expandable']) 
     .constant('ENDPOINT_URI', '/api/').factory(
     'AppServices', 
     function($resource,ENDPOINT_URI) { 


        function getUrl(path) { 
         return ENDPOINT_URI + path; 
        } 

      return { 
       User : $resource(getUrl('user/login'), null, { 
        'login' : { 
         method : 'POST' 
        } 
       }), 

       Test : $resource(getUrl('data/test'), null, { 
        'getResults' : { 
         method : 'GET', 
         isArray : true 
        } 

       }), 

      }; 
     }); 

myModule.config(['$httpProvider','$locationProvider', function($httpProvider,$locationProvider) { 
    $locationProvider.html5Mode({ 
      enabled: true, 
      requireBase: false 
     }); 
     $httpProvider.defaults.headers.common["Accept"] = 'application/json'; 
     $httpProvider.defaults.headers.common["Content-Type"] = 'application/json'; 
    }]); 

myModule.controller('appController', function($scope, AppServices,$window) { 
    $scope.user={}; 
    $scope.user.userName=""; 
    $scope.user.password=""; 
    $scope.user.loading=false; 
    $scope.user.errorMsg=""; 
    $scope.user.errorMsgFlag=false; 

    $scope.login = function() { 


     var userVo = {}; 
     userVo.userName = $scope.user.userName; 
     userVo.password = $scope.user.password; 
     AppServices.User.login({}, agentVo).$promise.then(function(data) { 
      $scope.agent.errorMsg=""; 
      $scope.agent.errorMsgFlag=false; 
      if(data.apiKey){ 

       $window.location.assign("/user/ui/test.html"); 

      }else{ 
      etc ... 
      } 

     }, function(error) { 


      console.log("Errors in posting Data ..." + "" + error.status); 

     }); 
    }; 




}); 

myModule.controller('testController', function($scope, AppServices) { 

//Code goes here 


}); 

に見てどのように

。

serviceModule.js

var serviceModule = angular.module(
     'app.services', 
     []) 
     .constant('ENDPOINT_URI', '/api/').factory(
     'AppServices', 
     function($resource,ENDPOINT_URI) { 


        function getUrl(path) { 
         return ENDPOINT_URI + path; 
        } 

      return { 
       User : $resource(getUrl('user/login'), null, { 
        'login' : { 
         method : 'POST' 
        } 
       }), 

       TestResult : $resource(getUrl('data/test'), null, { 
        'Test' : { 
         method : 'GET', 
         isArray : true 
        } 

       }), 

      }; 
     }); 

servicesModule.config(['$httpProvider','$locationProvider', function($httpProvider,$locationProvider) { 
    $locationProvider.html5Mode({ 
      enabled: true, 
      requireBase: false 
     }); 
     $httpProvider.defaults.headers.common["Accept"] = 'application/json'; 
     $httpProvider.defaults.headers.common["Content-Type"] = 'application/json'; 
    }]); 

loginModule.js

var loginModule = angular.module('user.login',['app.services']); 

myModule.controller('loginController', function($scope, AppServices,$window) { 
     $scope.user={}; 
     $scope.user.userName=""; 
     $scope.user.password=""; 
     $scope.user.loading=false; 
     $scope.user.errorMsg=""; 
     $scope.user.errorMsgFlag=false; 

     $scope.login = function() { 


      var userVo = {}; 
      userVo.userName = $scope.user.userName; 
      userVo.password = $scope.user.password; 
      AppServices.User.login({}, agentVo).$promise.then(function(data) { 
       $scope.user.errorMsg=""; 
       $scope.user.errorMsgFlag=false; 
       if(data.apiKey){ 

        $window.location.assign("/user/ui/test.html"); 

       }else{ 
       etc ... 
       } 

      }, function(error) { 


       console.log("Errors in posting Data ..." + "" + error.status); 

      }); 
     }; 
    }); 

app.js [NEW]

var mainModule = angular.module(
     'employee', 
     ['user.login','ngResource','ui.grid', 'ui.grid.expandable','ui.grid.pagination','ui.grid.expandable']); 

//code goes here ... 

index.htmlを

 <script src="ui/js/modules/serviceModule.js"></script> 
     <script src="ui/js/modules/loginModule.js"></script> 
     <script src="ui/js/app.js"></script> 
<body ng-app="employee"> 
<form ng-controller="loginController"> 
etc... 
    </form> 
    </body> 

私はアプリ上で実行しようとすると、それはUserがundefined.ThisがangularJsにfactory .I午前の初心者としてserviceModuleに位置している私をスローし、カスタムのモジュールで利用可能なドキュメントの欠如があります私が間違っていたことを教えてください、正しい道を私に案内してください。あなたの助けに感謝します。

Answer 1

あなたのapp.js内のすべてのモジュールを定義するのが最善の方法だと思います。

angular.module('app.services',[]); 

angular.module('user.login',['app.services']); 

angular.module(
     'myApp', 
     ['ngResource','ui.grid', 
     'ui.grid.expandable','ui.grid.pagination','ui.grid.expandable','user.login']); 

ここで、サービスごとに異なるファイルを作成します。代わりに、あなたは1つのjavascriptのファイルにそれらを連結またはバンドルすることができ、別のファイル内のモジュールの多くを持っていることの

serviceModule.js

angular.module('app.services').service('AppService',function(){}) 

loginModule.js

angular.module('user.login').controller('loginController',function(){})