पहले से बूटस्ट्रैप किए गए एप्लिकेशन पर निर्भरता फिर से खोलें और जोड़ें


89

क्या पहले से बूटस्ट्रैप्ड कोणीय मॉड्यूल के लिए देर से निर्भरता को इंजेक्ट करने का एक तरीका है? यहाँ मेरा मतलब है:

कहें कि मेरे पास साइट-व्यापी कोणीय ऐप है, जिसे इस प्रकार परिभाषित किया गया है:

// in app.js
var App = angular.module("App", []);

और हर पेज में:

<html ng-app="App">

बाद में, मैं वर्तमान पृष्ठ की जरूरतों के आधार पर तर्क जोड़ने के लिए ऐप को फिर से खोल रहा हूं:

// in reports.js
var App = angular.module("App")
App.controller("ReportsController", ['$scope', function($scope) {
  // .. reports controller code
}])

अब, (जैसे कहते हैं कि तर्क के उन लोगों पर मांग बिट्स की है कि एक भी अपने स्वयं निर्भरता की आवश्यकता है ngTouch, ngAnimate, ngResource, आदि)। मैं उन्हें आधार ऐप से कैसे जोड़ सकता हूं? यह काम नहीं लगता है:

// in reports.js
var App = angular.module("App", ['ui.event', 'ngResource']); // <-- raise error when App was already bootstrapped

मुझे एहसास है कि मैं सब कुछ पहले से कर सकता हूं, अर्थात -

// in app.js
var App = angular.module("App", ['ui.event', 'ngResource', 'ngAnimate', ...]);

या हर मॉड्यूल को अपने आप परिभाषित करें और फिर सब कुछ मुख्य ऐप में इंजेक्ट करें ( अधिक के लिए यहां देखें ):

// in reports.js
angular.module("Reports", ['ui.event', 'ngResource'])
.controller("ReportsController", ['$scope', function($scope) {
  // .. reports controller code
}])

// in home.js
angular.module("Home", ['ngAnimate'])
.controller("HomeController", ['$scope', '$http', function($scope, $http){
  // ...
}])

// in app.js, loaded last into the page (different for every page that varies in dependencies)
var App = angular.module("App", ['Reports', 'Home'])

लेकिन इसके लिए मुझे वर्तमान पृष्ठ की निर्भरता के साथ हर बार ऐप को इनिशियलाइज़ करना होगा।

मैं बुनियादी शामिल करने के लिए पसंद करते हैं app.jsहर पृष्ठ में और केवल प्रत्येक पृष्ठ (करने के लिए आवश्यक एक्सटेंशन परिचय reports.js, home.js,, आदि) मैं जोड़ने बूटस्ट्रैपिंग तर्क हर या निकालें कुछ को संशोधित करने के बिना।

क्या ऐप पर पहले से बूटस्ट्रैप होने पर निर्भरता का परिचय देने का एक तरीका है? ऐसा करने के लिए मुहावरेदार तरीका (या तरीके) माना जाता है? मैं बाद वाले समाधान की ओर झुक रहा हूं, लेकिन यह देखना चाहता हूं कि क्या मेरे द्वारा वर्णित तरीका भी हो सकता है। धन्यवाद।


क्या आप मुझे अपना अंतिम काम कोड देख सकते हैं?
मंगू सिंह राजपुरोहित

@ user2393267 mmm, इतना लंबा समय हो गया है, मुझे कोई पता नहीं है अगर मेरे पास अभी भी वह कोड है ... क्षमा करें। मुझे लगता है कि मैंने आखिरकार डिजाइन को फिर से तैयार कर लिया है, क्योंकि आमतौर पर जब मुझे चीजों को हैक करना होता है तो इसका मतलब है कि मैं इसे सही नहीं कर रहा हूं ... हालांकि, अगर आप अभी भी इस दृष्टिकोण को आगे बढ़ाने के लिए दृढ़ हैं, तो नीचे दिया गया जवाब एक अच्छा नेतृत्व लगता है ।
sa125

जवाबों:


115

मैंने इसे इस तरह हल किया:

एप्लिकेशन को फिर से देखें:

var app = angular.module('app');

फिर अपनी नई आवश्यकताओं को आवश्यकताओं की ओर धकेलें:

app.requires.push('newDependency');

3
यह मेरे लिए +1 का काम करता है। मैंने इसे ऐप्पल की तरह कई निर्भरता के लिए उपयोग किया है। app.requires.push ('doctorCtrl', 'doctorService');
अमीर

8
इससे मेरी वास्तुकला बच गई।
सईद नेमाटी

3
यह मेरे लिए काम नहीं कर रहा है। मैं निर्भरता गतिशील रूप से वर्णित के रूप में जोड़ रहा हूँ, लेकिन कोणीय अभी भी जोड़ा मॉड्यूल से एक सेवा नहीं मिल सकता है।
स्लाव फोमिन II

6
और app.requiresएक सरणी है, इसलिए यदि आप कई निर्भरता जोड़ रहे हैं (जैसा कि आपके रिपोर्ट उदाहरण में), तो आप उन्हें pushविधि के अलग-अलग तर्कों के रूप में पास करते हैं : app.requires.push('ui.event', 'ngResource');या यदि आपकी अतिरिक्त निर्भरता पहले से ही एक सरणी है:Array.prototype.push.apply(app.requires, ['ui.event', 'ngResource'])
लाल मटर

