अलग-अलग फ़ाइलों में ऐप, नियंत्रक और सेवाएं डालकर

Question

मैं परियोजना को बहुत बड़ा होने से पहले कोणीय कोड को अलग-अलग फ़ाइलों में स्थानांतरित करने की कोशिश कर रहा हूं।

मैं app, controllers और services अलग फ़ाइलों में जाने की कोशिश की लेकिन त्रुटियों कोड में अंक को संदर्भित बंद कर दिया (या वे भी सामान्य थे)।

मैंने फ़ाइल सामग्री को बड़े <script> टैग पर डालने का निर्णय लिया है, इसलिए मैं त्रुटियों के माध्यम से काम कर सकता हूं और इसे काम कर सकता हूं। दुर्भाग्य से मैं thisसामने आने वाले (दृष्टांत के कारण करने के लिए मॉड्यूल protonApp ... विफल) और कैसे समस्या को ट्रैक करने के लिए (मैं कोणीय के लिए नया हूँ)

(function() { 
    'use strict'; 
    ... 
}()); 

पता नहीं है

मेरे पास कोड है क्योंकि मैंने (छोटा) शोध किया है, कहता है कि जब आप अलग-अलग फाइलों में हों तो आपके बीच अपना कोड होना चाहिए।

(function() { 
    'use strict'; 
    var app = angular.module('protonApp',['ui.router','protonAppControllers','protonAppServices']); 

    app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
     ... 
    }]); 

    app.value('debug',true); 

    app.run(function($rootScope,$state,$http,debug,LeftMenuService) { 
     ... 
    }); 
}()); 


(function() { 
    'use strict'; 
    angular.module('protonAppControllers', ['$scope','$http','LeftMenuService']); 
}()); 


(function() { 
    'use strict'; 
    angular.module('protonAppServices', ['$rootScope','$http']); 
}()); 

(function() { 
    'use strict'; 
    angular.module('protonAppControllers').controller('loginController',['$scope','$http','$state',function($scope,$http,$state){ 
     ... 
    }]); 
}()); 

(function() { 
    angular.module('protonAppControllers').controller('surveyListController',['$scope','$http','LeftMenuService',function($scope,$http,LeftMenuService){ 
     ... 
    }]); 
}()); 

(function() { 
    'use strict'; 
    angular.module('protonAppControllers').controller('surveyHelpController',['$scope','$http','LeftMenuService',function($scope,$http,LeftMenuService){ 
     ... 
    }]); 
}()); 


(function() { 
    'use strict'; 
    angular.module('protonAppServices').service('LeftMenuService', function($http,$rootScope){ 
     ... 
    }); 
}()); 

संपादित

आगे खुदाई मैं $rootScope या $scope मेरी नियंत्रक फ़ाइलों

Answer 1

अपने मॉड्यूल इंजेक्शन में से किसी के अंदर उपयोग नहीं कर सकते आप $ गुंजाइश जोड़ने की जरूरत नहीं है का पता चलता है और $ http :

angular.module('protonAppServices', []); 

इन्हें नियंत्रक में इंजेक्ट करें लेकिन मॉड्यूल घोषणा में नहीं

Answer 2

1. पर आप जबकि एक मॉड्यूल घोषणा करते हुए आप @ThibauDL

2. उल्लेख के रूप में मैं आम तौर पर सिर्फ कोणीय एप्लिकेशन घोषणा से ऊपर मॉड्यूल की घोषणा पसंद करते हैं आप नियंत्रक में उन्हें इस्तेमाल कर सकते हैं कुछ भी सुई की आवश्यकता नहीं है।

मैं plnkr में अपने एक कोड है जो आप के लिए कैसे कोड का आयोजन किया जाना चाहिए के रूप में एक विचार देना चाहिए संशोधित किया है।

(function() { 
 
    'use strict'; 
 
    angular.module('protonAppControllers', []); 
 
    angular.module('protonAppServices', []); 
 

 
    var app = angular.module('protonApp', ['ui.router', 'protonAppControllers', 'protonAppServices']); 
 

 
    app.config(['$stateProvider', '$urlRouterProvider', 
 
    function($stateProvider, $urlRouterProvider) { 
 
     //... 
 
    } 
 
    ]); 
 

 
    app.value('debug', true); 
 

 
    app.run(function($rootScope, $state, $http, debug, LeftMenuService) { 
 
    //... 
 
    }); 
 
}()); 
 

 

 
(function() { 
 
    'use strict'; 
 
    angular.module('protonAppServices').service('LeftMenuService', function($http, $rootScope) { 
 
    //... 
 
    }); 
 
}()); 
 

 
(function() { 
 
    'use strict'; 
 
    angular.module('protonAppControllers').controller('loginController', ['$scope', '$http', '$state', 
 
    function($scope, $http, $state) { 
 
     $scope.login = "Hi Please login!"; 
 
     // ... 
 
    } 
 
    ]); 
 
}()); 
 

 
(function() { 
 
    angular.module('protonAppControllers').controller('surveyListController', ['$scope', '$http', 'LeftMenuService', 
 
    function($scope, $http, LeftMenuService) { 
 
     //... 
 
    } 
 
    ]); 
 
}()); 
 

 
(function() { 
 
    'use strict'; 
 
    angular.module('protonAppControllers').controller('surveyHelpController', ['$scope', '$http', 'LeftMenuService', 
 
    function($scope, $http, LeftMenuService) { 
 
     $scope.test = "Hxxxxi"; 
 
     //... 
 
    } 
 
    ]); 
 
}());

<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<body ng-app="protonApp"> 
 
    <div ng-controller="loginController"> 
 
    <input type="text" ng-model='login' /> 
 
    </div> 
 
</body>

इसके अलावा, आप अब उन्हें अलग फ़ाइलों में जगह के रूप में आप चाहते थे सकता है।

उम्मीद है कि मदद करता है।