কৌণিক কীভাবে তৈরি করে এবং চালায়

Question

শুধু শিখতে চান কীভাবে আঙ্গুলগুলি পর্দার আড়ালে চলে এবং চালায়?

নীচে আমি এতদূর যা বুঝেছিলাম তা নীচে is আমি কিছু মিস করেছি কিনা তা জানতে চাই।

কৌণিক কীভাবে তৈরি করে

টাইপস্ক্রিপ্ট ব্যবহার করে আমাদের কৌণিক অ্যাপ্লিকেশন কোড করার পরে, আমরা অ্যাপ্লিকেশনটি তৈরি করতে কৌনিক সিএলআই কমান্ডটি ব্যবহার করি।

ng buildকমান্ড অ্যাপ্লিকেশনটিকে একটি আউটপুট ডিরেক্টরিতে সংকলন করে এবং বিল্ড আর্টফিটগুলি dist/ডিরেক্টরিতে সংরক্ষণ করা হবে ।

অভ্যন্তরীণ প্রক্রিয়া

1. কৌনিক সিএলআই সমস্ত জাভাস্ক্রিপ্ট এবং সিএসএস কোড তৈরি এবং বান্ডিল করতে ওয়েবপ্যাক চালায়।

২. পরিবর্তে ওয়েবপ্যাক টাইপস্ক্রিপ্ট লোডারগুলিকে কল করে যা .tsকৌণিক প্রকল্পে সমস্ত ফাইল আনবে এবং তারপরে সেগুলি জাভাস্ক্রিপ্টে অর্থাৎ কোনও .jsফাইলে স্থানান্তর করে , যা ব্রাউজারগুলি বুঝতে পারে।

এই পোস্টটি বলে যে কৌণিকের দুটি সংকলক রয়েছে:

• সংকলক দেখুন

• মডিউল সংকলক

বিল্ড উপর প্রশ্ন

বিল্ড প্রক্রিয়া কল করার ক্রম কি?

কৌণিক সিএলআই প্রথমে টাইপস্ক্রিপ্টে লিখিত কৌনিক অন্তর্নির্মিত সংকলককে কল করে => তারপরে টাইপস্ক্রিপ্ট ট্রান্সপ্লেলার => কল করে তারপরে ওয়েবপ্যাকটিকে dist/ডিরেক্টরিতে বান্ডিল এবং সঞ্চয় করতে কল করে ।

কৌণিক কীভাবে চলে

বিল্ডটি সম্পূর্ণ হয়ে গেলে, আমাদের অ্যাপ্লিকেশনটির সমস্ত উপাদান, পরিষেবাদি, মডিউল ইত্যাদি JavaScript .jsফাইলগুলিতে স্থানান্তরিত হয় যা ব্রাউজারে কৌণিক অ্যাপ্লিকেশন চালাতে ব্যবহৃত হয়।

কৌনিক ডক্সে বিবৃতি

1. যখন আপনার সাথে বুটস্ট্র্যাপ AppComponentশ্রেণী (main.ts মধ্যে), কৌণিক সৌন্দর্য একটি জন্য <app-root>মধ্যে index.html, এটা খুঁজে বের করে, AppComponent একটি দৃষ্টান্ত instantiates, এবং ভিতরে এটা রেন্ডার <app-root>ট্যাগ।

2. কৌণিক ব্যবহারকারীর প্রয়োগের মাধ্যমে পদক্ষেপগুলি তৈরি করে, আপডেট করে এবং ধ্বংস করে।

রান নিয়ে প্রশ্ন

যদিও main.tsবুটস্ট্র্যাপ প্রক্রিয়াটি ব্যাখ্যা করার জন্য উপরের বিবৃতিতে ব্যবহৃত হয়, অ্যাঙ্গুলার অ্যাপটি কি জাভাস্ক্রিপ্ট .jsফাইলগুলি ব্যবহার করে বুটস্ট্র্যাপ করা বা শুরু করা হয় না?

উপরের সমস্ত বিবৃতি জাভাস্ক্রিপ্ট .jsফাইল ব্যবহার করে রানটাইম সম্পন্ন হয় না ?

কেউ কি জানেন কীভাবে সমস্ত অংশ গভীরতার সাথে একত্রে ফিট করে?

Answer 1

(আমি যখন কৌণিক বলি তখন আমি কৌণিক 2+ বোঝায় এবং আমি কৌনিক 1 উল্লেখ করছি তবে সুস্পষ্টভাবে কৌণিক- js বলব)।

