• AngularJS 2 - قسمت پنجم
AngularJS 2 - قسمت پنجم
1395/01/20 - 14:00:36 // Angular JS // 2 نظر // 611 بازدید

در قسمت قبلی فقط توانستیم در مورد Modular بودن AngularJS مخصوصن در نسخه 2 صحبت کنیم . یک نکته را فراموش کرده ام در قسمتهای قبلی بگویم و آن این است که Google کلا ورژن 2 را زیر و رو کرده و اگر قبلن مطالعاتی بر روی نسخه های پایینتر داشته اید ...

بسمه تعالی

AngularJS 2 - قسمت پنجم

موضوع این قسمت : The architecture of an AngularJS 2 Application

در قسمت قبلی فقط توانستیم در مورد Modular بودن AngularJS مخصوصن در نسخه 2 صحبت کنیم . یک نکته را فراموش کرده ام در قسمتهای قبلی بگویم و آن این است که Google کلا ورژن 2 را زیر و رو کرده و اگر قبلن مطالعاتی بر روی نسخه های پایینتر داشته اید ، فقط در درک این نسخه به شما کمک خواهد کرد ،ولی انتظار نداشته باشید دقیقن همانها را ببینید . خیلی چیزها عوض شده یا بهتر شده یا حتی شاید سخت تر و بدتر شده باشد .

خوب بریم سر اصل مطلب . دقیقن میخواهیم ببینیم حرف AngularJS از لحاظ ساختار و معماری چیست .

در آنگولار 4 جزء اصلی داریم .

1- Component

2- Directive

3- Router

4- Service

 

دقت کنید که همه این 4 فاکتور را درون هم توضیح باید داد و نمیتوان به صورت موردی از 1 شروع کرده و تک به تک آنها را بررسی نمود . از Component شروع میکنیم و هر جا لازم شد به سراغ بقیه میرویم .

وظیفه Component ، کپسوله کردن Template ، Data و رفتارهای View میباشد . در بخش قبل گفتیم که یک پروژه درگیر با AngularJS ، حداقل یک Component را دارد که به آن Root Component هم گفته میشود ؛ البته در دنیای واقعی یک پروژه شامل دهها یا شاید صدها Component خواهد بود .

 

خوب مثلن یک سایت را فرض کنید .

 

این سایت دارای 3 کامپوننت اصلی خواهد بود .

1- NavBar

2- SideBar

3- Courses

هر کامپوننت برای خودش HTML و دیتا و ... در View خواهد بود . خود کامپوننها میتونن شامل چندین کامپوننت باشند . مثلن لیست Course ها خودش شامل چندین Course خواهد بود .

 

خوب حالا تازه هر Course Component شامل یک Component است برای Rating

 

این روند به ما اجازه میده یک پروژه بزرک را خورد کنیم و به Component ها یا در اصل View Component های ریز ریز تقسیم کنیم .

 

این کامپوننتها رو میشه در N جای پروژه استفاده کرد یا حتی در پروژه های دیگر استفاده کرد .

خوب الانه که باز احساس گم گشتگی کنید ، چون میخام اسم Type Script را بیارم . نترسید . ساده تر از اینهاست که فکرش را بکنید و البته الان قرار نیست Type Script کار کنیم . فقط میخام اسمش رو بیارم .

یک Component فقط یک Type Script کلاس است و بس.

 

مثل مبحث کلاسها در همه زبانها ، کلاسهای Type Script هم Property و متد دارند .

 

خوب این Property عملن Data را برای View نگه میدارد و متد رفتار View را ایجاد میکند .

دقت کنید که Component ها کاملن از DOM جدا هستند .

 

ما در پروژه هایی که با Javascript یا Jquery مطلق سر و کار داریم ، خود اجزاری DOM را با کدهای JS به طور مستقیم دستکاری میکنیم .

 

در AngularJS این کار توسط Binding باید انجام بشه نه اینکه Text یا دیگر آیتم یک به یک با دستور عوض بشه .

 

اگر مقدار یک Property عوض بشه ، خود روال Binding این مقدار را در DOM عوض میکند . به همین شکل برای Event ها شبیه Click هم DOM خود به خود آن Method تایین شده که به آن Bind شده است را صدا میکند . این یعنی Binding و این بسیار شیرین خواهد بود اگر آنرا به درستی درک و استفاده کنید ،چرا که 50% کارها دیگر Automatic خواهد بود .

 

خوب چرا اصلن باید Component از DOM کلا جدا باشد ؟.

