در پیش مقدمه ای به AngularJs، در مورد بعضی از امکانات مورد علاقه ام در این کتابخانه اشاره کردم. ولی به طور کلی بد نیست که تعریفی رسمی (یا شاید غیر رسمی!) از این کتابخانه در ذهن داشته باشیم. تیم تولید کننده این کتابخانه، AngularJs را بیشتر با مضمون زیر معرفی می کنند.
AngularJs کتابخانه ای است که با تکنولوژی های پر استفاده وب مانند JavaScript، Css، HTML ساخته شده تا برنامه نویسی وب را آسانتر از همیشه کند.
با در نظر گرفتن تعریف کلی بالا خود من هیچ مرز مشخصی برای امکانات موجود یا آینده این کتابخانه نمی توانم در نظر بگیرم.
برای شروع برنامه نویسی با AngularJs باید کتابخانه را در صفحات خود link بدهید. راههای مختلفی برای دریافت angularJs موجود است که به طور خلاصه به صورت زیر هستند.
- از طریق nuget: Install-Package angularjs
- از طریق bower: bower install angular
- دانلود کد: https://angularjs.org/
پس از این که سورس AngularJs را در صفحات خود link کردید به راحتی و بدون هیچ تنظیمات خاصی می توانید از این کتابخانه استفاده کنید.
برنامه زیر را در نظر بگیرید. این برنامه چند امکان ابتدایی در AngularJs را استفاده می کند.
ng-app: از این directive (بعدا بیشتر در مورد directive ها صحبت خواهم کرد ولی الان فرض کنید چیزی مانند attribute های HTML هستند) برای مشخص کردن بخش هایی از صفحه به عنوان برنامه AngularJs استفاده می کنیم. خیلی وقت ها و بیشتر در برنامه های single page این تگ در body قرار می گیریند (مانند مثال من) ولی این directive میتواند در هر تگی که شامل محتویات برنامه ما است قرار گیرید. برای تمرین این directive را بردارید و در div زیری تگ body قرار دهید. می بینید که برنامه درست کار می کند.
فرض کنید وقتی AngularJs در صفحه بالا می آید دنبال تگ های ng-app می گردد. با استفاده از این تگ ها میتواند تشخیص دهد که باید فرایند به اصطلاح bootstrapping را روی چه تگ هایی و با چه اطلاعاتی انجام دهد. یکی از استفاده های قشنگ این امکان وقتی است که شما برنامه ای دارید که قبلا به طور کامل با کتابخانه های دیگری نوشته اید و حتی single page هم نیست. ولی در بخشی از صفحات خاص می توانید با استفاده از این directive برنامه های AngularJs ای خود را بالا بیاورید.
ng-controller و myController: در AngularJs کامپوننتی به نام controller وجود دارد که می توان آن را به عنوان initializer و اضافه کننده بخشی از رویه ها به view در نظر گرفت. در مثال بالا اگر دقت کرده باشید ما از چند متغیر name و changed استفاده کردیم. view مورد نظر ما )همانHTML مان) انتظار خواهد داشت که در زمان اجرا در scope$ خودش این متغیر ها وجود داشته باشند. همان طور که در مطلب قبل گفتم scope$ یک شی جاوااسکریپتی ساده است. الان چطور باید مقادیر مربوط به name و changed را درون این متغیرها بگذاریم؟ اینجاست که controller کمکمان می کند. وقتی با استفاده از directive مورد نظر (ng-controller) نام controller خودمان را به آن پاس می دهیم در واقع به AngularJs می گوییم کار initialize کردن scope$ مربوط به view را به آن controller بسپارد (در این مثال myController).
به کد بالا اگر دقت کرده باشید تابع myController ورودی ای به نام scope$ دارد. این ورودی در زمان اجرا دقیقا همان شی ای است که view مورد نظر ما (یا هر view ای که این controller را برای خودش انتخاب کرده است) مورد استفاده قرار خواهد داد.
scope$: بیشتر این شی را مانند چسبی بیین view و controller اش در نظر می گیرند! تمام ارتباط بین این دو کامپوننت با استفاده از scope$ پیاده سازی می شود. در این بخش یک امکان مهم به عنوان two way databinding وجود دارد. این امکان را اینطور تعریف می کنم که هر وقتی از طریق HTML مقادیر property های scope$ تغییر کرد controller متوجه خواهد شد (خط مربوط به استفاده از watch$ را ببینید) و هرگاه controller تغییری به هر متغیری داد View متوجه خواهد شد. به همین راحتی.
توجه: اگر سوالات زیادی در ذهن شما ایجاد شد نگران نباشید. در مورد هریک از این بخش ها به طور مفصل بحث خواهیم کرد.
توجه: از JsBin هایی که به عنوان مثال استفاده می کنم، شما هم استفاده کنید و بعضی سعی و خطاها را به صورت live انجام دهید.