شصت دقیقه با AngularJS باشیم – بخش اول

شصت دقیقه با AngularJS باشیم – بخش اول

چند ماهی است که با فریم ورک AnuglarJS آشنا شده ام. در ابتدا که دنبال آموزش های مختلفی از دیگر توسعه دهنده ها بودم، با یک ویدئو ۶۰ دقیقه ای از Angular رو به رو شدم که Dan Wahlin آن را ساخته بود و برای شروع بسیار جذاب می باشد، تا اینکه همین چند روز پیش دیدم که PDF این ویدئو در وب سایت ها قرار داده شده است، پس تصمیم گرفتم این پی دی اف ۱۰۰ صفحه ای را ترجمه کنم، البته تا آنجایی که بتوانم بطور کامل و صحیح آن را ترجمه می کنم. در ابتدا باید بگم که بخاطر اینکه این ویدئو ۱-۲ سال پیش ساخته شده است معیارهای نسخه ۱.۰.۶ آنگولار هماهنگی دارد، یعنی برخی از کدهایی که در این آموزش نوشته می شود در نسخه های جدید قابل اجرا نیست و باید از روش به روز آن نسخه استفاده کرد. در این آموزش فقط از نسخه ۱.۰.۶ استفاده خواهیم کرد، این دلیل نمی شود که چون از نسخه قدیمی استفاده می کنیم پس حتما چیز زیادی یاد نخواهیم گرفت، نه! شما با خواندن یا دیدن این ویدئو با اساس کار آنگولار آشنا می شوید و قادر خواهید بود تا به راحتی با آخرین نسخه از آنگولار کار کنید. به خاطر اینکه تعداد صفحات زیاد است تصمیم گرفتم PDF را به بخش های کوچکتر تقسیم کنم و هر بار چند صفحه از آن را ترجمه و در سایت قرار دهم. به خاطر اینکه خیلی تنبل تشریف دارم پس امیدوارم تا آخر ادامه بدم. خــــوب! از اینجا به بعد از زبان نویسنده این ویدئو یا PDF می خوانید.

 


 

AngularJS-large

 

پــس شما درباره AngularJS از اطراف شنیده اید،  اما شما دقیقا مطمئن نیستید که برای شروع از کجا باید شروع کنید؟

این ویدئو برای شماست!

اصول اولیه آنگولار در شصت دقیقه تمام اصول کلیدی برای دانستن فریم ورک SPA مخفف Single Page Application آنگولار را توضیح می دهد.

 

لینک ویدئو : http://www.youtube.com/watch?v=i9MHigUZKEM

 

dan-wahlin-1

 

اسم من Dan Wahlin است و شما را با برخی از چیزهایی که واقعا دوست دارم هم مسیر می شوم.

وبلاگ من را می توانید در اینجا پیدا کنید و اگر در توییتر راحت هستید، من را با نام danWahlin@ دنبال کنید و با من در ارتباط باشید.

 

dan-2

 

برای شروع قصد داریم بطور %۱۰۰ بر روی AngularJS تمرکز کنیم.

تمام فایل های دمو که قرار است با هم با آنها کار کنیم را از آنجا می توان دریافت کرد:

http://tinyurl.com/AngularJSDemos

من تعدادی دمو واقعا ساده دارم که برای شروع مناسب است و ما آنها را خواهیم ساخت و در آخر هم برخی از بخش های اصلی را با هم دیگر ترکیب می کنیم.

من قصد ندارم تمام ۶۰ دقیقه را صرف چرخیدن در کل کدهای آپ کنم، در عوض شما کاملا می توانید برنامه هایی را با AngularJS درست کنید.

 

dan-3

 

اگر شما تازه با آنگولار آشنا شده اید و چیز زیادی درباره آن نخوانده اید، پیشنهاد می کنم به آدرس http://angularjs.org مراجعه کنید تا تمام اطلاعات لازم را به دست بیاورید. این وب سایت شامل مستندات، اثبات ها، آموزش های و کلی چیز سرگرم کننده دیگر است.

اولین باری که این مستندات را مطالعه می کردم بسیار هیجان زده بودم، درباره آنگولار از یکی از دوستانم شنیده بودم. من در آن زمان هیچی درباره SPA یا Single Page Application نمی دانستم. می دیدم که بسیاری از سکریپت ها با هم دیگر درگیر هستند و قرار است با تمام این چیزهای مختلف سر و کار داشته باشم.

