ساخت برنامه با AngularJS – آماده سازی

ساخت برنامه با AngularJS – آماده سازی

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


حال شما این آمادگی را دارید که برنامه ی phonecat را با AngularJS درست کنید. در اولین مرحله، با مهمترین فایل های کد آشنا شدیم، یاد گرفتیم که چطور شروع به توسعه سرور همراه با Angular کنیم، و یاد گرفتیم که چطور برنامه را در مرورگر اجرا کنیم، اگر قسمت قبل را مطالعه نکردید، پیشنهاد می کنم برای درک بهتر ادامه مطلب ساخت برنامه با AngularJS – مقدمه را مطالعه کنید.

در دایرکتوری angular-phonecat دستور زیر را اجرا کنید:

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

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

اگر شما در حال حاضر ایم مراحل را انجام نداده اید، بنابراین نیاز دارید که وابستگی ها (dependencies) را با دستور زیر اجرا کنید:

برای دیدن اجرای برنامه در مرورگر، یک پنجره جدید از خط فرمان باز کرده، و آنگاه دستور npm start را برای شروع وب سرور اجرا نمایید. حال، یک پنجره مرورگر برای برنامه خود باز کرده و به آدرس زیر مراجعه کنید:

حال می توانید  صفحه ای را در مرورگر خود ببینید. صفحه ی جذابی نیست، اما اشکال ندارد.

صفحه ی اچ تی ام الی که جمله ی !Nothing here yet با کد HTML زیر ساخته شده است. کد زیر شامل برخی از عناصر کلیدی Angular می باشد که در ادامه خواهیم دید.

app/index.html

 


 

آنچه که کد انجام می دهد.

دستور دهنده ng-app:

صفت ng-app یک دستور دهنده ی Angular بنام ngApp را نشان می دهد. (Angular از spinal-case برای ویژگی های سفارشی خود استفاده می کند و از سبک camelCase برای اجرای دستورات مربوطه استفاده می کند). این دستور دهنده به عنوان یک پرچم (flag) در عناصر HTML قرار می گیرد که Angular باید عناصر ریشه ای برنامه ما را در نظر بگیرد. این به توسعه دهنده های برنامه این آزادی را می دهد که به Angular بگویند که آیا کل صفحه HTML را می خواهند یا فقط می خواهند بخشی از آن را به عنوان برنامه Angular تلقی قرار دهند.

برجسب اسکریپت AngularJS:

این کد اسکریپت angular.js را دانلود می کند و یک callback را ثبت می کند که توسط مرورگر، هنگامی که تمام HTMLهای صفحه دانلود شد اجرا شود. هنگامی که callback اجرا شد، Angular به دنبال دستور دهنده ی ngApp می گردد. اگر Angular دستور دهنده را پیدا کرد، برنامه را با ریشه ی برنامه با عناصری که برای هر دستور دهنده ngApp تعریف شده است راه اندازی می کند.

این دستور دو ویژگی اصلی از قابلیت های قالب بندی Angular را نشان می دهد:

  • اتصال، با دو {{ }} نشان داده شده است
  • یک عبارت ساده '!' + 'yet' در این اتصال مورد استفاده قرار می گیرد.

اتصال به Angular می گوید که باید یک عبارت را بسنجد و نتیجه در داخلی یک DOM در محل اتصال قرار دهد. به جای اینکه یک بار وارد کنیم، همانطور در مرحله ی بعد خواهیم دید، یک اتصال در به روز رسانی محتوا موثر می باشد، هر کجا که عبارات نیاز به تغییر دارند.

Angular expression شبیه به کدهای جاوا اسکریپت است که توسط Angular در چارچوب دامنه مدل فعلی به جای حوزه ی global ارزیابی می شود.

همانطور که انتظار داشتیم، وقتی این قالب یکبار توسط Angular مورد پردازش قرار می گیرد، صفحه ی HTML ما متن !Nothing here yet را چاپ می کند.

 


راه اندازی برنامه AngularJS

راه اندازی برنامه های AngularJS بطور خودکار با استفاده از دستور دهنده های ngApp در بسیاری از موارد راحت و مناسب است. در موارد پیشرفته، مانند زمانی که از لودر اسکریپت استفاده می کنیم، شما می توانید از imperative / manual way برای راه اندازی برنامه خود استفاده کنید.

3 چیز مهم وجود دارد که در طول راه انداز برنامه اتفاق می افتد:

  1. injector که برای تزریق وابستگی ایجاد شده استفاده می شود.
  2. injector آنکاه root scope را ایجاد می کند که چارچوب به مدل برنامه ما تبدیل می شود.
  3. در آخر Angular عناصر ریشه در ngApp را کامپایل می کند، هر دستور دهنده ای یا هر اتصالی که در طول مسیر پیدا شد را مورد پردازش قرار می دهد.

هنگامی که یک برنامه راه اندازی می شود، صبر می کند رویدادهای مرورگر (events) اجرا شود (مثل کلیک کردن ماوس، فشار کلید، یا از راه رسیدن پاسخ های HTTP) که ممکن است مدل را تغییر دهید. هنگامی که چنین رویداد رخ می دهد، Angular هر گونه تغییر در مدل و در صورت پیدا کردن تغییری تشخیص می دهد، Angular همچنین آنها را در view با استفاده از بروز رسانی تمام اتصالات منعکس می کند.

ساختار برنامه ما در حال حاضر بسیار ساده است. قالب شامل یک دستور دهنده و یک اتصال ایستا است، و مدل ما خالی می باشد. که به زودی تغییر داده می شود!

tutorial_00


 

تمام این فایل ها در بوشه ای من چکار می کند؟

بسیاری از فایل های که در پوشه ی کاری شما وجود دارد از پروژه ی angular-seed-project می آید که به طور معمول برای راه اندازی پروژه جدید Angular استفاده می شود. پروژه ی seed یک از پیش تنظیم شده برای نصب فریم ورک Angular (از طریق bower در پوشه ی /app/bower_components) و ابزارها برای توسعه یک برنامه وب (از طریق npm)

برای این منظور در این آموزش، ما angular-seed را با تغییرات زیر تغییر می دهیم:

  • حذف مثال های برنامه
  • اضافه کردن عکس های موبایل در app/img/phones/
  • اضافه کردن فایل های داده (JSON) در app/phones/
  • اضافه کردن یک وابستگی در Bootstrap در فایل bower.json

 

آزمایش

سعی کنید به فایل index.html یک عبارت جدید که برخی از عملیات ساده ریاضی را انجام می دهد را اضافه کنید: