سیب فارسی

شب و روزنوشته های من | داستان سیبی که هر روز به زمین می خورد!
آموزش Angular.js – قسمت اول
27 اکتبر 15

قصد دارم در سیب فارسی چند پست مقدمه ای بر فریم ورک جاوا اسکریپتی و محبوب angular.js را به زبان فارسی نوشته و ارسال کنم. همانطور که گفتم آنچه نوشته خواهد شد تنها مقدمه ای بر angular.js خواهد بود و تصمیم فعلی من اینه که بین 3 تا 5 پست مطالبم و ارائه کنم با توجه به این موضوع قطعا مطالب بیشتر موضاعات essentials این framework javascript خواهد بود.

قطعا اگر نظرات برای ادامه کار بیاد می تونه که این مطلب ادامه داشته باشه. به سوالات هم در سیب فارسی جواب داده خواهد شد. سعی میشه که به صورت کاربردی مفاهیم ارائه بشه.

قطعا پست ها هم کوتاه خواهد بود. این مطلب را هم اضافه کنم ممکنه در آینده آموزش های دیگری هم ارائه کنم و تمام مطالب این آموزش تحت عنوان آموزش Angular.js دسته بندی خواهد شد. و احتمال اینکه پست ها بروزرسانی شود هم بسیار زیاد است. بریم سراغ قسمت اول؛

آموزش Angular.js – قسمت اول

angular یک فریم ورک جاوا اسکریپت متن یاز جاوا اسکریپتی است. که توسط گوگل توسعه و نگهداری شده است. این فریم ورک در دسته چارچوب های SPA-single page applications یا چارچوب های مناسب برای توسعه اپلیکیشن های تک صفحه ای می باشد. این فریم ورک جاوا اسکریپتی بسیار مناسب برای چارچوب های تست و توسعه منطبق بر  (model–view–controller (MVC و (model–view–viewmodel (MVVM می باشد.

ویژگی های AngularJS در این بخش feature های مختلف AngularJS را معرفی خواهم کرد. یکی از مواردی که هم مثال هایی در آموزش می نویسید و هم نمونه کارهای دیگر خاصه با این زبان آغاز می کنید مهم هست که مد نظر قرار دهید from scratch یا به عبارت دیگر از ابتدا و صفر شروع نکید و از نمونه کد های موجود استفاده کنید.

مورادی که در این بخش معرفی خواهم کرد  شامل Directives, Filters و Data Binding می شود ضمن اینکه Views, Controllers و Scope را نیز مورد بررسی قرار خواهیم داد.

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

این موضوع مزایای بسیاری دارد و در pattern های مخلف به سرعت بالاتر در لود و موثر بودن زیر ساخت و موارد دیگر اشاره شده است. نگهداشت DOM و کنترل صفحات مختلف از جمله چلنج های SPA ها می باشد.

از سایت http://angularjs.org می توانید کتابخانه جاوااسکریپتی AngularJS رادانلود کنید. خوب در این قسمت import کردن کتابخانه دانلود شده به اولین برنامه تستی مان را نشان می دهیم:

<!DOCTYPE html>
<html lang="en" ng-app="samples">
<head>
 <title>AngularJS Morka example</title>
 <script src="angular.min.js"></script>
</head>
<body>
</body>

directives: directive در واقع مجموعه ای از میانبرها و روش هاست که به html برنامه کمکمم می کند، به عبارت دیگر موجب سهولت و ساده تر شدن Html کد های برنامه می شود.

<!DOCTYPE html>
<html lang="en" ng-app="samples">
<head>
 <title>AngularJS Morka example</title>
 <script src="angular.min.js"></script>
</head>

<body>

<div class="container">



Name: <input type="text" ng-model="firstName">



You wrote: {{ firstName }}


</div>

</body>

هر جایی که ما ng- دیدیم یعنی در آنجایک directive داریم. ضمن اینکه می توان دایرکتیو custom نیز ایجاد کرد.
در کد بالا ng-model=”firstName” مدل مربوط به کامپوننت را معرفی می کند به عبارتی آی دی این کامپوننت مشخص می شود واین {{ firstName }} عبارت کار data binding را انجام می دهد و هر آنچه در inputtext تایپ شو در پاراگراف تعریف شده نمایش داده می شود.
توجه کنید که ng-app می بایست حتما اضافه شود و scope برنامه شما را مشخص می کند در آینده خواهیم دید که از ng-app می توان روی div ها هم استفاده نمود و حتی چند scope را با چند ng-app مختلف در یک صفحه ایجاد نمود.
پس تا اینجای کار روی کدینگ سه قسمت در angular معرفی شد که شامل
Include the ng-app
Include the ng-model
Bind to that model
می شود.
در این قسمت ضمن معرفی AngularJS کتابخانه آن را نیز معرفی کردیم و با معرفی Directives اولین پروژه خود را بالا اوردیم.

پایان قسمت اول – باقی قسمت ها هم در  سیب فارسی دنبال کنید.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *