कोणीय 1.x और ES5

Question

के साथ वेबपैक ब्राउज़रइफ़ बनाम वेबपैक के बारे में सैकड़ों लाइनों को पढ़ने के बाद और दोनों के बारे में मैंने वेबपैक के लिए जाने का फैसला किया। इसका मुख्य कारण यह है क्योंकि मुझे सब कुछ एक जेएस फ़ाइल में बंडल करने का विचार पसंद आया।

मेरे पास एक कोणीय परियोजना पहले से ही काम कर रही है और मैं इसे वेबपैक के लिए दोबारा प्रतिक्रिया देना चाहता हूं। समस्या? मेरी परियोजना कोणीय 1.4.7, एनजी-एनिमेट और सादा जावास्क्रिप्ट (ES5) का उपयोग कर रही है और सभी ट्यूटोरियल और मैनुअल ES6 के लिए हैं। मैं अपनी परियोजना को फिर से काम नहीं करना चाहता हूं। जाने का रास्ता क्या है? मैं प्रत्येक कोणीय मॉड्यूल का एक उदाहरण चाहूंगा: फैक्ट्री, निर्देश, नियंत्रक और इसी तरह। बहुत धन्यवाद

Answer 1

मेरे पास आमतौर पर एक सुविधा.module.js फ़ाइल है जिसमें मेरी मॉड्यूल परिभाषा है और मॉड्यूल के भीतर निहित सभी निर्देश/सेवाओं की आवश्यकता होती है। बाहरी निर्भरता भी है।

/* module.js */ 
 
angular.module('my.module',['dependancy1', 'dependancy2']); 
 

 
//External libraries 
 
require('./dependancy1.module.js'); 
 
require('./dependancy2.module.js'); 
 

 
//Internal components 
 
require('./thing.directive'); 
 
require('./thing.service'; 
 

 
 
/* service.js */ 
 
angular.module('my.module') 
 
    .directive('yourDir', function myDir(){...}); 
 
              
 
             

Answer 2

मैं यह करने के लिए करते हैं:

app.js:

require('/any/angular/deps'); 
var subModule = require('/some/sub/module'); 

var app = angular.module('myApp', []); 

// pass the app module in sub modules to allow them to define their own config 
subModule.configure(app); 

/subModule/module.js:

var someSubDirective = require('./subDir/directive'); 

export function configure(app) { 

    someSubDirective.configure(app); 

} 

/subModule/subDir/directive.js:

export function configure(app) { 
    app.directive('myDir', myDir); 
} 

function myDir() { 

} 

मेरा विचार सभी उप मॉड्यूल को अपने स्वयं के विन्यास को संभालने, इसलिए config या constant, factories या providers घोषित करने देना है। इसे ऐप.जे.एस. तक बुलबुला करना इसका मतलब है कि आपकी संरचना से फ़ोल्डर को हटाना वास्तव में आसान है, क्योंकि यह इसके मूल मॉड्यूल से एक लाइन हटाने है।

यह प्रासंगिक फ़ाइल पथ को बहुत छोटा और आसान संभालने में भी बनाता है।

Answer 3

अब मैं एक ही समस्या से निपट रहा हूं। और मुझे कुछ ऐसा लगता है जो काम करता है (प्रगति पर काम करता है, लेकिन कम से कम मैं प्रगति देख सकता हूं)। मेरे कदम:

1. स्थापित yeoman
2. भागो this angular-webpack generator। 'ES5' का चयन करें जब उनसे पूछा गया (दूसरा विकल्प 'ES2015' है, जो मुझे लगता है कि एक ही है कि 'ES6')
3. प्रारंभ अपने कोणीय कोड के साथ स्वचालित रूप से उत्पन्न बॉयलरप्लेट संशोधित

हाँ, तुम अब भी जरूरत है गल्प और सास के बारे में जानने के लिए, लेकिन कम से कम आप पुराने ES5 वाक्यविन्यास का उपयोग करके एक साधारण AngularJS ऐप चला सकते हैं, और इसे संशोधित करना प्रारंभ कर सकते हैं।

मैं शायद इस बारे में ब्लॉगिंग कर रहा हूं। तो, मैं इस जवाब को तब अपडेट कर दूंगा।