2
मैं कभी-कभी मतदान छोड़ देता हूं क्योंकि मैं इस बार लॉगिन नहीं करना चाहता हूं! धन्यवाद!
CularBytes

12

सरल ... इस तरह के गेटर का उपयोग करके मॉड्यूल का एक उदाहरण प्राप्त करें: var app = angular.module ("App");

फिर इस तरह "आवश्यकता" संग्रह में जोड़ें: app.requires [app.requires.length] = "ngResource";

वैसे भी, यह मेरे लिए काम किया। सौभाग्य!


4
यह मेरे लिए काम किया! मेरा एक प्रश्न है - क्यों न उपयोग किया जाए: app.requires.push ("ngResource")?
फिलिप मुनिन

9

कोणीय जेएस गूगल समूह के इस प्रस्ताव के अनुसार यह कार्यक्षमता इस क्षण के रूप में मौजूद नहीं है। उम्मीद है कि कोर टीम इस कार्यक्षमता को जोड़ने का फैसला करती है, खुद इसका इस्तेमाल कर सकती है।


4
हां, यह उन लोगों के लिए विशेष रूप से उपयोगी है जो एसपीए का निर्माण नहीं करना चाहते हैं।
नियमित

4

यदि आप एक ही बार में कई निर्भरताएँ जोड़ना चाहते हैं, तो आप उन्हें निम्न प्रकार से पास कर सकते हैं:

<script>
    var app = angular.module('appName');
    app.requires.push('dependencyCtrl1', 'dependencyService1');
</script>

4

मुझे पता है कि यह एक पुराना सवाल है, हालांकि, अभी तक कोई भी काम करने वाला उत्तर प्रदान नहीं किया गया है, इसलिए मैंने इसे साझा करने का निर्णय लिया कि मैंने इसे कैसे हल किया।

समाधान के लिए कोणीय को forking की आवश्यकता होती है, इसलिए आप CDN का उपयोग नहीं कर सकते। हालांकि संशोधन बहुत छोटा है, इसलिए मुझे आश्चर्य है कि यह सुविधा कोणीय में मौजूद क्यों नहीं है।

मैंने Google समूहों के लिंक का अनुसरण किया जो इस प्रश्न के अन्य उत्तरों में से एक में प्रदान किया गया था । वहाँ मुझे निम्नलिखित कोड मिला, जिससे समस्या हल हो गई:

instanceInjector.loadNewModules = function (mods) {
  forEach(loadModules(mods), function(fn) { instanceInjector.invoke(fn || noop); });
};

जब मैंने इस कोड को कोणीय 1.5.0 स्रोत कोड ( createInjectorफ़ंक्शन के अंदर , return instanceInjector;कथन से पहले ) में 4414 पंक्ति में जोड़ा , तो इसने मुझे बूटस्ट्रैपिंग के बाद निर्भरता जोड़ने में सक्षम किया $injector.loadNewModules(['ngCookies']);


? उच्चतम-मत वाले उत्तर (6/26/2017 के अनुसार) में क्या गलत है ? ऐसा लगता है कि इसे पोस्ट करने से पहले आपको एक वर्ष से अधिक प्रदान किया गया था; क्या आपके जवाब का कुछ फायदा है?
लाल मटर

@ TheRedPea इसके साथ कुछ भी गलत नहीं है, सिवाय इसके कि इसने मेरी समस्या का समाधान नहीं किया, लेकिन इस जवाब ने किया
tjespe

और यह आपके लिए काम नहीं करता है, क्योंकि मैं अनुमान लगा रहा हूं, आपने पहले ही अपने ऐप को बूट कर लिया था? मैंने यह भी देखा ...
द रेड मटर

2
Google समुदाय पोस्ट को लिंक करने के बाद पढ़ने के बाद, मैं और भी निश्चित हूं कि बूटस्ट्रैपिंग एक कारण है जैसे कि यह आवश्यक है। अपवोटिंग क्योंकि मूल प्रश्न एक "पहले से बूटस्ट्रैप्ड एप्लिकेशन" के बारे में पूछा गया था, जिसे कोई और नहीं संबोधित करता है (वास्तव में ओपी के पास मिसपोकेन हो सकता है)
लाल मटर

1

संस्करण 1.6.7 के बाद से ऐप का उपयोग करके बूटस्ट्रैप किए जाने के बाद अब लोड मॉड्यूल को चलाना संभव है $injector.loadNewModules([modules])। नीचे एक उदाहरण AngularJS प्रलेखन से लिया गया है:

app.factory('loadModule', function($injector) {
   return function loadModule(moduleName, bundleUrl) {
     return getScript(bundleUrl).then(function() { $injector.loadNewModules([moduleName]); });
   };
})

LoadNewModules के बारे में कृपया पूर्ण प्रलेखन पढ़ें क्योंकि इसके आसपास कुछ हैं।

Omkadiri द्वारा ui- राउटर के साथ इसका उपयोग करते हुए एक बहुत अच्छा नमूना ऐप भी है ।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.