कैसे कोणीय बनाता है और चलाता है

Question

बस सीखना चाहते हैं कि कैसे कोणीय पर्दे के पीछे बनता है और चलाता है?

नीचे मैंने वही समझा जो इस प्रकार है। जानना चाहते हैं कि क्या मुझे कुछ याद आया।

कैसे कोणीय बनाता है

टाइपस्क्रिप्ट का उपयोग करके हमारे कोणीय एप्लिकेशन को कोड करने के बाद, हम ऐप बनाने के लिए कोणीय सीएलआई कमांड का उपयोग करते हैं।

ng buildकमांड एप्लिकेशन को आउटपुट डायरेक्टरी में संकलित करता है और बिल्ड कलाकृतियों को dist/डायरेक्टरी में स्टोर किया जाएगा ।

आंतरिक प्रक्रियाएं

1. कोणीय सीएलआई सभी जावास्क्रिप्ट और सीएसएस कोड को बनाने और बंडल करने के लिए वेबपैक चलाता है।

2. बदले में वेबपैक टाइपस्क्रिप्ट लोडर को कॉल करता है जो सभी .tsफाइल को कोणीय प्रोजेक्ट में लाते हैं और फिर उन्हें जावास्क्रिप्ट यानि एक .jsफाइल में ट्रांसपाइल्स करते हैं , जिसे ब्राउज़र समझ सकते हैं।

इस पोस्ट में कहा गया है कि कोणीय के दो संकलक हैं:

• संकलक देखें

• मॉड्यूल संकलक

बिल्ड पर सवाल

बिल्ड प्रक्रिया को कॉल करने का क्रम क्या है?

कोणीय सीएलआई पहले टाइपस्क्रिप्ट में लिखे गए कोणीय अंतर्निहित कंपाइलर को कॉल करता है => फिर टाइपस्क्रिप्ट ट्रांसपिलर => को कॉल करता है और फिर वेबपैक को dist/निर्देशिका में बंडल और स्टोर करने के लिए कहता है ।

कोणीय कैसे चलता है

जब निर्माण पूरा हो जाता है, तो हमारे सभी ऐप के घटकों, सेवाओं, मॉड्यूल आदि को JavaScript .jsफाइलों में स्थानांतरित कर दिया जाता है जिसका उपयोग ब्राउज़र में कोणीय अनुप्रयोग को चलाने के लिए किया जाता है।

कोणीय डॉक्स में कथन

1. जब आप के साथ bootstrap AppComponentवर्ग (main.ts में), कोणीय दिखता है एक के लिए <app-root>में index.html, यह पाता है, AppComponent का एक उदाहरण को दर्शाता है, और अंदर उसे रेंडर <app-root>टैग।

2. जैसे ही उपयोगकर्ता एप्लिकेशन के माध्यम से आगे बढ़ता है, कोणीय, अपडेट, और घटकों को नष्ट कर देता है।

रन पर सवाल

यद्यपि main.tsबूटस्ट्रैप प्रक्रिया को समझाने के लिए ऊपर दिए गए कथन में उपयोग किया जाता है, Isn't Angular app को बूटस्ट्रैप किया गया है या जावास्क्रिप्ट .jsफ़ाइलों का उपयोग शुरू किया गया है ?

क्या उपरोक्त सभी कथन जावास्क्रिप्ट .jsफ़ाइलों का उपयोग करके रनटाइम नहीं किए गए हैं ?

क्या किसी को पता है कि सभी भाग एक साथ गहराई में कैसे फिट होते हैं?

Answer 1

(जब मैं कहता हूँ कि कोणीय का अर्थ है कोणीय 2+ और स्पष्ट रूप से कोणीय-js कहूँगा यदि मैं कोणीय 1 का उल्लेख कर रहा हूँ)।

प्रस्तावना: यह भ्रामक है

कोणीय, और संभवतः अधिक सटीक रूप से कोणीय-क्लीव मिलकर जावास्क्रिप्ट में कई ट्रेंडिंग टूल शामिल हो गए हैं जो निर्माण प्रक्रिया में शामिल हैं। यह थोड़ा भ्रम की स्थिति पैदा करता है।

भ्रम को आगे बढ़ाने के लिए, इस शब्द compileका उपयोग अक्सर कोणीय-जेएस में किया जाता था ताकि टेम्पलेट के छद्म-html को लेने और इसे DOM तत्वों में बदलने की प्रक्रिया का उल्लेख किया जा सके। यह वह भाग है जो संकलक करता है लेकिन छोटे भागों में से एक।

सबसे पहले, कोणीय को चलाने के लिए टाइपस्क्रिप्ट, कोणीय-क्लि या वेबपैक का उपयोग करने की आवश्यकता नहीं है। तुम्हारे प्रश्न का उत्तर देने के लिए। हमें एक साधारण प्रश्न पर ध्यान देना चाहिए: "कोणीय क्या है?"

कोणीय: यह क्या करता है?

यह खंड विवादास्पद हो सकता है, हम देखेंगे। इसके मूल में, सेवा जो कोणीय प्रदान करती है, एक निर्भरता इंजेक्शन तंत्र है जो जावास्क्रिप्ट, HTML और सीएसएस पर काम करता है। आप सभी छोटे टुकड़ों और टुकड़ों को व्यक्तिगत रूप से लिखते हैं और प्रत्येक छोटे टुकड़े में आप अन्य टुकड़ों को संदर्भित करने के लिए कोणीय के नियमों का पालन करते हैं। कोणीय तो किसी भी तरह पूरी तरह से बुनता है।

(थोड़ा) अधिक विशिष्ट होना:

• टेम्पलेट HTML को जावास्क्रिप्ट घटक में वायर्ड करने की अनुमति देते हैं। यह उपयोगकर्ता को स्वयं डोम पर इनपुट देता है (उदाहरण के लिए एक बटन पर क्लिक करके) जावास्क्रिप्ट घटक में फ़ीड करने के लिए और जावास्क्रिप्ट में चर और संरचना को नियंत्रित करने के लिए जावास्क्रिप्ट घटक में चर की अनुमति देता है।
• जावास्क्रिप्ट कक्षाओं (जावास्क्रिप्ट घटकों सहित) को उन अन्य जावास्क्रिप्ट कक्षाओं के उदाहरणों तक पहुंचने में सक्षम होने की आवश्यकता होती है जो वे पर निर्भर करते हैं (जैसे शास्त्रीय निर्भरता इंजेक्शन)। एक BookListComponent को एक BookListService के एक उदाहरण की आवश्यकता होती है, जिसे किसी BookListPolicy के उदाहरण की आवश्यकता हो सकती है या ऐसा कुछ हो सकता है। इन वर्गों में से प्रत्येक के पास अलग-अलग जीवनकाल हैं (उदाहरण के लिए सेवाएं आमतौर पर एकल हैं, घटक आमतौर पर एकल नहीं होते हैं) और कोणीय को उन सभी जीवन काल, घटकों के निर्माण, और निर्भरता के तारों का प्रबंधन करना पड़ता है।
• सीएसएस नियमों को इस तरह से लोड करने की आवश्यकता है कि वे केवल डोम के एक सबसेट पर लागू होते हैं (एक घटक की शैली उस घटक के लिए स्थानीय है)।

ध्यान देने वाली एक महत्वपूर्ण बात यह है कि जावास्क्रिप्ट इस बात के लिए ज़िम्मेदार नहीं है कि कैसे जावास्क्रिप्ट फाइलें अन्य जावास्क्रिप्ट फ़ाइलों (जैसे importकीवर्ड) का संदर्भ देती हैं । वेबपैक द्वारा इसका ध्यान रखा जाता है।

कंपाइलर क्या करता है?

