2015-05-22 8 views
5

मैं एक बहुत जटिल अनुप्रयोग का निर्माण करने की कोशिश कर रहा हूँ। इस ऐप में अपने स्वयं के संबंधित मॉड्यूल में कई अलग-अलग राज्य, कॉन्फ़िगरेशन और रन ब्लॉक शामिल हैं। मैंने सोचा कि इन मॉड्यूल को एक साथ बांधने का एक अच्छा तरीका उन्हें मुख्य app मॉड्यूल में इंजेक्ट करना होगा जिसमें सभी इंजेक्शन मॉड्यूल होंगे। इस विशिष्ट मामले में, subapp इंजेक्शन, बाल मॉड्यूल है।AngularJS बच्चे मॉड्यूल चलाने और config ब्लॉक माता पिता मॉड्यूल में एक मॉड्यूल इंजेक्शन और का उपयोग कर

मैं हालांकि बाहर लग रहा है, कि subapp के रन और config ब्लॉक नहीं चला रूप में यदि वे अपने माता-पिता थे, मुझे का प्रदर्शन करते हैं तो नीचे दिए गए कि:

एचटीएमएल

<html ng-app="app"> 
    <body> 
    <a href="#/thestate">Head to the state!</a> 
    <ui-view></ui-view> 
    </body> 

</html> 

जे एस

angular.module('app', ['ui.router', 'subapp']); 

angular.module('subapp', ['ui.router']) 
    .run(function($rootScope, $state) { 
     $rootScope.$on('$stateChangeStart', function(event, toState) { 
      if (toState.name === "theState") { 
       event.preventDefault(); 
       $state.go('theState.substate', { 
        param: 1 
       }); 
      } 
     }); 
    }) 
.config(function($stateProvider, $urlRouterProvider) { 
$stateProvider.state('theState', { 
     url: '/thestate', 
     template: '<div>this is the main state</div>' + 
     '<a href="#/thestate/12">Go to state.substate</a>' + 
     '<ui-view></ui-view>' 
    }) 
    .state('theState.substate', { 
     url: '/:param', 
     template: '<div>{{id}}</div>', 
     controller: function($scope, $stateParams) { 
      $scope.id = $stateParams.param; 
      } 
    }); 
$urlRouterProvider.otherwise('/'); 
}); 

अनिवार्य रूप से, मैं subapp लेकिन उपयोग की .run और .config कार्यों को चलाने के लिए कोणीय पाने के लिए कोशिश कर रहा हूँ तत्काल में <html ng-app="app">

<a href="#/thestate"> पर नेविगेट करने का प्रयास करने पर, कुछ भी नहीं होता है। यह काम करता है, जाहिर है, अगर मैं <html ng-app="subapp"> साथ <html ng-app="app> की जगह है, लेकिन यह मेरे जैसे कुछ करने के लिए अनुमति नहीं होगी, angular.module('app', ['ui.router', 'subapp', 'subapp2' ...]);

तो, मेरे सवाल का, यही वजह है कि इस काम (यानी, शायद .run केवल रन है नहीं है एक बार, और केवल एचटीएमएल में मॉड्यूल से मॉड्यूल से), और इस तरह कुछ मॉड्यूलर से संपर्क करने का सबसे अच्छा तरीका क्या है?

धन्यवाद एक गुच्छा!

संपादित करें **

Plnkr: http://plnkr.co/edit/UCWc2cByHHjNgqAE8P7L?p=preview

+0

क्या आप वाकई अपना कोड काम नहीं कर रहे हैं? मैं कहूंगा कि आप इसे बनाते हैं .. यह काम कर रहा है - इसे यहां देखें [#/thestate/12] (http://run.plnkr.co/plunks/UCWc2cByHHjNgqAE8P7L/#/thestate/12) –

+0

दरअसल, आपका प्लंकर लगता है मुझे –

+0

के लिए काम करने के लिए क्षमा याचना-मैं मुख्य '' 'app''' मॉड्यूल में' '' .run''' ब्लॉक बाहर uncommented है और सब कुछ खुशी से फिर^_^टूट गया है। http: // plnkr।सह/संपादन/UCWc2cByHHjNgqAE8P7L? पी = पूर्वावलोकन –

उत्तर

2

वहाँ updated plunker

मुख्य मॉड्यूल के .run() के साथ ही इस मुद्दे []

.run(['$rootScope', '$state', '$stateParams', 
    function($rootScope, $state, $stateParams) { 
     $rootScope.$state = $state; 
     $rootScope.$stateParams = $stateParams; 
    }]) 

मूल कोड स्निपेट याद आ रही है है :

.run('$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) { 
     $rootScope.$state = $state; 
     $rootScope.$stateParams = $stateParams; 
    }) 

नहीं कर रहा है क्या कोणीय उम्मीद करेंगे

.run(['param1', 'param2', ... , function(param1, param2, ...) {}] 
+1

कहानी का सबक: कोणीय में कुछ भी संभव है (और हमेशा अपने वाक्यविन्यास की जांच सुनिश्चित करें)। :-) –

+1

बढ़िया आपने इसे बनाया! ;) उस हीरा यूआई-राउटर के साथ खेलना जारी रखें;) –

+1

धन्यवाद रैडिम! :-) तो यह सुनिश्चित करना सुरक्षित है कि ''' .run''' ब्लॉक की संख्या को चलाने के लिए सुरक्षित है केवल आपके द्वारा इंजेक्ट किए गए मॉड्यूल की संख्या तक ही सीमित है? –

1

वहाँ अपने कोड में एक त्रुटि है, समारोह की उम्मीद कर चलते हैं, लेकिन आप स्ट्रिंग बजाय

से पहले

.run('$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) { 
    $rootScope.$state = $state; 
    $rootScope.$stateParams = $stateParams; 
}) 

के बाद प्रदान करते हैं

.run(['$rootScope', '$state', '$stateParams', function($rootScope, $state, $stateParams) { 
    $rootScope.$state = $state; 
    $rootScope.$stateParams = $stateParams; 
}]) 
संबंधित मुद्दे