از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
مقدمه ای بر AngularJS
وقتی چند هفته پیش با AngularJS آشنا شدم، ابتدا مجذوب شدم. تا زمانی که من روی مجموعه آموزش های موجود کار کرده بودم روی در وب‌سایت AngularJS، از یافتن این چارچوب هیجان‌زده شدم.
AngularJS چیست؟ AngularJS بچه (نسبتا) جدید است روی بلوک کدگذاری به نقل از وب سایت آنها، این “یک چارچوب ساختاری برای برنامه های وب پویا” است که به ویژه برای ساختن یک برنامه مناسب است.page برنامه های وب، اگرچه مطمئناً به این محدود نمی شود.
این برنامه در سال 2009 توسط Miško Hevery و Adam Abrons – هر دو کارمند Google در آن زمان – توسعه یافت – کاملاً جاوا اسکریپت و کاملاً سمت مشتری است، بنابراین هر جا جاوا اسکریپت می تواند اجرا شود، AngularJS می تواند اجرا شود. همچنین کوچک است: فشرده و کوچک شده کمتر از 29 کیلوبایت است. و تحت مجوز MIT منبع باز است. حتی می‌توانید از لوگوی موجود تحت مجوز Creative Commons Attribution-ShareAlike 3.0 Unported استفاده کنید.
طبق ویکی‌پدیا، هدف Angular «افزایش برنامه‌های مبتنی بر مرورگر با قابلیت مدل–نما–کنترل‌کننده (MVC)» است و دقیقاً این کار را انجام می‌دهد و یک چارچوب اتصال/MVC ارائه می‌کند. این الزام آور دو طرفه است، توجه داشته باشید. خوشمزه – لذیذ. با ساختاری به سادگی {{ داده های من }}، داده ها را به خود متصل می کنید page. سرویس $scope تغییرات مدل را تشخیص می‌دهد و عبارات HTML را در view از طریق کنترل‌کننده‌ها تغییر می‌دهد. با کار در جهت دیگر، تغییرات در نمای در مدل منعکس می شود. این امر نیاز به اکثریت قریب به اتفاق دستکاری‌های DOM مبتنی بر داده را برطرف می‌کند، بسیاری از ما، از جمله من، هنگام کار با کتابخانه‌ای مانند jQuery بدیهی می‌دانیم.
Angular بدون وابستگی به کتابخانه درست خارج از جعبه اجرا می شود، اگرچه می توان آن را با بسیاری از ماژول های موجود گسترش داد، و البته می توانید ماژول های خود را متناسب با نیازهای خاص خود بسازید. از آنجایی که جاوا اسکریپت خالص است، از مزیت سرور-آگنوستیک بودن نیز برخوردار است.
از آنجایی که به کتابخانه قدرتمندی مانند jQuery عادت کرده اید، به راحتی می توانید آن را با آن ترکیب کنید تا کارهایی را که Angular قبلاً می تواند انجام دهد، انجام دهید. با درک این دام احتمالی، توسعه دهندگان باید این را بگویند: “اگر در تلاش برای ترک این عادت هستید، jQuery را از برنامه خود حذف کنید. واقعاً. Angular دارای سرویس $http و دستورالعمل های قدرتمندی است که تقریباً همیشه آن را غیر ضروری می کند.” یک چیز مطمئن است، اگر به Angular پایبند باشید، حلقه‌های jQuery و رفت و برگشت صریح با سرور در کد شما وجود ندارد، زیرا Angular چنین روش مختصر و تمیزی را برای دستیابی به موارد مشابه ارائه می‌کند.
دستورالعمل ها
Angular از دستورالعمل‌ها برای وصل کردن عملکرد خود به آن استفاده می‌کند page. دستورالعمل ها، که همگی با ng- مقدمه می شوند، در ویژگی های html قرار می گیرند.
برخی از دستورالعمل های رایج که با Angular از پیش ساخته شده اند عبارتند از:
ng-app: این در اصل نقطه ورود اولیه Angular به است page. به Angular می گوید که کجا می تواند عمل کند. تمام چیزی است که برای تعریف a لازم است page به عنوان یک برنامه Angular.
ng-bind: متن یک عنصر را به مقدار یک عبارت تغییر می دهد.
مقدار ‘name’ را در داخل دهانه نمایش می دهد. هر تغییری در “نام” فوراً در DOM هر جایی که از متغیر استفاده می شود منعکس می شود.
کنترلر ng: کلاس جاوا اسکریپت را برای عمل داده شده مشخص می کند. کنترلرها معمولاً در فایل های .js خارجی نگهداری می شوند.
ng-repeat: ساختارهای حلقه بسیار تمیزی را در شما ایجاد می کند page.
<ul>
<li ng-repeat="item in items">
{{item.description}}
</li>
</ul>
بدون زحمت از طریق هر آیتم در مجموعه حلقه می زند.
من خودم هنوز از آنها استفاده نکرده‌ام، اما خوانده‌ام که ایجاد دستورالعمل‌های سفارشی می‌تواند مشکلی دشوار باشد، چیزی که مدتی طول می‌کشد تا سرتان را بپیچید. Angular پیشنهاد می کند ویدیو برای کمک به روشن شدن مفهوم.
چند کد نمونه
همانطور که قبلاً ذکر شد، دستورالعمل ng-app در تگ زمینه را برای اجرای Angular در page.
<html lang="en" ng-app>
را به page برای وارد کردن خود فریم ورک Angular اقدام کنید.
به فایل جاوا اسکریپت خارجی اشاره می کند یا فایل هایی که کلاس های جاوا اسکریپت را نگه می دارند که برنامه Angular شما فراخوانی می کند. یک کلاس بسیار ساده، به عنوان مثال، ممکن است:
function ItemListCtrl ($scope) {
$scope.items = (
{ "description": "coffee pot" },
{ "description": "nerf gun" },
{ "description": "phone" },
);
}
ارسال ng-controller “ItemListCtrl”، نام کلاس جاوا اسکریپت خیالی من، به Angular می گوید که چه کدی را اجرا کند:
<body ng-controller="ItemListCtrl">
و نماد دو پرانتزی به Angular می گوید که چه عباراتی را ارزیابی کند.
ng-repeat یک دستورالعمل تکرار کننده فوق العاده مختصر است که از طریق مجموعه فعلی حلقه می زند و عمل مشخص شده را انجام می دهد یا داده های مشخص شده را ارائه می دهد. خیلی ساده و تمیز است.
<p>Stuff روی my desk:</p>
<ul>
<li ng-repeat="item in items">
{{item.description}}
</li>
</ul>
این تنظیم ساده نمایش داده می شود:
Stuff روی my desk:
coffee pot
nerf gun
phone
مسلماً به نظر نمی رسد که چندان چشمگیر باشد، اما خود این ایده است. بسیار ساده page نشانه گذاری و کنترلرها شروع با Angular را بسیار ساده می کنند.
دریافت داده های واقعی در برنامه شما نیز بسیار ساده است. Angular دوست دارد JSON مصرف کند:
function ItemListCtrl ($scope, $http) {
$http.get(‘items/list.json').success(function (data) {
$scope.items = data;
}
}
این یک شی JSON را برمی‌گرداند که می‌تواند به دلخواه در برنامه Angular شما دستکاری شود.
و برای آزمایش نیز ساخته شده است!
یکی از اصول اساسی Angular تاسیس شد روی این بود که برنامه های ساخته شده با آن کاملاً قابل آزمایش بودند. برای آزمایش انتها به انتها، ما Angular Scenario Runner را برای شبیه سازی تعاملات کاربر با برنامه شما داریم. شما تست های سناریو نوشته شده در جاوا اسکریپت را تغذیه می کنید.
برای رفع اشکال در مرورگر، AngularJS Batarang یک افزونه کروم موجود است روی github.
منابع
همانطور که AngularJS کشش بیشتری به دست می آورد، منابع بیشتری در دسترس خواهند بود، اما در حال حاضر تعدادی از سایت ها وجود دارند که دستورالعمل ها و راه هایی را برای گسترش Angular ارائه می دهند.
این سایت AngularJS خود، البته منبع قطعی شماست. آنها آموزش های ساده و محکمی را ارائه می دهند و نسبتاً فعال هستند حضور Google+
تعدادی Angular وجود دارد مخازن روی GitHub.
ماژول های زاویه ای، مجموعه ای از ماژول های ارسال شده توسط کاربر، از خدمات Backbone تا ادغام Rails را ارائه می دهد.
آیا تا به حال از AngularJS استفاده کرده اید؟ چگونه با کتابخانه های بسیار بزرگتر مانند jQuery مقایسه می شود؟ در نظرات به ما اطلاع دهید.
تصویر/تصویر کوچک ویژه، تصویر زاویه ای از طریق Shutterstock.
(برچسب‌ها برای ترجمه) زاویه‌ای
منتشر شده در 1403-01-25 07:36:03
منبع نوشتار