अब जब आप जानते हैं कि कोणीय क्या करता है, तो हम इस बारे में बात कर सकते हैं कि कंपाइलर क्या करता है। मैं मुख्य रूप से अज्ञानी होने के कारण बहुत तकनीकी होने से बचूंगा। हालांकि, एक निर्भरता इंजेक्शन प्रणाली में आप आमतौर पर मेटाडाटा किसी तरह का (जैसे कैसे करता है एक वर्ग कहते हैं के साथ अपने निर्भरता व्यक्त करने के लिए है I can be injected, My lifetime is blahया You can think of me as a Component type of instance)। जावा में, स्प्रिंग ने मूल रूप से XML फ़ाइलों के साथ ऐसा किया था। जावा ने बाद में एनोटेशन को अपनाया और वे मेटाडेटा को व्यक्त करने का पसंदीदा तरीका बन गए। मेटाडेटा को व्यक्त करने के लिए C # विशेषताओं का उपयोग करता है।

जावास्क्रिप्ट में इस मेटाडेटा बिलिन को उजागर करने के लिए एक महान तंत्र नहीं है। कोणीय-जेएस ने एक प्रयास किया और यह बुरा नहीं था लेकिन बहुत सारे नियम थे जो आसानी से जांचे नहीं जा सकते थे और थोड़ा भ्रमित थे। कोणीय के साथ मेटाडेटा को निर्दिष्ट करने के दो समर्थित तरीके हैं। आप शुद्ध जावास्क्रिप्ट लिख सकते हैं और मेटाडेटा को मैन्युअल रूप से निर्दिष्ट कर सकते हैं, कुछ हद तक कोणीय-जेएस के समान और बस नियमों का पालन करते हुए और अतिरिक्त बॉयलर-प्लेट कोड लिख रहे हैं। वैकल्पिक रूप से, आप टाइपस्क्रिप्ट पर स्विच कर सकते हैं, जैसा कि ऐसा होता है, सज्जाकार (वे @प्रतीक) होते हैं, जिनका उपयोग मेटाडेटा को व्यक्त करने के लिए किया जाता है।

तो यहाँ है जहाँ हम अंत में संकलक के लिए प्राप्त कर सकते हैं। कंपाइलर का काम उस मेटाडेटा को लेना है और काम करने वाले सिस्टम की प्रणाली बनाना है जो आपका एप्लिकेशन है। आप सभी टुकड़ों और सभी मेटाडेटा पर ध्यान केंद्रित करते हैं और कंपाइलर एक बड़ा इंटरकनेक्टेड एप्लिकेशन बनाता है।

कंपाइलर इसे कैसे करता है?

कंपाइलर के काम करने के दो तरीके हो सकते हैं, रनटाइम और फ़ॉर-ऑफ़-टाइम। यहाँ से मैं मान लूंगा कि आप टाइपस्क्रिप्ट का उपयोग कर रहे हैं:

• रनटाइम: जब टाइपस्क्रिप्ट कंपाइलर चलता है, तो यह सभी डेकोरेटर की जानकारी लेता है और इसे सजाए गए वर्गों, विधियों और क्षेत्रों से जुड़े जावास्क्रिप्ट कोड में बदल देता है। अपने में index.htmlआप अपने संदर्भ main.jsजो bootstrapविधि कहते हैं । वह विधि आपके शीर्ष स्तर के मॉड्यूल से गुजरती है।

बूटस्ट्रैप विधि रनटाइम कंपाइलर को फायर करती है और इसे उस टॉप लेवल मॉड्यूल का संदर्भ देती है। रनटाइम कंपाइलर तब उस मॉड्यूल को क्रॉल करना शुरू कर देता है, उस मॉड्यूल द्वारा संदर्भित सभी सेवाओं, घटकों, और संबंधित मेटाडेटा के सभी, और आपके एप्लिकेशन को बनाता है।

• एओटी: रनटाइम के सभी काम करने के बजाय एंगुलर ने बिल्ड टाइम पर ज्यादातर काम करने के लिए एक तंत्र प्रदान किया है। यह लगभग हमेशा एक वेबपैक प्लगइन का उपयोग करके किया जाता है (यह सबसे लोकप्रिय अभी तक ज्ञात सबसे कम एनपीएम पैकेजों में से एक होना चाहिए)। यह टाइपस्क्रिप्ट संकलन के चलने के बाद चलता है इसलिए यह अनिवार्य रूप से रनटाइम कंपाइलर के समान इनपुट को देखता है। एओटी कंपाइलर रनटाइम कंपाइलर की तरह ही आपके एप्लिकेशन को बनाता है लेकिन फिर इसे जावास्क्रिप्ट में वापस सेव कर देता है।

