بررسی آناتومی پروژه های طراحی سایت Angular بخش اول

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

مقالات مرتبط

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

فعالسازی Angular

هر پروژه طراحی سایت مبتنی بر انگولار باید دو کار را برای راه اندازی انگولار انجام دهد اول که باید اسکریپت انگولار را لود کند و دوم اینکه با استفاده از دایرکتیو ng-app به انگولار بگوید که کدام بخش از DOM را باید مدیریت کند.

لود کردن اسکریپت انگولار

لود کردن اسکریپت انگولار همانند لود کردن دیگر اسکریپتها مانند jquery و... میباشد. برای این منظور شما دو راه دارید یا استفاده از CDN های گوگل و یا قرار دادن فایل اسکریپت در هاست خود. البته باید از قبل به شما در رابطه با CDN ها هشدار دهدم. شخصاً تجربیات تلخی در استفاده از CDN ها داشتم علت هم یا تحریم ها بوده و یا محدودیتهای دسترسی داخلی لذا توصیه میکنم برای اطمینان بیشتر فایل angular.js را در هاست خود قرار دهید هر چند که همه جا توصیه شده از CDN گوگل استفاده کنید اما فکر میکنم ما از این قاعده متاسفانه مستثنا هستیم.

مشخص کردن محدوده فعالیت انگولار با استفاده از ng-app

با استفاده از دایرکتیو ng-app شما میتوانید به انگولار بگویید که کدام بخش از html را باید مدیریت کند. در صورتی که برنامه شما تماماً با انگولار مدیریت میشود شما این این دایرکتیو را بر روی تگ <html> قرار میدهید.

اما اگر برخی از بخشهای html شما توسط دیگر تکنولوژیها مانند ASP.Net تولید و مدیریت میشوند شما میتوانید بخشهای مربوط به انگولار را جداگانه معرفی کنید:

Model View Controller

در مقاله قبل اشاره شد که انگولار از معماری MVC پشتیبانی میکند. اما انگولار بسیار انعطاف پذیر تر از دیگر فریم ورکهای MVC سمت کلاینت میباشد. در تمامی پروژه های طراحی سایت مبتنی بر انگولار شما بخشهای ذیل را خواهید داشت:

مدل به واسطه خصیصه ها در object های جاوا اسکریپت و یا متغییرها تعریف میشوند. مدلها نوع داده ای خاصی نیستند هر نوع داده ای جاوا اسکریپت میتواند نقش مدل را ایفا کند به طور مثال اگر شما بخواهید یک رشته متنی را به کاربر نمایش دهید میتوانید به صورت زیر عمل کنید:

ویوها در قالب HTML تعریف میشوند و شما تنها باید نقاطی که داده موجود در مدل باید در آنها قرار بگیرد را مشخص کنید و همچنین اینکه کی باید مقادیر را جاگذاری کند را مشخص کنید. مطمئناً تا حالا فرم ثبت نام تکمیل کرده اید. در این فرمها مثلاً جلوی قسمت نام یکسری نقطه چین قرار دارد دقیقاً کاری که ویو ها انجام میدهند مانند این فرم های ثبت نام هستند یکسری متن هستند با یکسری نقطه چین که داده موجود در مدل در این نقطه چین ها قرار میگرند حالا برای مشخص کردن این نقطه چین ها در HTML دو راه داریم اول استفاده از double-curly syntax و دومی استفاده از خصیصه های HTML میباشد. به طور مثال اگر بخواهیم از متغییر someText که در بالا معرفی شد به جای مدل استفاده کنیم ویویی که این مدل را نمایش میدهد به صورت زیر خواهد بود:

خوب تا الان مشخص شد که محل نقطه چین کجاست و چی قراره تو این نقطه چین قرار بگیره حالا وقت آن هست که کسی که قراره این عمل پر کردن نقطه چین را انجام دهد را معرفی کنیم که همان کنترلر در مدل MVC میباشد و در ویو با استفاده از ng-controller مشخص میشود. زیاد با اسمها فکر خودتون را مشغول نکنید کنترلرها همشون یکسری فانکشن جاوا اسکریپت هستند به طور مثال:

