توسعه یک برنامه هیجان انگیز با انگولار 1#
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
افزونه فرم ساز آسان
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
خرید ورق گالوانیزه رنگی
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
کارگاه رویه کوبی در تهران
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
خودتان را اینجا معرفی کنید
بهترین کارگاه رویه کوبی و تعمیر مبل راحتی و استیل در تهران با قیمت و کیفیت عالی
همون طور که حتماً باهاش مواجه شدین، برنامه های مدرن جاوا اسکریپت از ساختار MVC برای برنامه نویسی استفاده می کنن، خب انگولار هم همینطور. تو ساختار MVC داده ها به عنوان یک مدل شناخته می شن و می تونن از یک ساختار داده ای خارجی مثل یک داکیومنت json یا حتی یک پایگاه داده شامل بشن. هر زمانی که در مورد view شنیدید بدونید که یک قالب را برای نمایش داده ها اختصاص میده و کنترل ها برچسبی هستند که می تونن داده ها یا همون مدل ها رو به view وصل کنن.
این دوره آموزشی برای کمک به یادگیری AngularJS به صورت سریع و کارآمد طراحی شده که در طول این دوره آموزشی با موارد زیر آشنا خواهید شد؛
- اول از همه باید با مفاهیم اولیه AngularJS آشنایی پیدا کنیم که شامل : directives, expressions, filters, modules, and controllers
- بعد باید در مورد AngularJS مواردی مانند Events, DOM, Forms, Input, Validation, Http, و ... را هم یاد بگیریم.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
انگولار و گسترش htmlAngularJS توسعه و گسترش تگ های HTML با attribute های جدید رو با خودش آورد. AngularJS تگ های HTML رو با directive ها توسعه می ده و تمامی directive های AngularJS با کلمه ng شروع می شن.
- دایرکتیو ng-app یک برنامه AngularJS را تعریف می کند. در واقع محدوده فعالیت یک برنامه AngularJS را مشخص می کنه.
- دایرکتیو ng-model مقادیر کنترلهای HTML چون (input, select, textarea) را به داده های برنامه می چسباند یا bind می کند.
- دایرکتیو ng-bind داده های برنامه را به view می چسبونه، که درواقع همون html باشه.
توضیح کد :
وقتی یک صفحه لود شد 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 در انگولار و جاوا اسکریپت؛
- مثل جاوا اسکریپت، در انگولار هم expression میتونه شامل عملوند، عملگر و لیترال باشه.
- برخلاف جاوا اسکریپت، در انگولار expression ها میتونن لابه لای html نوشته بشن.
- برخلاف جاوا اسکریپت، در انگولار expression ها نمیتونن شامل شرط و حلقه و خطاها و ... باشن.
- برخلاف جاوا اسکریپت، در انگولار 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 معرفی میکنیم (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 تا حدودی آشنا شدید، در جلسات بعدی با تکمیل دستورات وارد پروژه اصلی می شویم. امیدورام که خوشتون اومده باشه
نظرات و سوالات کاربران
سلام
اگر اموزش هاتون به صورت فیلم های اموزشی قرار بدین خیلی بهتره
با تشکر از وب سایت خوبتون
مرسی از توجهتون :)
ممنون
مفید و جامع ! ممنون
سلام ممنون عالی بود...!
ادامه بدید که منتظریم!