توسعه یک برنامه هیجان انگیز با انگولار 1#

توسعه یک برنامه هیجان انگیز با انگولار 1#
انگولار یک فریم ورک جاوا اسکریپتی بسیار قدرتمند هست که قابلیت های زیادی برای برنامه نویسان و طراحان اپلیکیشن داره. این فریم ورک که توسط گوگل معرفی و توسعه داده شده به شما کمک می کنه که اپلیکیشن خودتون رو بی نقص تر بسازین. هدف از این آموزش علاوه بر آشنایی با دستورات اولیه انگولار ایجاد یک پروژه واقعی برای درک بهتر کار با این فریم ورک قدرتمنده.
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
جای بروشور دیواری
خرید جای بروشور دیواری و رومیزی
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
تعمیر لوازم خانگی
تعمیر جاروبرقی، مایکروفر، بخارشوی، ظرفشویی، لباسشویی، سولاردام، کولرگازی
خودتان را اینجا معرفی کنید

همون طور که حتماً باهاش مواجه شدین، برنامه های مدرن جاوا اسکریپت از ساختار MVC برای برنامه نویسی استفاده می کنن، خب انگولار هم همینطور. تو ساختار MVC  داده ها به عنوان یک مدل شناخته می شن و می تونن از یک ساختار داده ای خارجی مثل یک داکیومنت json  یا حتی یک پایگاه داده شامل بشن. هر زمانی که در مورد view شنیدید بدونید که یک قالب را برای نمایش داده ها اختصاص میده و کنترل ها برچسبی هستند که می تونن داده ها یا همون مدل ها رو به view وصل کنن.
این دوره آموزشی برای کمک به یادگیری AngularJS به صورت سریع و کارآمد طراحی شده که در طول این دوره آموزشی با موارد زیر آشنا خواهید شد؛ 
  1. اول از همه باید با مفاهیم اولیه AngularJS آشنایی پیدا کنیم که شامل :  directives, expressions, filters, modules, and controllers
  2. بعد باید در مورد AngularJS مواردی مانند Events, DOM, Forms, Input, Validation, Http,  و ... را هم یاد بگیریم.
قبل از یادگیری AngularJS باید یه پیشنیاز اولیه از HTML، CSS و JavaScript داشته باشیم. همون طور که گفتیم AngularJS  یک فریم ورک جاوا اسکریپت هست، یک کتابخانه که با JavaScript نوشته شده و توسط Google ساخته و پشتیبانی می شه،  AngularJS  برای اپلیکیشن های تک صفحه ایی Single Page Applications یا همان (SPA) بسیار مناسب است و میشه اون رو با یک تگ <script> به صفحه اضافه کرد (نحوه نصب انگولار در بخش ایجاد پروژه به صورت مفصل تر توضیح داده خواهد شد)
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
انگولار و گسترش html
AngularJS  توسعه و گسترش تگ های HTML با attribute های جدید رو با خودش آورد.  AngularJS تگ های HTML  رو با directive ها توسعه می ده و تمامی directive های AngularJS با کلمه ng شروع می شن.
  1. دایرکتیو ng-app یک برنامه AngularJS را تعریف می کند. در واقع محدوده فعالیت یک برنامه AngularJS را مشخص می کنه.
  2. دایرکتیو ng-model مقادیر کنترلهای HTML چون (input, select, textarea) را به داده های برنامه می چسباند یا bind  می کند.
  3. دایرکتیو ng-bind داده های برنامه را به view می چسبونه، که درواقع همون html باشه.
در واقع ng-model اطلاعات را از روی ورودی یا همان کنترل های (input,select,textarea) دریافت کرده و این اطلاعات را به ng-bind ارسال می کند و در نهایت ng-bind اون و به صفحه نمایش انتقال میدهد.
توضیح کد :
وقتی یک صفحه لود شد AngularJS به صورت خودکار وارد عمل میشه و از طریق دایرکتیو ng-app  میگه که برنامه از کدام تگ <div> شروع می شه.(محدوده فعالیت رو مشخص می کنه).
دایرکتیو ng-model مقدار تایپ شده در input و به متغییر name می چسبونه.(همونطور که می بینید در برنامه از یک کنترل input به همراه ng-model=”name” استفاده شده است، در اینجا مقدار وارد شده به متغییر name می چسبد)
دایرکتیو ng-bind مقدرا متغییر name (همان مقدار bind شده در ng-model) را به داخل تگ <p> اضافه می کنه.

Directive ها در انگولار
همان طور که مشاهده کردید تمامی دایرکتیوهای AngularJS با پیشوند ng- شروع می شوند.  دایرکتیو ng-init برای مقدرادهی اولیه در برنامه بکار می رود.
نکته: برای داشتن یک صفحه معتبر HTML می توانید به جای استفاده از-ng از -ng-data استفاده کنید.
عبارت های انگولاری
AngularJS Expressions یا عبارت های انگولاری داخل دوتا آکولاد نوشته میشن، مثل {{expression}}. اینطوری خروجی اون مقداری هست که اونجا نوشته شده.
از این عبارت ها برای bind کردن اطلاعات به html استفاده میشه و مثل ng-bind  عمل می کنن، چون وقتی از expression استفاده میکنین، دقیقاً مقدار متغیر در اون لحظه نمایش داده میشه، همونطور که تو جاوا اسکریپت از expression  استفاده میشه.
نکته؛ two way binding یکی از قابلیت های انگولاره که اینجا میشه بهش اشاره کرد
حالا اگر از مثال بالا ng-app رو از برنامه حذف کنیم، میبینیم چون محدوده برنامه برای انگولار تعریف نشده، اون عبارت همونطور که نوشته شده، بدون اینکه محاسبه بشه توی خروجی میاد.
بررسی expression در انگولار و جاوا اسکریپت؛
  1. مثل جاوا اسکریپت، در انگولار هم expression میتونه شامل عملوند، عملگر و لیترال باشه.
  2. برخلاف جاوا اسکریپت، در انگولار expression ها میتونن لابه لای html نوشته بشن.
  3. برخلاف جاوا اسکریپت، در انگولار expression ها نمیتونن شامل شرط و حلقه و خطاها و ... باشن.
  4. برخلاف جاوا اسکریپت، در انگولار expression میتونه از فیلتر ها پشتیبانی می کنه که نظیر نداره!
متغیر ها در انگولار
مثل همون جاوا اسکریپت!
AngularJS Numbers
همون مثال با استفاده از ng-bind
نکته: بهتره زیاد از ng-init  استفاده نکنین، در بخش آموزش کنترل ها یه روش بهتری واسه مقدار دهی معرفی میشه.
AngularJS Strings
AngularJS Objects
AngularJS Arrays
AngularJS Applications

یه ماژول انگولار که توسط یه اپلیکیشن انگولار تعریف شده و برنامه توسط کنترلر های اون مدیریت می شه، پس در حالت کلی یک دایرکتیو ng-app یک برنامه و دایرکتیو ng-controller کنترلر های اون برنامه رو تعریف می کنن.
همونطور که میبینید، ماژول انگولار اینطوری تعریف میشه؛
var app = angular.module('myApp', []);
و کنترلر های اون هم اینطوری:
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
ماژول ها و کنترل ها رو بعداً بیشتر از این بررسی میکنیم، ولی حالا میخوایم بریم سراغ؛
AngularJS Directives
دایرکتیو ها همون attribute هایی بودن که با ng- شروع میشن و به تگهای html اضافه می شن، اگر یادتون باشه با ng-app به برنامه انگولار شروع میشه، یا ng-init که کار مقداردهی اولیه رو انجام میده، یا ng-model که مقادیر رو از ورودی های html میگرفت و وارد داده های برنامه میکرد، اینها بعضی از دایرکتیو های رایج هستن که انگولار ازشون استفاده میکنه، و شما هم میتونین برای نیازتون جدیدشو بنویسین.
Data Binding
اگر تو مثال بالا که از {{firstName}}  استفاده کردیم دقت کنین، میبینین که هر تغییری توی مقدار بدین، بلافاصله خروجی هم تغییر میکنه، به این میگن bind  کردن، یا همگام سازی که توی این مثال {{firstName}}  با متغیر firstName از طریق ng-model  همگام یا bind شده.
تو مثال بعدی اینکارو با دوتا فیلد تکست انجام دادیم
تکرار کردن html
یکی از دایرکتیو هایی که تو خود انگولار وجود داره، ng-repeat هست که برای تکرار کردن html که داخل اون قرار داره بکار میره.
میشه از ng-repeat در آرایه ها هم استفاده کرد.
کنترلر های انگولار
اپلیکیشن های انگولار با این کنترلر ها هدایت میشن، هر کنترلر یه object جاوااسکریپته که با object constructor استاندارد ساخته میشه. کدهایی که ما داخل هر کنترلر مینویسیم بعد از اینکه صفحه کاملاً لود شد اجرا میشه.
توضیح مثال
  • برنامه ای به اسم myApp با استفاده از ng-app روی تگ div تعریف میشه
  • از طریق دایرکتیو ng-controller یه کنترلر به اسم myCtrl تعریف میشه که خودش یه تابع جاوا اسکریپتیه
  • انگولار مقدار $scope رو به این تابع میفرسته و اجراش میکنه
