معرفی
این مقاله نحوه ایجاد یک کامپوننت قابل استفاده مجدد در Angular js را مورد بحث قرار می دهد. این آموزش برای مبتدیان / تازه واردان یا دانش آموزان است. من عملکرد کامپوننت را ایجاد کرده ام و در برنامه خود استفاده کرده ام. ایده خوبی است که یک کامپوننت ایجاد کنید و کد یک برنامه را در js زاویه ای کاهش دهید. امیدوارم این برای ایجاد یک کامپوننت در Angular js برای شما مفید باشد.
نقطه کد Angular Js
- ng-app - این دستورالعمل برای بوت استرپ برنامه استفاده می شود. به طور معمول، در یک عنصر سطح بالا مانند HTML یا تگ بدن قرار داده می شود.
- ng-controller - جزء اصلی AngularJS است که هر دو حالت و منطق را در خود دارد. به عنوان پلی بین خدمات و نماها عمل می کند.
- $scope - ارتباط بین داده ها و نماها را فراهم می کند. تمام داده های مورد نیاز برای نماها و استفاده در قالب HTML را در خود نگه می دارد.
- {{expression}} - اصطلاحات نامیده می شود و کدهای جاوا اسکریپت مانند را می توان در داخل آن نوشت. این باید برای عملیات عمدتا کوچک در صفحه HTML استفاده شود.
- ng-repeat - در واقع عنصری را که بر اساس لیست دادههای ارائه شده بر روی آن استفاده شده است، تکرار میکند. در مثال ما جزء نمای کارت با استفاده از شی JSON که حاوی لیستی از نرم افزار، هتل یا داده های نمونه محصول است.
- $ctrl – بهطور پیشفرض، کامپوننتها از $ctrl به عنوان نام مستعار کنترلکننده استفاده میکنند.
کامپوننت Angular Js
ما می دانیم که الگو به عنوان یک طرح اولیه برای نحوه سازماندهی و ارائه داده های ما به کاربر عمل می کند. بنابراین ترکیب (قالب + کنترلر) یک الگوی رایج و تکراری است. AngularJS یک راه آسان و مختصر برای ترکیب آنها با هم در موجودیت های قابل استفاده مجدد و ایزوله ارائه می دهد که به عنوان اجزا شناخته می شوند. برای ایجاد یک کامپوننت، از متد .component() یک ماژول AngularJS استفاده می کنیم. ما باید نام کامپوننت را ارائه کنیم. نام کامپوننت در camelCase است (مثلاً myDataComponent)، اما وقتی به آن در HTML خود اشاره میکنیم، از kebab-case (به عنوان مثال my-da-component) استفاده میکنیم. بهطور پیشفرض، کامپوننتها از $ctrl به عنوان نام مستعار کنترلکننده استفاده میکنند، اما در صورت نیاز میتوانیم آن را لغو کنیم.
مثال:
بخش 1
بخش 1 نمای کوتاهی از قسمت کد را نشان می دهد. ما ng-app myApp را ایجاد می کنیم و در قسمت بدن سه