ভূমিকা: এটি বিভ্রান্তিকর

কৌণিক এবং সম্ভবত আরও নির্ভুলভাবে কৌণিক-ক্লাইটি জাভাস্ক্রিপ্টে প্রচুর ট্রেন্ডিং সরঞ্জামগুলিকে একত্রিত করেছে যা বিল্ড প্রক্রিয়াতে জড়িত। এটি কিছুটা বিভ্রান্তির দিকে নিয়ে যায়।

বিভ্রান্তি আরও বাড়ানোর জন্য, শব্দটি compileপ্রায়শই কৌণিক-জেএসে ব্যবহৃত হত টেমপ্লেটের সিউডো-এইচটিএমএল গ্রহণ এবং এটি ডিওএম উপাদানগুলিতে রূপান্তর করার প্রক্রিয়াটির জন্য। এটি সংকলক যা করে তার একটি অংশ তবে ছোট অংশগুলির একটি।

প্রথমত, কৌণিক চালনার জন্য টাইপস্ক্রিপ্ট, কৌণিক-ক্লিপ বা ওয়েবপ্যাক ব্যবহার করার দরকার নেই। আপনার প্রশ্নের উত্তর দিতে। আমাদের একটি সহজ প্রশ্ন করা উচিত: "কৌণিক কী?"

কৌণিক: এটা কি করে?

এই বিভাগটি বিতর্কিত হতে পারে, আমরা দেখব। এর মূল অংশে, কৌনিকটি যে পরিষেবা সরবরাহ করে তা হ'ল একটি নির্ভরতা ইনজেকশন প্রক্রিয়া যা জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএস জুড়ে কাজ করে। আপনি সমস্ত ছোট বিট এবং টুকরা স্বতন্ত্রভাবে লিখুন এবং প্রতিটি ছোট টুকরোতে আপনি অন্যান্য টুকরো উল্লেখ করার জন্য অ্যাংুলারের বিধি অনুসরণ করেন। কৌণিক তারপর একরকম যে বয়ন।

(কিছুটা) আরও সুনির্দিষ্ট হতে হবে:

• টেমপ্লেটগুলি জাভাস্ক্রিপ্ট উপাদানটিতে এইচটিএমএলকে তারযুক্ত হতে দেয়। এটি নিজেই ডিওএম-এ ব্যবহারকারী ইনপুটটিকে (যেমন একটি বোতামে ক্লিক করা) জাভাস্ক্রিপ্ট উপাদানটিতে ফিড সরবরাহ করতে দেয় এবং জাভাস্ক্রিপ্ট উপাদানটিতে ভেরিয়েবলগুলি ডিওমে কাঠামো এবং মানগুলি নিয়ন্ত্রণ করতে দেয়।
• জাভাস্ক্রিপ্ট ক্লাসগুলি (জাভাস্ক্রিপ্ট উপাদানগুলি সহ) তাদের উপর নির্ভর করে থাকা অন্যান্য জাভাস্ক্রিপ্ট শ্রেণীর উদাহরণগুলিতে অ্যাক্সেস করতে সক্ষম হওয়া প্রয়োজন (যেমন শাস্ত্রীয় নির্ভরতা ইনজেকশন)। একটি বুকলিস্ট কম্পোনেন্টের একটি বুকলিস্ট সার্ভিসের একটি উদাহরণ প্রয়োজন যা বুকলিস্টপলিসির মতো উদাহরণ হতে পারে বা এর মতো কিছু হতে পারে। এই শ্রেণীর প্রত্যেকটির আলাদা আলাদা লাইফটাইম থাকে (যেমন পরিষেবাগুলি সাধারণত সিঙ্গেলন হয়, উপাদানগুলি সাধারণত সিঙ্গেলন হয় না) এবং অ্যাঙ্গুলারকে সেই সমস্ত জীবনকাল, উপাদানগুলির তৈরি এবং নির্ভরতার ওয়্যারিং পরিচালনা করতে হয়।
• সিএসএস বিধিগুলি এমনভাবে লোড করা দরকার যেগুলি কেবলমাত্র ডিওমের একটি সাবসেটে প্রয়োগ হয় (কোনও উপাদানগুলির শৈলী সেই উপাদানটির স্থানীয় হয়)।