این $scope شیء یا object برنامه هست که  صاحب همه ی متغیر ها و توابع این برنامه انگولار هست که از طریق {{}} با صدا کردن اسم متغیر میتونیم وسط html بهشون دسترسی داشته باشیم.
  • داخل کنترلر، دوتا مقدار به $scope معرفی میکنیم (firstName و lastName)
  • دایرکتیو ng-model مقدار های اولیهinput  هارو با توجه به مقدار دهی که داخل کنترلر انجام شده وارد میکنه. 
متد های کنترلر
کاری که کنترلر ها میکنن، این هست که با توجه به برنامه نویسی که براشون انجام میدین، جریان برنامه رو هدایت میکنن، توی مثال بالا کنترلری رو دیدیم که فقط دو متغیر رو تعریف میکنه درصورتی که این همه ی کاری نیست که یه کنترلر میتونه انجام بده! برای مثال کنترلرها میتونن تابع هم داشته باشن.
با توجه به اینکه داخل یک برنامه ممکنه کنترلر  های زیادی داشته باشیم، بهتر اینه که کنترلر هارو داخل فایل های جدامثلا (personController.js) ذخیره کنیم، نه بین تگ های script و اینطوری با لود کردن این فایل داخل html کنترلر هارو توی برنامه داریم.


<div ng-app="myApp" ng-controller="personCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
پس فایل personController.js یه جا دیگه به اینصورت ذخیره میشه و به صفحه لینک میشه.
angular.module('myApp', []).controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe",
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
خوب!!!!!!! تا اینجای مطالب با AngularJS تا حدودی آشنا شدید، در جلسات بعدی با تکمیل دستورات وارد پروژه اصلی می شویم. امیدورام که خوشتون اومده باشهwink

نیلوفر افشار کارشناسی ارشد هوش مصنوعی خونده و چند سالی می شه که توسعه دهنده FrontEnd هست و بصورت تخصصی با Sass و Bootstrap کار می کنه. اون همیشه در زمینه مباحث و تکنولوژی های جدید در حوزه وب تحقیق می کنه.

نظرات و سوالات کاربران

ارسال پاسخ لیلا
لیلا
یکشنبه ۰۳ بهمن ۱۳۹۵ ۰۵:۴۹
بسیار عالی آموزش داده بودید ممنون
ارسال پاسخ Mohammad hosein Saghatforoush
Mohammad hosein Saghatforoush
چهارشنبه ۰۱ مهر ۱۳۹۴ ۱۶:۲۰

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

ارسال پاسخ نیلوفر افشار
نیلوفر افشار
سه شنبه ۲۴ شهریور ۱۳۹۴ ۱۲:۲۷
در پاسخ به دیدگاه goo99p ارسال شده در دوشنبه ۲۳ شهریور ۱۳۹۴ ۱۸:۴۷

سلام ممنون عالی بود...!

ادامه بدید که منتظریم!

مرسی از توجهتون :)

ارسال پاسخ نیلوفر افشار
نیلوفر افشار
سه شنبه ۲۴ شهریور ۱۳۹۴ ۱۲:۲۷
در پاسخ به دیدگاه Massoud Asadi ارسال شده در دوشنبه ۲۳ شهریور ۱۳۹۴ ۲۲:۴۹

مفید و جامع ! ممنون

ممنون

ارسال پاسخ Massoud Asadi
Massoud Asadi
دوشنبه ۲۳ شهریور ۱۳۹۴ ۲۲:۴۹

مفید و جامع ! ممنون

ارسال پاسخ goo99p
goo99p
دوشنبه ۲۳ شهریور ۱۳۹۴ ۱۸:۴۷

سلام ممنون عالی بود...!

ادامه بدید که منتظریم!