ভিউ হলো একটি কম্পোনেন্ট: UI ট্রি-এর একটি নোড, যার নিজস্ব লেআউট, আচরণ ও স্টাইল থাকে। এই অধ্যায়ে দেখানো হয়েছে ভিউ কীভাবে ঘোষণা করা হয়, লজিকের সঙ্গে যুক্ত করা হয়, গঠন করা হয় ও পুনর্ব্যবহার করা হয়।view.tree একেবারে নতুন লাগছে? TypeScript থেকে view.tree একই কম্পোনেন্ট দুবার বানায় — একবার হাতে লেখা ক্লাস হিসেবে, একবার ট্রি হিসেবে — আর ট্রি যে কোডে কম্পাইল হয় তা দেখায়। নিচের সিনট্যাক্স যদি সংক্ষেপ নয়, নতুন কোনো ভাষা মনে হয়, তবে আগে ওটি পড়ুন।
একটি কম্পোনেন্ট $my_card থাকে my/card/-এ এবং সর্বোচ্চ তিনটি ফাইল দিয়ে বর্ণিত হয়, প্রতিটির একটি স্পষ্ট কাজ আছে:card.view.tree — কম্পোনেন্টটি কী: এর গঠন ও ডিফল্ট বাইন্ডিং।card.view.ts — এটি কীভাবে আচরণ করে: TypeScript মেথড, রিয়্যাক্টিভ স্টেট।card.view.css.ts — এটি দেখতে কেমন: কম্পাইলার-যাচাইকৃত টাইপড স্টাইল।গঠন, আচরণ ও স্টাইল আলাদা রাখা ইচ্ছাকৃত — প্রতিটি ফাইল ছোট ও পঠনযোগ্য থাকে, আর লেআউট কখনো লজিকের সঙ্গে জড়িয়ে যায় না।তিনটির কোনোটিই একা বাধ্যতামূলক নয়। card.view.tree বাদ দিয়ে ক্লাসটি সরাসরি namespace $-এ লিখুন: কাঠামো সাধারণ মেথডে পরিণত হবে আর কম্পোনেন্ট তবু কাজ করবে। এই অধ্যায়ের বাকিটা ট্রি ব্যবহার করে, কারণ নলপথটা আপনার হয়ে তৈরি হয়ে গেলে কাঠামো দেখতে এমনই লাগে।
view.tree গঠনকে ঘোষণামূলকভাবে বর্ণনা করে। ইনডেন্টেশন মানে নেস্টিং; কোনো ক্লোজিং ট্যাগ নেই।1$my_card$mol_view2 sub /3<= Title $mol_view4 sub /<= title \5<= Body $mol_view6 sub /<= text \প্রতিটি বড় হাতের অক্ষরের নাম (Title, Body) একটি প্রকৃত প্রপার্টিতে পরিণত হয়, যেটিতে আপনি পৌঁছাতে, ওভাররাইড করতে বা স্টাইল করতে পারেন। প্রতিটি ছোট হাতের বাইন্ডিং (title, text) একটি মানে পরিণত হয়, যা আপনি .view.ts-এ গণনা করতে পারেন।
দুটি অপারেটর একটি প্রপার্টিকে তার উৎসের সঙ্গে যুক্ত করে:<=একমুখী: সন্তান মালিকের কাছ থেকে একটি মান পড়ে।<=>দ্বিমুখী: মান উভয় দিকে প্রবাহিত হয় — ইনপুটের জন্য ব্যবহৃত।1$my_form$mol_view2 sub /3<= Field $mol_string4 value?<=> text?\এখানে ইনপুটের value ও মালিকের text স্বয়ংক্রিয়ভাবে সমন্বিত থাকে: ফিল্ডে টাইপ করুন, text আপডেট হবে; কোডে text সেট করুন, ফিল্ড তা প্রতিফলিত করবে।