সম্ভবত একটি গুরুত্বপূর্ণ বিষয় লক্ষণীয় হ'ল জাভাস্ক্রিপ্ট ফাইলগুলি অন্যান্য জাভাস্ক্রিপ্ট ফাইলগুলিকে কীভাবে রেফারেন্স করে (যেমন importকীওয়ার্ড) এর জন্য অ্যাংুলার দায়ী নয় । এটি ওয়েবপ্যাক দ্বারা যত্ন নেওয়া হয়।

সংকলক কী করে?

এখন যে আপনি জানেন যে কৌণিক কী করে আমরা কম্পাইলার কী করে সে সম্পর্কে কথা বলতে পারি। আমি খুব বেশি প্রযুক্তিগত হওয়া এড়াব কারণ মূলত আমি অজ্ঞ। তবে নির্ভরতা ইনজেকশন সিস্টেমের মধ্যে আপনি সাধারণত মেটাডেটা কিছু (যেমন কিভাবে একটি বর্গ বলে সঙ্গে আপনার নির্ভরতা প্রকাশ করার আছে I can be injected, My lifetime is blahঅথবা You can think of me as a Component type of instance)। জাভাতে, স্প্রিং মূলত এটি এক্সএমএল ফাইলগুলির মাধ্যমে করেছে। জাভা পরে টীকাগুলি গ্রহণ করেছে এবং তারা মেটাডেটা প্রকাশের জন্য পছন্দসই উপায় হয়ে উঠেছে। সি # মেটাটাটা প্রকাশ করার জন্য বৈশিষ্ট্যগুলি ব্যবহার করে।

এই মেটাডেটা বিল্টিনটি প্রকাশের জন্য জাভাস্ক্রিপ্টের দুর্দান্ত ব্যবস্থা নেই। কৌণিক-জেএস একটি চেষ্টা করেছিল এবং এটি খারাপ ছিল না তবে প্রচুর বিধি ছিল যা সহজেই চেক করা যায়নি এবং কিছুটা বিভ্রান্তিকর ছিল। অ্যাঙ্গুলারের সাথে মেটাডেটা উল্লেখ করার দুটি সমর্থিত উপায় রয়েছে। আপনি খাঁটি জাভাস্ক্রিপ্ট লিখতে পারেন এবং ম্যানুয়ালি মেটাডেটা নির্দিষ্ট করতে পারেন, কিছুটা কৌণিক-জেএসের মতো এবং কেবল নিয়মগুলি মেনে চলতে এবং অতিরিক্ত বয়লার-প্লেট কোড লিখে রাখতে পারেন। বিকল্পভাবে, আপনি টাইপস্ক্রিপ্টে স্যুইচ করতে পারেন যা এটি ঠিক যেমন ঘটে, সজ্জায় থাকে (সেই @চিহ্নগুলি) যা মেটাডেটা প্রকাশ করার জন্য ব্যবহৃত হয়।

সুতরাং এখানে আমরা শেষ পর্যন্ত সংকলক পেতে পারেন। সংকলকের কাজ হ'ল সেই মেটাডেটা নেওয়া এবং আপনার অ্যাপ্লিকেশন হিসাবে কাজ করা পিসের সিস্টেম তৈরি করা। আপনি সমস্ত টুকরো এবং সমস্ত মেটাডেটাতে ফোকাস দিন এবং সংকলক একটি বড় আন্তঃসংযুক্ত অ্যাপ্লিকেশন তৈরি করে।

সংকলক এটি কিভাবে করে?

সংকলকটি কাজ করতে পারে এমন দুটি উপায় রয়েছে, রানটাইম এবং সময়ের-আগে। এখান থেকে আমি ধরে নেব আপনি টাইপস্ক্রিপ্ট ব্যবহার করছেন:

• রানটাইম: যখন টাইপস্ক্রিপ্ট সংকলকটি চালিত হয় তখন এটি সমস্ত সজ্জাকারীর তথ্য নেয় এবং সজ্জিত শ্রেণি, পদ্ধতি এবং ক্ষেত্রগুলির সাথে সংযুক্ত জাভাস্ক্রিপ্ট কোডের মধ্যে সরিয়ে দেয়। আপনার ক্ষেত্রে index.htmlআপনার পদ্ধতিটি main.jsকল করে reference bootstrapএই পদ্ধতিটি আপনার শীর্ষ স্তরের মডিউলটি পেরিয়ে গেছে।

