ادغام BootstrapJS و AngularJS به روش صحیح

ادغام BootstrapJS و AngularJS به روش صحیح

Bootstrap و Angular ابزارهایی هستند که بسیاری از توسعه دهنده ها و طراح های وب سایت از آنها استفاده می کنند. اغلب اوقات، این دو فریم ورک در کنار هم در پروژه ها استفاده می شوند. اینها هر دو ابزارهایی فوق العاده هستند که مسیر CSS و JS را در توسعه وب تغییر داده اند.

البته یک مشکل هنگام ترکیب این دو وجود دارد، مخصوصا وقتی که سعی دارید اجزاء جاوا اسکریپت Bootstrap را وارد پروژه Angular کنید. هنگام ساخت پروژه های angular، نباید کتابخانه کامل jQuery را اضافه کنیم. در حال حاضر angular شامل jQlite است که تمام jQuery های ضروری را دارا است.

اگر می خواهید به هر دلیلی ظاهر سایت خود را تغییر دهید، این تمرین خوبی است که viewها را بر اساس داده آنگولار تغییر دهید. ما این موضوع را در این مقاله مورد بررسی قرار می دهیم.

امروز می خواهیم به اندکی از مشکلاتی که Bootstrap و Angular در کنار هم ایجاد می کنند نگاهی بیندازیم، چرا نباید از اسکریپت‌های بوت استرپ که متکی بر jQuery است استفاده کنیم، و بهترین جایگزین برای دریافت اجزای بوت استرپ چیست.

 

مشکل با جاوا اسکریپت بوت استرپ و آنگولار

 

این مشکل به قانونی بر می گردد که شما نباید از jQuery در پرژه های خود استفاده کنید. روش کار jQuery برای دستکاری داده ها مقابله مستقیم چطور استفاده کردن angular در دستکاری دادها در view می باشد.

 

چرا از jQuery استفاده نکنیم

 

اساسا روشی که jQuery استفاده می کند به این صورت است که بر اساس رویداد ها (events) در صفحه DOM را پیدا می کند و درون آن تزریق می کند. بنابریان وقتی که ما از اسکریپت بوت استرپ مثل button استفاده می کنیم، در واقع می گوییم وقتی این دکمه کلیک شد سوئیچ به یک اثر (یه این اصطلاح toggle گویند) دیگر را فعال یا active کند. این کار باعث می شود کلاس active. دکمه را فعال کند.

 

با Angular، دستکاری داده با شناسایی و تزریق به صورت بالا انجام نمی شود. همه چیز به هم متصل است و ما نیاز نداریم که همه آنها را شناسایی و آنگاه تزریق کنیم. ما باید قادر باشیم برای هر کامپوننت مثل (button یا collapse) به یک متغیر متصل کنیم و آنگاه سوئیچ به یک اثر دیگر را بر اساس true/false بودن متغیر مشخص کنیم.

 

به همین دلیل است که نمی توانیم از اسکریپت‌ها Bootstrap استفاده کنیم. این به jQuery متکی است و ما نمی خواهیم که jQuery در پروژه Angular دخالت کند. اگر سعی کنیم به متغیرها متصل یا bind شویم، کار نخواهد کرد.

 

مثال اول

 

توجه داشته باشید که مثال اول بهترین روش نیست. با ایجاد پروژه جدید محتوا فایل های زیر را در فایل های درون پروژه خود وارد کنید.

 

HTML

 

 

CSS

 

 

JS

 

 

نمایش [fa type=”eye”]

 

حال می توانیم یک جفت توابع ایجاد کنیم مثل ()toggleButton و آنگاه آن را با یک ng-click فراخوانی کنیم، ولی نمی خواهیم چنین روشی را استفاده کنیم. اتصال داده ها در آنگولار این امکان را به ما می دهد که متغیری تعریف کنیم و تغییرات آن را از هر کجا که به آن متغیر اشاره شد به ما منعکس شود.

 

راه حل: UI Bootstrap

 

خوب راه حل چیست؟ ما در Angular آموخته ایم که هر کجا بخواهیم داده ها را به کامپوننتی خاص اتصال دهیم، باید یک دستور دهنده یا directive ایجاد کنیم. این کار به Angular این امکان را می دهد تا تشخیص دهد بخش خاصی از وب سایت ما باید زیر نظر یا به اصطلاح watch برای تغییر داده ها قرار گیرد.

 

راه حل، پروژه ای با نام UI Bootstrap است. این پروژه توسط تیم Angular ساخته شده است که تعدادی کامپوننت برای توسعه angular دارد. UI Bootstrap از jQuery استفاده نمی کند و directive ها از پایه برای هر کدام از کامپوننت های Bootstrap ساخته شده اند.

 

الزامات مورد نیاز برای UI Bootstrap (بر خلاف BootstrapJS) به شرح زیر است:

 

  • نیازی به jQuery ندارد
  • نیاز به Angular دارد
  • نیاز به فایل Bootstrap CSS دارد

 

همین! اکنون چطور در پروژه خود ادغام کنیم؟

 

آپ آنگولار ما

 

بیایید نگاهی به آنچه که باعث عملکرد این کار می شود بیندازیم. اگر نگاهی به کدهای جاوا اسکریپت داشته باشید، مشاهده می کنید که ما یک ماژول و کنترل کننده (Controller) آنگولار ایجاد کرده ایم.  سپس متغیرهایی را برای button و collapse ایجاد کرده ایم.

 

قدم بعدی این است که فایل UI Bootstrap را در دریافت و به پروژه خود اضافه کنیم. آنگاه قادر خواهیم بود ui.bootstrap را به ماژول آنگولار تزریق کنیم. تنها می خواهیم تمام directive ها از اجزا جاوا اسکریپت بوت استرپ تقلید کنند!

توجه داشته باشید که من در این مثال UI Bootstrap را از طریق npm نصب کرده ام. پکیج UI Bootstrap را از لینک زیر می توانید با استفاده از NPM نصب کنید:

 

 

 

اکنون، روش صحیح برای استفاده از این، تنظیم کردن مقدار متغیرها هنگام کلیک دکمه ها است.

 

با استفاده از UI Bootstrap Button Directive

 

بهترین روش برای استفاده از checkbox button اضافه کردن ng-model برای هر آنچه که تعریف شده است، و اضافه کردن صفت btn-checkbox. در زیر کد دکمه یا button را مشاهده می کنید:

 

 

 

اکنون می بینیم که هنگام کلیک دکمه ها، مدل ما تغییر می کند، درست همانطور که انتظارش را داشتیم.

 

با استفاده از UI Bootstrap Collapse Directive

 

برای collapse، پنل خود را بر اساس مقدار ture و flase متغیر isCollapsed باز و بسته می کنیم. بنابراین از "ng-click=isCollapsed = "!isCollapsed استفاده می کنیم. این کار باعث می شود isCollapsed ما به یک اثر دیگر سوئیچ کند.

 

 

اکنون هر دو کامپوننت ما به درستی کار می کنند!

 

HTML

 

 

CSS

 

 

JS

 

نمایش [fa type=”eye”]