باسلام؛ در این پست قراره خیلی سریع با آنگولار جی اس آشنا بشیم. اما بزارید قبل از هر چیزی کمی در مورد آنگولار بدونیم. آنگولار جی اس نسخه اول از پروژه آنگولار هست که توسط گوگل راه اندازی شده و مجموعه کاملی برای ساختن اپ های تک صفحه ای یا همون وب اپ ها هست. اما در نسخه های بعدی دچار تغییرات خیلی زیادی شد، تا اونجایی که سایت جدیدی برای نسخه های بعدی اون در نظر گرفته شد! اما همچنان نسخه اولیه مورد استفاده بسیاری هست چون بسیار خوش دست و ساده هست.
+ نسخه اول رو از «اینجا» و نسخه های جدید تر رو از «اینجا» دریافت کنید.
در این آموزش قراره با نسخه اولیه یک اپلیکیشن یادداشت بسازیم و از قابلیت های آنگولار جی اس استفاده کنیم. ناحیه ی هر اپلیکیشن با اتریبیوت np-app مشخص میشه که یک نام نیز دریافت میکنه و درون یک اپ چندین کنترلر قرار میگیره که ناحیه های مختلفی از اپ رو پوشش میدن. این کنترلر ها هم با اتریبیوت ng-controller مشخص میشن...
خوب برای شروع کد زیر رو درون یک فایل htm ذخیره میکنیم:
خوب ولی برای اینکه یک پروژه آنگولار رو ایجاد کنیم باید یک تگ script بعد از لود خود کتابخونه بسازیم و یک ابجکت از اپ آنگولار رو بگیریم:
var app = angular.module('mytodo', [ ])
اول اینکه این ابجکت app باید در اسکوپ گلوبال باقی بمونه و اینکه همونطور که انتظار میره اولین ورودی با مقدار ng-app باید برابر باشه... اگه اروری دریافت نکردید یعنی شما اولین برنامه رو به درستی ساختید!
خوب حالا یک ورودی متن و یک نوشته برای تست اضافه میکنیم.
تو چیز جدید در کد بالا ng-model و استفاده از {{ varable }} هست. ng-model مقدار یک تگ رو به یک متغیر پیوند «bind» میکنه که در اتربیوت ها استفاده میشه و {{ }} نیز میتونه همین کار رو برای حالت هایی که از اتربیوت استفاده نمیکنید فراهم کنه...
با اجرای کد بالا هرچیزی که در فیلد بنویسید در تگ span تکرار خواهد شد! در نظر داشته باشید که متغیر هایی که درون یک کنترلر تعریف میشوند فقط در همان کنترولر دردسترس هستند.
حال رابط کاربری برای برنامه یادداشت را کامل میکنیم. «شما میتوانید با استفاده متریالایز یا بوت استرپ رابط کاربری زیبا تری را بسازید»
خوب؛ ng-repeat روی هر المنتی که قرار بگیرد حلقه ای ایجاد میکند تا به تعداد آرایه ی مورد نظر آن المنت تکرار گردد. ng-click نیز تابعی در کنترلر را فراخوانی میکند. حالا باید کد هایی را به برنامه اضافه کنیم.
با کد زیر برای هر کنترلری تابعی را مشخص میکنیم:
app.controller('mycont', function($scope){
});
بامشخص کردن نام کنترلر و قرار دادن کتابخانه های مورد نیاز به عنوان ورودی تابع، تابعی را برای کنترلر مشخص میکنیم. تمام متغیر هایی که واسط رابط کاربری با این تابع هستند در $scope قرار میگیرند.
در کنترلر مورد نظرمان؛ یک آرایه تهی را در اسکوپ به وجود میاوریم و تابعی به نام add که در ng-click دکمه اشاره کرده بودیم را ایجاد میکنیم و مقدار متغیر را درون آرایه پوش میکنیم.
برنامه ما کامل شده است! این آموزش شامل بخش های کلی از ابزار های این کتابخانه بود. به زودی به روتینگ، ارتباط اینترنتی و ... نیز خواهیم پرداخت.
موفق باشید.