বুটস্ট্র্যাপ পদ্ধতি রানটাইম সংকলকটিকে আগুন ধরিয়ে দেয় এবং এটিকে শীর্ষ স্তরের মডিউলের একটি রেফারেন্স দেয়। রানটাইম সংকলক তারপরে সেই মডিউলটি, সমস্ত পরিষেবাগুলি, উপাদানগুলি ইত্যাদি module মডিউলটি এবং সম্পর্কিত সমস্ত মেটাডেটা দ্বারা রেফারেন্স করা শুরু করে এবং আপনার অ্যাপ্লিকেশন তৈরি করে।

• এওটি: রানটাইম সময়ে সমস্ত কাজ করার পরিবর্তে অ্যাঙ্গুলারটি বেশিরভাগ কাজ নির্মানের সময় করার জন্য একটি ব্যবস্থা সরবরাহ করে। এটি প্রায় সর্বদা একটি ওয়েবপ্যাক প্লাগইন ব্যবহার করে করা হয় (এটি অবশ্যই সর্বাধিক জনপ্রিয় এনপিএম প্যাকেজগুলির মধ্যে একটি হতে হবে)। এটি টাইপ স্ক্রিপ্ট সংকলন চালুর পরে চলে তাই এটি মূলত রানটাইম সংকলক হিসাবে একই ইনপুট দেখতে পায়। এওটি সংকলক রানটাইম সংকলকের মতো আপনার অ্যাপ্লিকেশনটি তৈরি করে তবে এটি আবার জাভাস্ক্রিপ্টে সংরক্ষণ করে।

এখানে সুবিধাটি কেবল এটি নয় যে আপনি নিজেই সংকলনের জন্য প্রয়োজনীয় সিপিইউ সময় বাঁচাতে পারেন, তবে এটি আপনাকে আপনার অ্যাপ্লিকেশনটির আকারও হ্রাস করতে দেয়।

নির্দিষ্ট উত্তর

কৌণিক সিএলআই প্রথমে টাইপসক্রিপ্টে লিখিত সংকলকটিতে কৌনিক নির্মিত বলে => তারপরে টাইপস্ক্রিপ্ট ট্রান্সপ্লেলার => কল করে তারপরে ওয়েবপ্যাকটিকে ডান্ড / ডিরেক্টরিতে বান্ডিল এবং সঞ্চয় করতে কল করে।

নং, কৌণিক সিএলআই ওয়েবপ্যাক কল করে (কৌণিক সিএলআইয়ের আসল পরিষেবা ওয়েবপ্যাকটি কনফিগার করছে you আপনি যখন চালান ng buildএটি ওয়েবপ্যাক শুরু করার চেয়ে প্রক্সি ছাড়া আর কিছু নয়)। ওয়েবপ্যাক প্রথমে টাইপস্ক্রিপ্ট সংকলককে কল করে, তারপরে কৌনিক সংকলক (এওটি ধরে নিচ্ছে), আপনার কোড একই সাথে বান্ডিল করার সময়।

যদিও বুটস্ট্র্যাপ প্রক্রিয়া ব্যাখ্যা করার জন্য উপরের স্টেটমেন্টে মেইন.টস ব্যবহার করা হয়, তবে কৌনিক অ্যাপটি জাভাস্ক্রিপ্ট .js ফাইলগুলি ব্যবহার করে বুটস্ট্র্যাপ করা বা শুরু করা হয় না?

আপনি এখানে যা জিজ্ঞাসা করছেন তা আমি পুরোপুরি নিশ্চিত নই। main.tsজাভাস্ক্রিপ্টে লিখে রাখা হবে। জাভাস্ক্রিপ্টটিতে এমন একটি কল থাকবে bootstrapযা আঙ্গুলের প্রবেশের পয়েন্ট। কখন হয়ে bootstrapযাবে আপনার সম্পূর্ণ কৌনিক অ্যাপ্লিকেশন চলবে।

এই পোস্টটি বলে যে কৌণিকের দুটি সংকলক রয়েছে:

সংকলক দেখুন

মডিউল সংকলক

সত্যি কথা বলতে আমি এখানে কেবল অজ্ঞতার দাবি করছি। আমি আমাদের স্তরে মনে করি আমরা কেবল এটি সমস্তকে একটি বড় সংকলক হিসাবে ভাবতে পারি।