यहां लाभ सिर्फ यह नहीं है कि आप स्वयं संकलन के लिए आवश्यक सीपीयू समय बचा सकते हैं, लेकिन यह आपको अपने आवेदन के आकार को कम करने की भी अनुमति देता है।

विशिष्ट उत्तर

कोणीय CLI पहले टाइपस्क्रिप्ट => में लिखे कंपाइलर में निर्मित कोणीय को कॉल करता है, फिर टाइपस्क्रिप्ट ट्रांसपिलर => को कॉल करता है और फिर वेब / बंडल को डिस्ट / डायरेक्टरी में बंडल और स्टोर करने के लिए कहता है।

नहीं। कोणीय सीएलआई वेबपैक को बुलाता है (Angular CLI की वास्तविक सेवा वेबपैक को कॉन्फ़िगर कर रही है। जब आप ng buildइसे चलाते हैं तो यह एक प्रॉक्सी से अधिक नहीं है जो वेबपैक शुरू करने के लिए है)। वेबपैक पहले टाइपस्क्रिप्ट कंपाइलर को कॉल करता है, फिर कोणीय कंपाइलर (एओटी को मानते हुए), उसी समय आपके कोड को बंडल करते हुए।

यद्यपि बूटस्ट्रैप प्रक्रिया की व्याख्या करने के लिए main.ts का उपयोग स्टेटमेंट में किया गया है, क्या कोणीय ऐप बूटस्ट्रैप नहीं है या जावास्क्रिप्ट .js फ़ाइलों का उपयोग करना शुरू कर दिया है?

मैं पूरी तरह से निश्चित नहीं हूं कि आप यहां क्या पूछ रहे हैं। main.tsजावास्क्रिप्ट में नीचे स्थानांतरित किया जाएगा। उस जावास्क्रिप्ट में एक कॉल शामिल होगी, bootstrapजो कि कोणीय में प्रवेश बिंदु है। जब bootstrapकिया जाता है तो आपके पास अपना पूर्ण कोणीय अनुप्रयोग चल रहा होगा।

इस पोस्ट में कहा गया है कि कोणीय के दो संकलक हैं:

संकलक देखें

मॉड्यूल संकलक

सच कहूँ तो मैं यहाँ सिर्फ अज्ञानता का दावा करने जा रहा हूँ। मुझे लगता है कि हमारे स्तर पर हम इसे केवल एक बड़ा संकलक मान सकते हैं।

क्या किसी को पता है कि सभी भाग एक साथ गहराई में कैसे फिट होते हैं?

मुझे उम्मीद है कि उपरोक्त ने इसे संतुष्ट किया है।

@ मुझे नहीं: कोणीय निर्भरता इंजेक्शन से अधिक करता है

ज़रूर। यह रूटिंग, व्यू बिल्डिंग, चेंज डिटेक्शन और अन्य सभी प्रकार की चीजों को करता है। संकलक वास्तव में निर्माण और परिवर्तन का पता लगाने के लिए जावास्क्रिप्ट उत्पन्न करता है। मैंने झूठ बोला जब मैंने कहा कि यह सिर्फ निर्भरता इंजेक्शन था। हालांकि, निर्भरता इंजेक्शन कोर पर है और बाकी उत्तर को चलाने के लिए पर्याप्त है।

क्या हमें इसे कंपाइलर कहना चाहिए?

यह संभवतः बहुत अधिक पार्सिंग और लेक्सिंग करता है और निश्चित रूप से बहुत सारे कोड उत्पन्न करता है, इसलिए आप इसे उस कारण के लिए एक कंपाइलर कह सकते हैं।

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

Comments