اینطوری Component ها Unit Testable خواهند شد . یک کلاس خالی و فقط شامل Property و Event را مثل آب خوردن میشود Unit test کرد .

نکته : اگر نمیدانید Unit Testing چیست ، اولن وای به حالتان . دومن به زودی براش مقاله خواهم گذاشت . سوما ، خودتان هم کمی مطالعه کنید . الان برای Design Pattern هم مباحث SOLID مطرح شده تا همه چیز ریز ریز شود و بتوان راحتتر Unit Test کرد . من همه را توضیح خواهم داد ، ولی مشکل اینجاست که هر کدام از اینها یک مبحث جداست و بسیار زمانبر .

خوب گاهی باید یک کامپوننت با Server در رابطه باشد .به هیچ وجه درون Component یا View نباید و اصلن نمی توان یک متد سمت سرور را صدا زد . تنها راه اضافه شدن یک آیتم دیگر به نام Service است .

این سرویس است که باید وظیفه رفت و آمد با سرور با به عهده بگیرد . خوب پس HTTP Call ها و Login و .... را باید با واستگی Service انجام داد .

 

خوب نقش Router اینجا چیست ؟.

وقتی کاربر روی مثلن آیتمهای Menu کلیک کند ، قاعدتا باید برای Navigate ، آدرس و URL عوض شود تا به صفحه یا بخشی دیگر مراجعه شود و این دقیقن همان بحث Single Page Application خواهد بود . در AngularJS این روند به صورت بدون PostBack و با مدیریت Routing موجود در آن انجام خواهد شد . در جای خودش این بحث را مفصل باز خواهیم کرد .

و اما Directive .

مشابه Component ها ، Directive هم برای کار باDOM ساخته شده است ، ولی Directive مثل Component دارای Template و ...برای View نیست . نقش Directive فقط اضافه کردن Behave به DOM Element هاست . مثلن یک Textbox را میخواهیم با گرفتن Focus بزرگتر کنیم. یک Directive به نام AutoGrow می نویسیم و آنرا به کنترل مشابه یک Property اضافه میکنیم.

 
 


خود AngularJS حاوی یک دنیا Directive است که میتواند با DOM بازی کند و آنها را دستخوض تغییر نماید . ضمن اینکه ما هم میتوانیم هر جا لازم شد خودمان یکی Custom بنویسیم. در جای خودش به مبحث Directive خواهیم پرداخت و آنرا به طور کامل بررسی خواهیم نمود .

امروز نوزدهم فروردین سال 1395 با بهترین آرزوها برای شما .

علی کلاهدوزان
معرفی نویسنده : علی کلاهدوزان

سلام بر دوستان ،
شاید رایج است به عنوان پروفایل کاربر ، چند خطی راجع به خودم بنویسم ، ولی وضعیت کاری و سوابق من با یک جستجوی ساده در گوگل مشخص خواهد شد ، لذا سرتان را با مطالب بی مورد به درد نیاورم بهتر است . اگر نکته خاصی لازم بود بدانید در قسمت "ایلیا سافت در یک نگاه" به احتمال زیاد یافت خواهد شد . جزئیات بیشتر را سوال کنید ، آدرس ایمیل Ali@Kolahdoozan.com همیشه جوابگوی شماست .امیدوارم از مطالب سایت استفاده کرده باشید . شاد و پیروز باشید .

امتیاز به مطلب
           
نظرات کاربران
  • میثم سلیمانی
    1395/01/24 - 10:11:47

    4
    0
    بسیار عالی و روان توضیح میدید. امیدوارم ادامه داشته باشه و همچنین شاهد یک پروژه عملی خوب هم باشیم. با تشکر
  • فرشید علی اکبری
    1395/02/09 - 11:00:47

    0
    0
    سلام لطفاً اگه امکانش هست پس از اتمام دروس، یک پروژه کاربردی ساده و عملی بصورت مدیا در دسترس کاربران قرار داده . واگه امکان داره ما بین دروس، بخشی را هم به استفاده از AngularJS2 و React (بصورت Mix شده) در پروژه ها جهت افزایش Perfornace آموزش دهید. با تشکر از شما.
     
     
    -------------------
    پاسخ :
    سلام ، به محض پایان Core 1 در حدود 5 روز آینده ، در VS.NET 2015 و با واسطگی Core 1 مجموعه ای عملی از AngularJS 2 خواهیم ساخت و این سلسله آموزش ها رها نخواهد شد، مطمئن باشید و تنها 5 روز صبر کنید .
ارسال نظر