কেউ কি জানেন কীভাবে সমস্ত অংশ গভীরতার সাথে একত্রে ফিট করে?

আমি উপরোক্ত এটি সন্তুষ্ট আশা করি।

আমাকে @ করবেন না: কৌণিক নির্ভরতা ইনজেকশনের চেয়ে বেশি করে

অবশ্যই এটি রাউটিং, ভিউ বিল্ডিং, সনাক্তকরণ পরিবর্তন এবং অন্যান্য ধরণের সমস্ত কাজ করে। সংকলকটি প্রকৃতপক্ষে দৃশ্য নির্মাণ এবং পরিবর্তন সনাক্তকরণের জন্য জাভাস্ক্রিপ্ট তৈরি করে। আমি মিথ্যা বললাম যখন আমি বলেছিলাম যে এটি কেবল নির্ভরতা ইনজেকশন। যাইহোক, নির্ভরতা ইঞ্জেকশনটি মূলটি এবং বাকি উত্তরটি চালানোর জন্য যথেষ্ট।

আমরা কি এটি একটি সংকলক বলতে পারি?

এটি সম্ভবত প্রচুর পরিমাণে পার্সিং এবং লেক্সিং করে এবং ফলস্বরূপ অবশ্যই প্রচুর কোড তৈরি করে যাতে আপনি এ কারণে এটি সংকলক বলতে পারেন।

অন্যদিকে, এটি সত্যিই আপনার কোডটি কেবল একটি আলাদা উপস্থাপনায় অনুবাদ করছে না। পরিবর্তে এটি কোডের বিভিন্ন অংশের একগুচ্ছ গ্রহণ করছে এবং এটিকে একটি বৃহত সিস্টেমের উপভোগযোগ্য টুকরাগুলিতে বুনছে। তারপরে বুটস্ট্র্যাপ প্রক্রিয়াটি (সংকলনের পরে, যদি প্রয়োজন হয়) সেই টুকরাগুলি নেয় এবং সেগুলি কৌণিক কোণে প্লাগ করে।

Comments

বিস্তারিত উত্তরের জন্য আপনাকে ধন্যবাদ। আপনার উত্তরটি গ্রহণ করার আগে আমি আপনার বিবৃতি The compiler does actually generate জাভাস্ক্রিপ্ট-এ সন্দেহ ও সন্দেহজনক ধারণা তৈরি এবং পরিবর্তন সনাক্তকরণের জন্য `এটি কোনও মিথ্যা নয় is সংকলক এটি কি না? এবং কৌণিক নির্ভরতা ইঞ্জেকশনটি করে।

— শাইজু টি

হ্যাঁ দুঃখিত. আমি যে মিথ্যাটির কথা উল্লেখ করছিলাম সেটি হ'ল "এর মূল ভিত্তিতে, কৌনিকটি যে পরিষেবাটি সরবরাহ করে তা নির্ভরতা ইনজেকশন প্রক্রিয়া" কারণ অ্যাঙ্গুলার এটি করে যে এটি সমস্ত কিছু করে না এবং এমনকি সমস্ত সংকলকও তা করে না।

— গত

যদি কৌনিকটি উপাদান, নির্দেশনা, পরিষেবাদি ইত্যাদির মতো বৈশিষ্ট্যগুলি সহ একটি নতুন "ভাষা" হিসাবে বর্জন করা হয়। একে সংকলক বলা যেতে পারে। কাঁচা জেএস এবং এইচটিএমএলতে কৌনিক ভাষাটি মেনে চলুন।

— ক্রিস বাও

Answer 2

আমাকে শুরু থেকে আরম্ভ করতে দিন।

আমার আবেদনে আমি সরাসরি অ্যাপ্লিকেশন চালাচ্ছি Webpack।

অ্যাপ্লিকেশনটি তৈরি এবং পরিচালনা করতে আমরা ওয়েবপ্যাক --progress এবং ওয়েবপ্যাক-ডেভ-সার্ভার - ইনলাইন কমান্ডটি 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ফাইলটিতে ঘোষিত বেসে ফাইলটি সংকলন করতে tsconfig.jsonব্যবহার করি templateUrlএবং styleUrlsকৌণিক 2 -টেম্পলেট-লোডারটি কৌণিক 2 উপাদান মেটাডেটার অনুসন্ধানের জন্য এবং ঘোষণাপত্রের অভ্যন্তরে অনুসন্ধান করে এবং সম্পর্কিতগুলির সাথে প্রতিস্থাপন করি বিবৃতি প্রয়োজন।

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ফাইল।

শেষে যখন আমরা ওয়েবপ্যাক-ডেভ-সার্ভার - ইনলাইন চালিত করি তখন এটি নিজস্ব সার্ভার তৈরি করবে এবং 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সেই উত্স থেকে ফাইলগুলি নিয়ে কথা বলে ।

এটি সংক্ষিপ্ত উত্তর। গভীরতায় কেউ উত্তর দিতে পারলে প্রশংসা করুন।

আড্ডায় আমার প্রশ্নের উত্তর দেওয়ার জন্য ক্রেডিটগুলি @ বিষাক্ত able

Answer 4

এই উত্তরের জন্য দেরি হতে পারে, তবে এই বিষয় সম্পর্কে সম্প্রতি একটি খুব ভাল আলোচনা হয়েছে, যা একটি প্রাথমিক দৃষ্টিভঙ্গি থেকে শুরু হয়ে গভীরতার দিকে চলে। আমার শব্দের সাথে এই থ্রেডটিতে সংক্ষিপ্ত বিবরণ বা ভুল তথ্য তুলে ধরার চেষ্টা করার পরিবর্তে, আমি কেবল ভিডিওটি কারা এরিকসনের লিঙ্ক করব : অ্যাংুলার কীভাবে কাজ করে ।

তিনি কৌণিক কাঠামোতে কারিগরি নেতৃত্ব, এবং এতে একটি দুর্দান্ত উপস্থাপনা করেন:

• কৌণিক কাঠামোর প্রধান অংশগুলি কী
• সংকলক কীভাবে কাজ করে, কী উত্পাদন করে
• একটি "উপাদান সংজ্ঞা" কি?
• অ্যাপ্লিকেশন বুটস্ট্র্যাপ কী, এটি কীভাবে কাজ করে

Comments

অবদানের জন্য আপনাকে ধন্যবাদ :), কৃতজ্ঞ।

— শাইজু টি

Answer 5

সুতরাং জাভাস্ক্রিপ্ট ফাইলের সাথে যদি বুটস্ট্র্যাপ প্রক্রিয়াটি ঘটে থাকে তবে কেন কৌণিক দস্তাবেজগুলি বুটস্ট্র্যাপ প্রক্রিয়াটি ব্যাখ্যা করতে মেইন.টিএস টাইপস্ক্রিপ্ট ফাইলটি ব্যবহার করে?

এটি মেইন.টি.এস এর রূপান্তরিত .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

যদিও মেইন.টি.এস ফাইলটি মানব পাঠযোগ্য এবং লুসিড, এ কারণেই কৌণিক অ্যাপ্লিকেশনটির বুটস্ট্র্যাপ প্রক্রিয়াটি ব্যাখ্যা করতে কৌণিক.ইও মেইন.টি ব্যবহার করে। কৌণিক: কেন টাইপস্ক্রিপ্ট? এগুলি বাদ দিয়ে যদি আপনি এমন একটি দুর্দান্ত কাঠামোর লেখক হয়ে থাকেন তবে আপনার কাঠামোটি জনপ্রিয় এবং ব্যবহারকারী-বান্ধব করে তুলতে আপনি কোন পন্থাটি ব্যবহার করেছেন? আপনি কি জটিল বিষয়টির চেয়ে পরিষ্কার এবং সংক্ষিপ্ত ব্যাখ্যার জন্য যাবেন না? আমি কৌনিক সম্মত হই io

Answer 6

কৌণিক 9+ এওটি (টাইম সংকলনের পূর্বে) ব্যবহার করে যার অর্থ এটি বিটগুলিতে বিভক্ত সমস্ত বিট গ্রহণ করে যেমন উপাদান (.ts + .html + .css), মডিউল (.ts) এবং ব্রাউজার বোধগম্য জাভাস্ক্রিপ্ট যা রানটাইম সময়ে ডাউনলোড হয় এবং ব্রাউজার দ্বারা চালিত।

অ্যাঙ্গুলার 9 এর আগে এটি ছিল জেআইটি (ঠিক সময়ে সংকলন) যেখানে ব্রাউজারের দ্বারা প্রয়োজনীয় কোডটি সংকলিত হয়েছিল।

বিশদগুলির জন্য দেখুন: কৌণিক এওটি ডকুমেন্টাইটন