विस्तृत उत्तर के लिए धन्यवाद। आपके उत्तर को स्वीकार करने से पहले मुझे The compiler does actually generate बिल्डिंग और चेंज डिटेक्शन देखने के लिए आपके स्टेटमेंट जावास्क्रिप्ट में संदेह है। `यह झूठ नहीं है। यही संकलक क्या नहीं है? और कोणीय निर्भरता इंजेक्शन करता है।

— शैजुत

हाँ क्षमा करें। जिस झूठ का मैं जिक्र कर रहा था, वह था "अपने मूल में, सेवा जो कि कोणीय प्रदान करती है, एक निर्भरता इंजेक्शन तंत्र है" क्योंकि जबकि कोणीय ऐसा करता है कि यह सब नहीं करता है और सभी कंपाइलर भी नहीं करते हैं।

— पेस

अगर कोणीय को घटकों, निर्देशों, सेवाओं और जैसी सुविधाओं के साथ एक नई "भाषा" के रूप में निरस्त किया जाता है। इसे कंपाइलर कहा जा सकता है। कच्चे जेएस और HTML में कोणीय भाषा की शिकायत करें।

— क्रिस बाओ

Answer 2

मुझे फिर से शुरू करने दें।

मेरे आवेदन में मैं सीधे से आवेदन चलाते हैं Webpack।

एप्लिकेशन को बनाने और चलाने के लिए हम webpack --progress और webpack-dev-server --inline कमांड का उपयोग करते हैं package.jsonजैसा कि नीचे लिखा गया है।

"scripts": {
    "serve": "webpack-dev-server --inline ",
    "build": "webpack --progress"

  }

जब हम webpack --progressकमांड चलाते हैं तो यह रीडिंग webpack.config.jsफाइल शुरू करता है जहां यह नीचे के रूप में प्रवेश बिंदु पाता है।

module.exports = {
    devtool: 'source-map',
    entry: './src/main.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
                exclude: [/\.(spec|e2e)\.ts$/]
            },
            /* Embed files. */
            {
                test: /\.(html|css)$/,
                loader: 'raw-loader',
                exclude: /\.async\.(html|css)$/
            },
            /* Async loading. */
            {
                test: /\.async\.(html|css)$/,
                loaders: ['file?name=[name].[hash].[ext]', 'extract']
            },
        ]
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}   

और फिर यह सभी Typescriptफाइल को पढ़ता है और फाइल में घोषित नियमों के आधार पर संकलन करता है और इसे tsconfig.jsonसंबंधित .jsफाइलों में परिवर्तित करता है और यह मैप फाइल है।

यदि यह किसी संकलन त्रुटि के बिना चलता है तो यह आउटपुट अनुभाग bundle.jsमें घोषित नामों के साथ फाइल बनाएगा Webpack।

अब मैं समझाता हूं कि हम लोडर का उपयोग क्यों करते हैं।

भयानक-टाइपस्क्रिप्ट-लोडर, कोणीय 2-टेम्प्लेट-लोडर हम इन लोडर का उपयोग Typescriptफाइल में घोषित आधार पर फाइल को संकलित करने के लिए करते हैं और कोणीय 2 tsconfig.json-टेम्पलेट-लोडर कोणीय 2 के घटक के अंदर templateUrlऔर styleUrlsघोषणा के लिए खोज करता है और इसी के साथ रास्तों को बदलता है बयान की आवश्यकता है।

resolve: {
        extensions: ['.ts', '.js']
    }

हम फ़ाइल Webpackको बदलने के Typescriptलिए बताने के लिए रिज़ॉल्यूशन सेक्शन का उपयोग करते हैंJavaScript

plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]

प्लगइन्स अनुभाग का उपयोग तीसरे पक्ष के ढांचे या फ़ाइल को इंजेक्ट करने के लिए किया जाता है। अपने कोड में मैं इसका उपयोग index.htmlगंतव्य फ़ोल्डर को इंजेक्ट करने के लिए कर रहा हूं ।

 devtool: 'source-map',

Typescriptब्राउज़र में फ़ाइल को देखने के लिए ऊपर लाइन का उपयोग किया जाता है और इसे ज्यादातर डेवलपर कोड के लिए उपयोग किया जाता है।

 loader: 'raw-loader'

उपरोक्त raw-loaderका उपयोग फ़ाइल और फ़ाइल को लोड करने .htmlऔर फ़ाइलों .cssके साथ बंडल करने के लिए किया जाता Typescriptहै।

अंत में जब हम webpack-dev-server चलाते हैं - तो यह स्वयं सर्वर और बूट-अप एप्लिकेशन को web-pack.config.jsफ़ाइल में बताए गए पथ के रूप में बनाएगा जहाँ हमने गंतव्य फ़ोल्डर और प्रविष्टि बिंदु का उल्लेख किया था।

में Angularसबसे आवेदन के 2 प्रवेश बिंदु है main.tsजहां हम उदाहरण (app.module) की आरंभिक बूटस्ट्रैप मॉड्यूल का उल्लेख इस मॉड्यूल ऐसे सभी निर्देश, सेवा, मॉड्यूल, घटकों और पूरे आवेदन के मार्ग कार्यान्वयन के रूप में पूरा आवेदन जानकारी होती है।

नोट: बहुत से लोगों को संदेह है कि index.htmlकेवल एप्लिकेशन को ही बूट क्यों किया जाता है, भले ही उन्होंने कोई उल्लेख नहीं किया हो। इसका उत्तर यह है कि जब Webpackसर्व कमांड चलता है तो यह स्वयं की सेवा प्रदान करता है और डिफ़ॉल्ट रूप से यह लोड होता है index.htmlयदि आपने किसी भी डिफ़ॉल्ट पृष्ठ का उल्लेख नहीं किया है।

मुझे उम्मीद है कि दी गई जानकारी से कुछ लोगों को मदद मिलेगी।

Comments

सराहना की आपने समझाने की कोशिश की है, बेहतर होगा कि आप अधिक स्पष्ट अनुक्रमिक तरीके से समझा सकें। इसलिए आप ऐप्स Angular CLIबनाने के लिए उपयोग नहीं करते Angularहैं और Webpackसीधे कैसे उपयोग करते हैं?

— शैजुत

Answer 3

कैसे बनता है कोणीय?

Angular CLIकॉल Webpack, जब Webpackएक हिट .tsयह यह करने के लिए बंद गुजरता फ़ाइल TypeScriptसंकलक जो एक उत्पादन ट्रांसफॉर्मर जो संकलित है Angularटेम्पलेट्स

तो निर्माण अनुक्रम है:

Angular CLI=> Webpack=> TypeScriptसंकलक => TypeScriptसंकलक Angularसंकलन समय में संकलक को बुलाता है ।

कोणीय कैसे चलता है?

Angularबूटस्ट्रैप और Javascriptफ़ाइल का उपयोग करके चलाता है ।

दरअसल बूटस्ट्रैप प्रक्रिया रनटाइम होती है और ब्राउज़र खोलने से पहले होती है। यह हमें हमारे अगले सवाल पर ले जाता है।

तो अगर बूटस्ट्रैप प्रक्रिया Javascriptफ़ाइल के साथ होती है तो बूटस्ट्रैप प्रक्रिया को समझाने के लिए Angularडॉक्स main.tsटाइपस्क्रिप्ट फ़ाइल का उपयोग क्यों करते हैं?

Angularडॉक्स सिर्फ .tsस्रोत के बारे में फाइलों के बारे में बात करते हैं ।

यह संक्षिप्त उत्तर है। अगर कोई गहराई से जवाब दे सकता है, तो उसकी सराहना करें।

चैट में मेरे सवालों के जवाब देने के लिए क्रेडिट @ विषाक्त जाता है ।

Answer 4

इस उत्तर के लिए देर हो सकती है, लेकिन इस विषय के बारे में हाल ही में एक अच्छी बात हुई है, जो एक शुरुआती दृष्टिकोण से शुरू होती है और गहराई में जाती है। मेरे शब्दों के साथ इस सूत्र में गलत सूचना को संक्षेप में प्रस्तुत करने या इंगित करने के बजाय, मैं सिर्फ कारा एरिकसन द्वारा वीडियो लिंक करूंगा : हाउंगुलर कैसे काम करता है ।

वह कोणीय ढांचे पर टेक लीड है, और इस पर वास्तव में अच्छी प्रस्तुति है:

• कोणीय ढांचे के मुख्य भाग क्या हैं
• कंपाइलर कैसे काम करता है, इसका क्या उत्पादन होता है
• "घटक परिभाषा" क्या है
• एप्लिकेशन बूटस्ट्रैप क्या है, यह कैसे काम करता है

Comments

योगदान के लिए धन्यवाद :), सराहना।

— शाइजुत

Answer 5

इसलिए यदि बूटस्ट्रैप प्रक्रिया जावास्क्रिप्ट फ़ाइल के साथ होती है तो क्यों एंगुलर डॉक्स बूटस्ट्रैप प्रक्रिया को समझाने के लिए main.ts टाइपस्क्रिप्ट फ़ाइल का उपयोग करता है?

यह रूपांतरित .js के मुख्य संस्करण का एक हिस्सा है, ng buildजिसके द्वारा उत्सर्जित किया गया है, जो अभी तक कुरूप और छोटा नहीं है, आप इस कोड को शुरू करने के लिए शुरुआत की उम्मीद कैसे करते हैं? क्या यह बहुत जटिल नहीं लगता है?

Object(__WEBPACK_IMPORTED_MODULE_1__angular_platform_browser_dynamic__["a" /* platformBrowserDynamic */])().bootstrapModule(__WEBPACK_IMPORTED_MODULE_2__app_app_module__["a" /* AppModule */])
    .catch(function (err) { return console.log(err); });

और ng build --prod --build-optimizerजिसके साथ इसे अनुकूलित करने के लिए आपके कोड को बदसूरत और छोटा करता है, उत्पन्न बंडल कॉम्पैक्ट होते हैं और बिट-अपठनीय प्रारूप में होते हैं।

webpackJsonp([1],{0:function(t,e,n){t.exports=n("cDNt")},"1j/l":function(t,e,n){"use strict";n.d(e,"a",function(){return r});var r=Array.isArray||function(t){return t&&"number"==typeof t.length}},"2kLc

जबकि main.ts फ़ाइल मानव पठनीय और आकर्षक है, इसीलिए कोणीय अनुप्रयोग की बूटस्ट्रैप प्रक्रिया को समझाने के लिए angular.io main.ts का उपयोग करता है। कोणीय: टाइपस्क्रिप्ट क्यों? इसके अलावा अगर आप इतने बड़े ढांचे के लेखक थे, तो अपने ढांचे को लोकप्रिय और उपयोगकर्ता के अनुकूल बनाने के लिए आपने किस दृष्टिकोण का उपयोग किया होगा? क्या आप एक जटिल के बजाय स्पष्ट और संक्षिप्त विवरण के लिए नहीं जाएंगे? मैं मानता हूं कि कोणीय.आईओ दस्तावेज में गहराई से स्पष्टीकरण का अभाव है और यह बहुत अच्छा नहीं है लेकिन जहां तक ​​मैंने देखा है कि वे इसे बेहतर बनाने के लिए कड़ी मेहनत कर रहे हैं।

Answer 6

कोणीय 9+ एओटी (समय संकलन के आगे) का उपयोग करता है, जिसका अर्थ है कि यह विभिन्न फाइलों अर्थात घटक ((.ts + .html + .css), मॉड्यूल (.ts) में बिखरे हुए सभी बिट्स को लेता है और ब्राउज़र समझ योग्य जावास्क्रिप्ट का निर्माण करता है जो रनटाइम पर डाउनलोड किया जाता है। और ब्राउज़र द्वारा निष्पादित।

कोणीय 9 से पहले यह JIT था (बस समय संकलन में) जहां कोड को संकलित किया गया था क्योंकि यह ब्राउज़र द्वारा आवश्यक था।

विवरण के लिए देखें: कोणीय एओटी डॉक्यूमेंटन