بنابراین من واقعا در مورد آنگولار هیجان زده شده بودم چرا که واقعا هم بود، که وقتی به عنوان یک نوع فریم ورک SPA شناخت شده بود.

اولین باری که به مستندات نگاه می انداختم باید بگویم که بسیاری سوال در ذهنم پدیدار شد.

 

dan-4

 

احساس عجیب و غریبی در آن لحظه داشتم.

بیشتر که وارد آن شدم، بیشتر حس غریب به من دست می داد.

 

dan-5

 

dan-6

 

من کلمه های متفاوتی را مثل transclusion و scope و directive را می دیدم و می گفتم که چرا این چیزها برایم آشنا نیستند؟

در واقع من اصلا مطمئن نبودم که transclusion یک کلمه واقعی است. و این باعث شد احساسم مثل عکس زیر شود.

 

dan-7

 

البته نمی خواهم بگویم که اشک ریخته ایم، اما کمی نا امید شده بودم، نا سلامتی از سال ۱۹۹۰ با جاوا سکریپت کار کرده بودم. و معمولا معمولا مسائل را به کندی درک می کردم و این باعث شد که به خودم این جمله را بگویم. “باشه، شاید واقعا احمق باشم!”

به نظر می رسید که از راه درست درباره آنگولار فکر نمی کنم و نمی دانم که چطور از چه روشی به آن نزدیک شوم.

 

dan-9

 

هنگامی که یک قدم به عقب گذاشتم و ریلکس شدم، گفتم که “آهـــا، اونقدری که من دارم سختش می کنم، سخت نیست×”

 

dan-8

 

dan-10

 

و متوجه شدم که “وای! این عالی است.”

AngularJS واقعا به نظر من یک چارچوب بسیار جذاب است و باعث شد بیشتر سوال هایی که درگیر آنها بودم از بین بروند.

به نظر من این مثل هر چیز دیگر است. با یک فریم ورک جدید: گاهی اوقات فورا بعد از یادگیری، آن را درک می کنید، و گاهی اوقات هم اینطور نیست.

چیزی که در این ویدئو قرار است بببینیم، تمام چیزهای کلیدی است که قبلا آرزو داشتم بیشتر درباره آنها بدانم و امیدوارم باعث شود پرش شروع توسعه AngularJS را بزنید.

 

dan-11

 

هنگامی که تمام چیزهای لازم را یاد گرفتید، تبدیل به یک ابر قدرت مثل عکس بالا می شوید.

شاید زور بازو نه، اما قدرت فوق العاده SPA چرا – قدرت Single Page Application

 

dan-12

 

دستور کار این است …

ما قصد داریم برای شروع با ویژگی های کلیدی که AngularJS فراهم کرده آشنا شویم و چالشی را معرفی می کنم که یک SPA را از ابتدا ایجاد کنیم.

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

سکریپت های بسیاری با هم دیگر درگیر هستند و من در مورد نسخه وابستگی ها و سکریپت هایی که قرار است تغییر یابند نگران هستم.

بنابراین ما درباره آن صحبت می کنیم که چطور آنگولار آنها را هندل می کند.

سپس قصد داریم با برخی از ویژگی های اساسی چارچوب که آنگولار فراهم کرده است شروع کنیم.

آنگاه با برخی از ویژگی های کلیدی که واقعا به آنها نیاز دارید را توضیح می دهم، مثل الفبا آنگولار، Directives یا دستور دهنده ها، Filters و دو روش برای data-binding که خیلی عالی هستند.

من یکی از طرفداران برخی از سکریپت های  مثل فریم ورک KnockoutJS است. اما خواهید دید که Angular یک فریم ورک درست و حسابی است. این فقط یک کتابخانه نیست که تنها یک یا دو چیز داشته باشد: در واقع شامل بسیاری چیز مختلف است.

هنگامی که با Directive، Filter و data-binding آشنا شدیم، بعد درباره Scope، Controllers و Views صحبت می کنیم.

و آنگاه تمام آنها را در داخل ماژول قرار می دهیم و پس از آن درباره چکونگی کار تمام اینها در ماژول ها خواهیم پرداخت، و آنگاه با برخی از مفاهیم SPA مثل Routes آشنا می شویم.

 

پایان قسمت اول