فعلاً ذهنتون را با اینکه scope چی هست و از کجا ظاهر شده مشغول نکنید چیزی که الان مهم هست درک کنیم این هست که در مدل MVC ما یکسری فرم ثبت نام و یا فرم افتتاح حساب بانکی و یا ... داریم که بهشون میگیم ویو و یکسری اطلاعات داریم مانند نام و نام خانوادگی و کد ملی و ... که بهشون میگیم مدل و همچنین یکی را داریم که این فرم ها پر میکند که بهشون میگن کنترلر. ویو ها با استفاده از HTML تعریف میشن و مدل ها همون متغییرها و Object های جاوا اسکریپت هستند و کنترلرها همان فانکشنهای javascript هستند.

مثال بالا نشان داد که میشه از متغییرهای ساده به عنوان مدل استفاده کرد اما در اکثر برنامه ها شما از Object ها برای نگهداری مقادیر مدل استفاده میکنید پس به جای

از Object ها به صورت زیر استفاده میکنیم:

و البته ویو هم باید به صورت زیر آپدیت بشه:

شاید براتون این سوال پیش بیاد که چرا استفاده از Object ها به عنوان مدل روش توصیه شده است. علت هم این هست که در Javascript ساختاری مانند namespace ها در سی شارپ وجود ندارد و خیلی راحت ممکن است شما متغییری تعریف کنید که قبلاً در فریم ورک انگولار تعریف شده باشد که اصطلاحاً به این اتفاق name clash گفته میشود. برای جلوگیری از این پدیده رایج در زبانهای پیشرفته از namespace ها استفاده میشود اما جاوا اسکریپت زبانی است که به مرور تکامل پیدا کرد و فاقد چنین ساختاری است اما با استفاده از object ها به راحتی میتوان عملکرد namespace ها را پیاده سازی کرد.

خوب راجع به بدیهای تعریف مدل در قالب متغییرها صحبت کردیم و الان فرصت خوبی هست که راجع به کنترلرها و روشهای توصیه شده برای تعریف آنها هم صحبت کنیم. در مثال قبل ما کنترلر را در Global Scope تعریف کردیم این scope ربطی به $scope که ازش در کنترلرها استفاده میکنیم ندارد و یک اصطلاح جاوا اسکریپت هست. زمانی که شما یک فانکشن و یا متغییر را مستقیماً در فایل js خود و یا تگهای script تعریف میکنید اصطلاحاً آنها را در global scope تعریف کرده اید همچنین مثلاً اگر یک متغییر در یک فانکشن تعریف کنید و از کلمه کلیدی var برای تعریف آن استفاده نکنید به جای اینکه متغییر در اسکوپ آن فانکشن تعریف شود در global scope تعریف میشود.

به طور کلی همیشه برنامه نویسان از تعریف متغییر و فانکشن در global scope نهی شده اند علت هم همان name clash هست و یکسری دلایل مربوط به performance که خارج از بحث هستند. حالا برای حل این مشکل انگولار مفهوم ماژول ها را معرفی میکند به این ترتیب که ابزار لازمه برای دسته بندی کنترلرها و مدلها در قالب ماژولها را در اختیار شما قرار میدهد. که به صورت زیر میتونید ازشون استفاده کنید:

همانطور که ملاحظه میکنید برای تعریف ماژولهای مختلف از متد module انگولار استفاده میکنیم. در گام بعدی باید در ویو ماژول را معرفی کنیم که با استفاده از ng-app این کار را انجام میدهیم با این تفاوت که به ng-app مقدار myApp را الصاق میکنیم به صورت زیر:

در رابطه با ماژولها در آینده بیشتر خواهیم آموخت اما الان اگر بیشتر وارد جزئیات بشویم تنها باعث خلل در یادگیری مفاهیم پایه و مهمتر خواهد شد.

در مقاله آینده به بررسی Template ها یا همان نقطه چین ها در مثال خودمان و نحوه اتصال آنها به مدل خواهیم پرداخت. لطفاً من را از نظرات خودتان بی بهره نگذارید.