AngularJS

.
‫آموزش‬AngularJS
‫آن‬ ‫برای‬.‫ندارند‬ ‫وقت‬ ‫که‬ ‫هایی‬
‫قلی‬ ‫بیات‬ ‫زهرا‬‫الله‬
‫قلی‬ ‫بیات‬ ‫علی‬‫الله‬

‫آموزش‬AngularJS
‫آن‬ ‫برای‬.‫ندارند‬ ‫وقت‬ ‫که‬ ‫هایی‬
‫مولف‬‫ین‬‫الله‬ ‫قلی‬ ‫بیات‬ ‫زهرا‬ :–‫الله‬ ‫قلی‬ ‫بیات‬ ‫علی‬
‫جلد‬ ‫طراح‬‫الله‬ ‫قلی‬ ‫بیات‬ ‫زهرا‬ :
‫راه‬ ‫کتاب‬ ‫سایت‬ : ‫ناشر‬
‫مشخصات‬‫ظاهری‬:
‫فروردین‬ :‫انتشار‬ ‫سال‬95
‫قیمت‬:‫رایگان‬

:‫فهرست‬
‫تقد‬‫ی‬‫م‬‫به‬:
‫مقدمه‬:
‫مراحل‬‫ا‬‫ی‬‫جاد‬AngularJS
‫قدم‬‫اول‬:‫درست‬‫کردن‬‫ی‬‫ک‬‫صفحه‬HTML‫ساده‬
‫قدم‬‫دوم‬:‫اضافه‬‫کردن‬AngularJS‫به‬‫پروژه‬
‫قدم‬‫سوم‬:‫اضافه‬‫کردن‬‫عبارت‬‫ها‬‫ی‬controller-ng‫و‬model-ng
‫قدم‬‫چهارم‬:ng-app‫و‬‫مفهوم‬scope
‫قدم‬‫پنجم‬:‫راه‬‫انداز‬‫ی‬‫پروژه‬‫و‬‫د‬‫ی‬‫دن‬‫نتا‬‫ی‬‫ج‬
‫قدم‬‫ششم‬:‫درست‬‫کردن‬Function‫و‬‫اضافه‬‫کردن‬event
‫قدم‬‫هفتم‬:‫اضافه‬‫کردن‬Validator‫ها‬‫ی‬HTML
‫قدم‬‫هشتم‬:‫استفاده‬‫از‬‫خاص‬‫ی‬‫ت‬valid$‫در‬Angular
‫قدم‬‫نهم‬:‫اجرا‬‫ی‬‫برنامه‬
‫قدم‬‫دهم‬:‫کد‬‫کامل‬‫شده‬

:‫به‬ ‫تقدیم‬
‫آقای‬ ‫جناب‬ ،‫مرحومم‬ ‫استاد‬
‫پور‬ ‫شکری‬ ‫مسعود‬ ‫مهندس‬
‫فکر‬ ‫که‬ ‫او‬‫ایده‬ ‫با‬ ‫را‬ ‫ذهنم‬ ‫و‬‫پرورش‬ ‫جدیدش‬ ‫های‬.‫آموخت‬ ‫من‬ ‫به‬ ‫را‬ ‫تعالی‬ ‫به‬ ‫رسیدن‬ ‫راه‬ ‫و‬ ‫داد‬
‫کند‬ ‫شاد‬ ‫را‬ ‫روحش‬ ‫کتاب‬ ‫این‬ ‫امیدوارم‬.
‫ی‬ ‫عزیزا‬ ‫ا‬ ‫شمم‬ ‫از‬‫این‬ ‫که‬‫می‬ ‫را‬ ‫کتاب‬‫می‬ ‫خواهش‬ ‫ید‬ ‫خوا‬‫ه‬ ‫فات‬ ‫یف‬ ‫روحش‬ ‫شممادی‬ ‫برای‬ ‫کنم‬
.‫بفرستید‬

:‫مقدمه‬
AngularJS(ِ‫ا‬‫گیولر‬‫ِی‬‫ج‬‫یک‬ )‫اس‬‫ی‬‫فریم‬ ‫بهترین‬ ‫و‬ ‫شهورترین‬ ‫م‬ ‫از‬‫ورک‬‫سکریپت‬ ‫ا‬ ‫جاوا‬ ‫های‬
.‫مممت‬‫م‬‫اس‬‫قدر‬ ‫ویژگی‬‫ت‬‫ند‬Data Binding‫در‬ ‫فه‬ ‫دوطر‬AngularJS‫با‬ ‫کردن‬ ‫کار‬
‫ممیای‬‫م‬‫اش‬JavaScript‫و‬HTML‫پیدایش‬ ‫مملی‬‫م‬‫اش‬ ‫دلید‬ .‫ممت‬‫م‬‫اس‬ ‫کرده‬ ‫مماده‬‫م‬‫س‬ ‫ممیار‬‫م‬‫بس‬ ‫را‬
AngularJS‫بایندی‬‫ن‬‫بود‬ ‫بایندیگ‬ ‫و‬ ‫بایندینگ‬ ‫و‬ ‫گ‬‫اسمممت‬ ‫ه‬.AngularJS‫بایندیگ‬ ‫یف‬
‫فریم‬‫ورک‬‫است‬‫کاربری‬ ‫رابط‬ ‫که‬HTML‫اشیای‬ ‫به‬ ‫را‬JavaScript‫می‬ ‫بایند‬.‫کند‬
‫بین‬ ‫ارتباط‬ ‫ایجاد‬ ‫برای‬ ‫که‬ ‫کدهایی‬ ‫از‬ ‫زیادی‬ ‫حجم‬ ،‫کار‬ ‫این‬ ‫جام‬ ‫ا‬ ‫با‬HTML‫اشمممیای‬ ‫و‬
JavaScript‫می‬ ‫وشته‬.‫است‬ ‫شده‬ ‫کاسته‬ ‫شد‬

‫از‬ ‫که‬ ‫جا‬ ‫آ‬ ‫از‬AngularJS‫از‬‫الگوهای‬‫طراحی‬MVC‫و‬MVVM‫مان‬‫ز‬ ‫ه‬ ‫طور‬ ‫به‬ ،
‫می‬ ‫ی‬ ‫پشمممتیبا‬‫عنوان‬ ‫به‬ ‫را‬ ‫آن‬ ،‫کند‬MVW(Model-View-Whatever‫یا‬ ‫و‬ )"،‫مدل‬
‫دیگری‬ ‫چیز‬ ‫هر‬ ‫و‬ ‫ویو‬"‫می‬.‫شناسند‬

‫ایجاد‬ ‫مراحل‬:
‫ق‬‫صفحه‬ ‫یک‬ ‫کردن‬ ‫درست‬ : ‫اول‬ ‫دم‬HTML‫ساده‬
‫می‬‫شممامد‬ ‫ط‬ ‫ف‬ ‫که‬ ‫سمماده‬ ‫پروژه‬ ‫یف‬ ‫هم‬ ‫با‬ ‫خواهیم‬HTML،CSS‫و‬JavaScript‫می‬
‫را‬ ‫باشد‬.‫اییم‬ ‫ایجاد‬
‫ک‬ ‫ست‬ ‫در‬ ‫دلخواه‬ ‫سیر‬ ‫م‬ ‫یف‬ ‫در‬ ‫شه‬ ‫پو‬ ‫یف‬ ‫ابتدا‬‫رده‬‫سپس‬ ،Visual Studio‫باز‬ ‫را‬‫کنید‬‫و‬
‫زیر‬ ‫تصویر‬ ‫ند‬ ‫ما‬‫بر‬‫روی‬File->Open->Website‫کلیف‬‫ایید‬.
!!‫نکته‬
‫عنوان‬ ‫به‬ ‫را‬ ‫پوشممه‬ ‫یک‬ ‫ا‬ ‫م‬‫شم‬ ‫که‬ ‫وقتی‬Website‫می‬ ‫باز‬،‫کنید‬Visual Studio
‫فایل‬‫مانند‬ ‫مافی‬‫اضم‬ ‫های‬web.config‫و‬global.asax‫به‬ ‫خودکار‬ ‫مورت‬‫صم‬ ‫رابه‬ ... ‫و‬
‫ی‬ ‫ن‬ ‫اضافه‬ ‫پروژه‬.‫کند‬
‫حاال‬‫ند‬ ‫ما‬‫تصویر‬‫زیر‬‫پوشه‬ ‫مسیر‬‫درست‬ ‫که‬ ‫ای‬‫اید‬ ‫کرده‬ ‫ایجاد‬‫را‬‫آن‬ ‫به‬.‫دهید‬

‫ا‬ ‫ش‬ ‫کار‬.‫رسید‬ ‫پایان‬ ‫به‬ ‫موفقیت‬ ‫با‬ ‫به‬
‫ماده‬‫م‬‫س‬ ‫میار‬‫م‬‫بس‬ ‫پروژه‬ ‫یف‬ ‫متید‬‫م‬‫س‬ ‫توا‬ ‫ا‬ ‫م‬‫م‬‫ش‬‫کنید‬ ‫ایجاد‬‫این‬ .‫دارد‬ ‫وجود‬ ‫آن‬ ‫در‬ ‫چیزی‬ ‫هیچ‬ ‫که‬ ،
‫ط‬ ‫ف‬‫ی‬ ‫دیده‬ ‫آن‬ ‫در‬ ‫هم‬ ‫مایکروسافت‬ ‫مخصوص‬ ‫های‬ ‫فاید‬ ‫که‬ ‫است‬ ‫خالی‬ ‫پروژه‬ ‫یف‬.‫شود‬

‫ه‬ ‫شممف‬ ‫یف‬ ‫بیایید‬HTML‫را‬ ‫آن‬ ‫اسممم‬ ‫و‬ ‫کنیم‬ ‫درسممت‬ ‫سمماده‬HelloWorld.html
.‫بگذاریم‬
‫ه‬ ‫شمممف‬ ‫این‬ ‫در‬HTML‫یف‬TexrBox‫ایجاد‬‫می‬‫ک‬‫و‬ ‫نیم‬‫ام‬‫را‬ ‫آن‬txtHello‫قرار‬
‫می‬.‫دهیم‬‫این‬ ‫سمممپس‬TextBox‫اسممم‬ ‫جاوا‬ ‫تابع‬ ‫به‬ ‫را‬‫ام‬ ‫به‬ ‫کریپتی‬Hello‫خواهیم‬ ‫بایند‬
.‫کرد‬

‫می‬ ‫حاال‬ ‫و‬‫از‬ ‫خواهیم‬AngularJS‫فاده‬ ‫مت‬‫اسم‬ ‫یت‬ ‫موجود‬ ‫دو‬ ‫این‬ ‫کردن‬ ‫ند‬ ‫بای‬ ‫برای‬
‫اییم‬ ‫ن‬.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function Hello() {
this.txthello = "HELLO WORLD";
}
</script>
</head>
<body>
<div id=" HelloWorldScreen">
<input id="txtHello" type="text" />
</div>
</body>
>html</
‫کردن‬ ‫اضافه‬ : ‫دوم‬ ‫قدم‬AngularJS‫پروژه‬ ‫به‬
‫کاربری‬ ‫رابط‬ ‫که‬ ‫حاال‬HTML‫های‬ ‫کالس‬ ‫و‬JavaScrip،‫دادیم‬ ‫قرار‬ ‫خود‬ ‫جای‬ ‫در‬ ‫را‬
‫اول‬ ‫بیایید‬AngularJS‫کار‬ ‫این‬ ‫برای‬ .‫کنیم‬ ‫لود‬ ‫دا‬ ‫را‬‫تصویر‬ ‫ند‬ ‫ما‬‫کلیف‬ ‫راست‬ ‫پروژه‬ ‫روی‬
‫گزینه‬ ‫و‬ ‫کرده‬Manage NuGet Packages.‫کنید‬ ‫تخاب‬ ‫ا‬ ‫را‬

‫ه‬ ‫کل‬Angular،‫کنید‬ ‫وارد‬ ‫جسممتجو‬ ‫کادر‬ ‫در‬ ‫را‬‫سممپس‬AngularJS Core‫ا‬ ‫را‬‫ت‬‫خاب‬
‫ایید‬‫و‬‫بر‬‫ه‬ ‫دک‬ ‫روی‬Install.‫کنید‬ ‫کلیف‬
‫ندی‬ ‫چ‬ ‫مممده‬‫م‬‫ش‬ ‫اهر‬ ‫مممت‬‫م‬‫لیس‬ ‫در‬‫ن‬AngularJS‫که‬ ‫دارد‬ ‫وجود‬Extension‫های‬
AngularJS‫شند‬ ‫با‬ ‫می‬.‫در‬ ‫تدریج‬ ‫به‬ ‫که‬‫ت‬ ‫س‬ ‫ق‬‫خواهیم‬ ‫بت‬ ‫ش‬ ‫ها‬ ‫آ‬ ‫با‬ ‫راجع‬ ‫بعدی‬ ‫های‬
.‫کرد‬‫و‬‫آن‬ ‫ترین‬ ‫مهم‬‫ها‬Angular core‫ا‬ ‫ش‬ ‫پروژه‬ ‫به‬ ‫تا‬ ‫کنید‬ ‫کلیف‬ ‫آن‬ ‫روی‬ ،‫است‬‫اضافه‬
.‫گردد‬
‫می‬ ‫ا‬ ‫ش‬ ،‫نصب‬ ‫از‬ ‫پس‬‫های‬ ‫فایل‬ ‫توانید‬Angular‫پوشه‬ ‫در‬ ‫را‬Scripts.‫ببینید‬

‫حاال‬‫ند‬ ‫ما‬‫زیر‬ ‫مویر‬‫م‬‫تص‬‫تگ‬ ‫از‬ ‫متفاده‬‫م‬‫اس‬ ‫با‬script‫فاید‬ ‫به‬Angular‫خط‬ ‫(به‬Bold‫مده‬‫م‬‫ش‬
)‫کنید‬ ‫گاه‬Reference.‫دهید‬
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<script src="Scripts/angular.js"></script>

‫کردن‬ ‫اضافه‬ : ‫سوم‬ ‫قدم‬‫عبارت‬‫های‬controller-ng‫و‬model-ng
‫کالس‬ ‫اتصال‬ ‫برای‬ ‫حاال‬HelloWorld‫متنی‬ ‫کادر‬ ‫با‬HTML: ‫دارید‬ ‫یاز‬ ‫چیز‬ ‫دو‬ ‫به‬
‫کالس‬ ‫از‬ ‫ه‬ ‫و‬ ‫یف‬ ‫کردن‬ ‫درست‬HelloWorld
‫شی‬ ‫خاشیت‬ ‫تنظیم‬ ،‫دوم‬HelloWorld‫به‬TextBox
‫بممه‬ ‫ممما‬ ‫کممار‬ ‫ایممن‬ ‫بممرای‬controller-ng‫و‬model-ng‫ممیمم‬.‫داریممم‬ ‫از‬
‫به‬controller-ng‫و‬model-ng‫در‬‫گیولر‬ ‫إ‬‫ِی‬‫ج‬‫اس‬directive‫می‬ ‫گفته‬.‫ممود‬‫م‬‫ش‬
‫گیولر‬ ‫إ‬ ‫که‬ ‫باشید‬ ‫داشته‬ ‫یاد‬ ‫به‬‫ِی‬‫ج‬‫امه‬ ‫بر‬ ‫زبان‬ ‫یف‬ ‫اس‬.‫است‬ ‫ی‬ ‫اعال‬ ‫ویسی‬
‫امه‬ ‫بر‬‫و‬‫یسی‬‫اعال‬‫ی‬‫یف‬‫پارادا‬‫یم‬‫امه‬ ‫بر‬‫و‬‫یسی‬‫بدون‬ ‫اسبات‬ ‫م‬ ‫هدف‬ ‫و‬ ‫منطق‬ ‫آن‬ ‫در‬ ‫که‬ ‫است‬
‫گ‬ ‫چگو‬ ‫شرح‬‫ی‬‫ب‬ ‫ها‬ ‫آ‬ ‫جام‬ ‫ا‬‫یان‬‫م‬‫ی‬‫شود‬.‫در‬AngularJS‫ط‬ ‫ف‬ ‫ا‬ ‫ش‬directive‫اضافه‬ ‫را‬ ‫ها‬
‫می‬‫کنی‬‫بگویید‬ ‫آن‬ ‫به‬ ‫را‬ ‫کار‬ ‫آن‬ ‫جام‬ ‫ا‬ ‫گی‬ ‫چگو‬ ‫باشد‬ ‫یاز‬ ‫اینکه‬ ‫بدون‬ ‫و‬ ،‫د‬‫می‬ ‫که‬ ‫کاری‬‫خواهید‬
‫را‬‫می‬ ‫جام‬ ‫ا‬ ‫ا‬ ‫ش‬ ‫برای‬.‫دهد‬

‫دایرکتیو‬controller-ng‫کنترولر‬ ‫از‬ ‫شی‬ ‫یف‬HelloWorld‫را‬ ‫آن‬ ‫و‬ ‫کرده‬ ‫ست‬‫در‬
‫مگ‬‫م‬‫ت‬ ‫مه‬‫م‬‫ب‬div‫می‬ ‫مد‬‫م‬‫ماین‬‫م‬‫ب‬‫و‬ ،‫مد‬‫م‬‫کن‬model-ng‫مد‬‫م‬‫فیل‬ ‫مدار‬‫م‬ ‫م‬input‫مه‬‫م‬‫ب‬ ‫را‬‫پراپرتی‬
txtHello‫می‬ ‫بایند‬.‫کند‬
‫پراپرتی‬ ‫ایش‬ ‫برای‬ ،‫شده‬ ‫داده‬ ‫شان‬ ‫زیر‬ ‫تصویر‬ ‫در‬ ‫که‬ ‫طور‬ ‫ا‬ ‫ه‬txtHello‫ه‬ ‫شف‬ ‫روی‬
‫به‬ ،‫ایش‬{{‫عبارت‬‫مورد‬‫نظر‬}}‫در‬ ‫را‬ ‫چیزی‬ ‫وقتی‬ ‫بنابراین‬ .‫داریم‬ ‫یاز‬TextBox
‫می‬ ‫تایپ‬‫تگ‬ ‫در‬ ،‫کنیم‬div.‫شد‬ ‫خواهد‬ ‫داده‬ ‫ایش‬
<div id=" HelloWorldScreen" ng-controller="HelloWorld">
<input ng-model="txthello" id="txthello" type="text" />
<div id="div1">{{txthello}}</div>
</div>
: ‫چهارم‬ ‫قدم‬ng-app‫مفهوم‬ ‫و‬scope
‫دایرکتیو‬ ‫اگر‬ ‫حاال‬controller-ng‫ه‬ ‫و‬‫ها‬(instance)‫را‬‫می‬ ‫ست‬ ‫در‬‫کند‬.‫اگر‬‫ند‬ ‫ما‬
،‫پایین‬ ‫کد‬‫دایرکتیو‬ ‫چندین‬controller-ng‫ه‬ ‫شف‬ ‫در‬HTML‫شید‬‫با‬ ‫شته‬‫دا‬ ‫خود‬
‫افتاد‬ ‫خواهد‬ ‫اتفاقی‬ ‫چه‬‫؟؟‬
‫یف‬instance‫می‬ ‫درست‬‫چند‬ ‫یا‬ ‫کند‬instance‫؟‬
...‫کنید‬ ‫فکر‬ ‫موضوع‬ ‫این‬ ‫باره‬ ‫در‬
</div>
>div</

‫امه‬ ‫بر‬ ‫یف‬ ‫عنوان‬ ‫به‬ ‫ا‬ ‫شمم‬ ‫که‬ ‫اسممت‬ ‫بدیهی‬‫دارید‬ ‫دوسممت‬ ،‫ویس‬instance‫از‬ ‫مختلف‬ ‫های‬
HelloWorld‫دو‬ ‫هر‬ ‫به‬ ‫ید‬ ‫بتوا‬ ‫و‬ ‫شید‬‫با‬ ‫شته‬‫دا‬div‫در‬ ‫موجود‬‫ه‬ ‫شف‬HTML‫بایند‬
‫که‬ ‫است‬ ‫کاری‬ ‫ان‬ ‫ه‬ ً‫ا‬ ‫دقی‬ ‫این‬ .‫کنید‬AngularJS‫می‬ ‫جام‬ ‫ا‬ ‫ما‬ ‫برای‬.‫دهد‬
‫دو‬ ‫که‬ ‫حاال‬ ‫اما‬instance‫ه‬ ‫ممف‬‫م‬‫ش‬ ‫یف‬ ‫در‬ ‫متفاوت‬HTML‫داریم‬‫(یا‬ ‫ممتفاده‬‫م‬‫اس‬ ‫دوده‬ ‫م‬ ،
scope‫دو‬ ‫این‬ )instance‫می‬ ‫تعیین‬ ‫ه‬ ‫چگو‬‫ه‬ ‫شممف‬ ‫ام‬ ‫ت‬ ‫در‬ ‫آیا‬ .‫شممود‬‫ی‬HTML‫قابد‬
‫؟‬ ‫است‬ ‫استفاده‬
‫(یا‬ ‫اسمممتفاده‬ ‫دوده‬ ‫م‬scope‫دو‬ ‫این‬ )instance‫تگ‬ ‫با‬>div<‫تگ‬ ‫با‬ ‫و‬ ‫شمممده‬ ‫آغاز‬
>div</‫می‬ ‫یان‬‫پا‬ ‫به‬.‫رسمممد‬AngularJS‫دایرکتیو‬ ‫به‬ ‫وقتی‬controller-ng
‫برخو‬‫می‬ ‫رد‬‫این‬ ،‫کند‬instance‫می‬ ‫خودکار‬ ‫شورت‬ ‫به‬ ‫را‬ ‫ها‬.‫سازد‬
‫این‬ ‫بخواهیم‬ ‫اگر‬ ‫حاال‬instance‫به‬ ‫هم‬ ‫با‬ ‫را‬ ‫مان‬‫م‬‫هایش‬ ‫داده‬ ‫و‬ ‫مند‬‫م‬‫باش‬ ‫مته‬‫م‬‫داش‬ ‫ارتباط‬ ‫هم‬ ‫با‬ ‫ها‬
‫د‬ ‫بگذار‬ ‫اشتراک‬‫بایدکرد؟؟‬ ‫چه‬
‫ام‬ ‫به‬ ‫چیزی‬ ‫ما‬app-ng‫می‬ ‫جام‬ ‫ا‬ ‫ما‬ ‫برای‬ ‫را‬ ‫کار‬ ‫این‬ ‫که‬ ‫داریم‬.‫دهد‬app-ng‫شمممی‬ ‫یف‬
‫می‬ ‫ست‬‫در‬‫ام‬ ‫ت‬ ‫آن‬ ‫طریق‬ ‫از‬ ‫که‬ ‫کند‬controller‫کنترل‬ ‫را‬ ‫ها‬‫کرد‬‫آن‬ ‫به‬ ‫و‬‫ها‬‫می‬ ‫را‬ ‫امکان‬ ‫این‬
‫دهد‬‫داده‬ ‫ند‬ ‫بتوا‬ ‫تا‬.‫د‬ ‫بگذار‬ ‫اشتراک‬ ‫به‬ ‫هم‬ ‫با‬ ‫را‬ ‫هایشان‬

‫پنجم‬ ‫قدم‬:‫نتایج‬ ‫دیدن‬ ‫و‬ ‫پروژه‬ ‫اندازی‬ ‫راه‬
‫پروژه‬ ‫کار‬ ‫ممروا‬‫م‬‫ش‬ ‫برای‬ ،‫دادیم‬ ‫جام‬ ‫ا‬ ‫را‬ ‫ات‬ ‫تنظی‬ ‫ه‬ ‫ه‬ ‫که‬ ‫حاال‬ ،‫خوب‬Angular‫به‬‫م‬‫داری‬
‫می‬ ‫ما‬ .‫داریم‬ ‫احتیاج‬ ‫کد‬َ ‫خواهیم‬Angular‫اشممیا‬controller‫و‬app-ng‫و‬ ‫بسممازد‬ ‫را‬
.‫دهد‬ ‫جام‬ ‫ا‬ ‫ما‬ ‫برای‬ ‫را‬ ‫بایندینگ‬
‫می‬ ‫پایین‬ ‫در‬ ‫که‬ ‫هایی‬ ‫کد‬ ‫به‬ ‫نابراین‬‫ب‬‫یف‬ ‫اول‬ .‫داریم‬ ‫یاج‬‫احت‬ ‫ید‬‫بین‬instance‫از‬app
‫می‬‫شی‬ ‫یف‬ ‫سپس‬ ،‫سازیم‬controller‫به‬app‫می‬ ‫اضافه‬.‫کنیم‬
‫کار‬ ‫ام‬ ‫ت‬‫بود‬ ‫ین‬ ‫ه‬.
‫کلید‬Ctrl+F5‫ببرید‬ ‫لذت‬ ‫خودکار‬ ‫بایندیگ‬ ‫از‬ ‫و‬ ‫دهید‬ ‫فشمممار‬ ‫را‬.‫در‬ ‫را‬ ‫چیزی‬ ‫وقتی‬ ‫حاال‬
TextBox‫می‬ ‫وارد‬‫پایین‬ ‫عبارت‬ ،‫کنید‬‫ش‬‫خودکار‬ ‫شورت‬ ‫به‬Update‫می‬.‫شود‬

‫کامل‬ ‫صورت‬ ‫به‬ ‫نهایی‬ ‫کد‬
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function Hello($scope) {
$scope.txthello = "HELLO WORLD";
}
var myApp = angular.module("myApp", []);
myApp.controller("HelloWorld", Hello);
</script>
</head>
<body bgcolor="red" ng-app="myApp">
<div ng-controller="HelloWorld">
<input ng-model="txthello" type="text" /><br /><br />
</div>
</body>
</html>
‫کردن‬ ‫درست‬ : ‫ششم‬ ‫قدم‬Function‫کردن‬ ‫اضافه‬ ‫و‬event
‫یف‬ ‫بیایید‬function‫ام‬ ‫به‬ ‫سممماده‬Func1‫کالس‬ ‫به‬ ‫را‬Hello‫در‬ ‫که‬‫گام‬‫قبلی‬‫ایجاد‬
.‫کنیم‬ ‫اضمممافه‬ ،‫کردیم‬Func1‫متغ‬ ‫در‬ ‫که‬ ‫را‬ ‫چیزی‬ ‫هر‬‫یر‬txthello،‫کنید‬ ‫وارد‬‫طریق‬ ‫از‬
alert‫ایش‬.‫داد‬ ‫خواهد‬
$scope.txthello = "";
$scope.Fun1 = function () {
alert($scope.txthello);
}
}
‫می‬ ‫فکر‬ ‫اگر‬ ‫حاال‬(‫باال‬ ‫تد‬ ‫م‬ ‫که‬ ‫ید‬ ‫کن‬Func1)‫ممم‬‫م‬‫س‬ ‫دسمممتور‬ ‫یف‬ ‫طریق‬ ‫از‬ ‫د‬ ‫توا‬ ‫می‬‫اده‬
.‫اشتباهید‬ ‫در‬ ‫سخت‬ ،‫شود‬ ‫ی‬ ‫فراخوا‬ ‫سکریپت‬‫جاواا‬Instance‫سط‬‫تو‬ ‫که‬ ‫هایی‬Angular

‫می‬ ‫ساخته‬‫طریق‬ ‫از‬ ‫ط‬ ‫ف‬ ،‫د‬ ‫شو‬event‫های‬Angular.‫هستند‬ ‫دستیابی‬ ‫قابد‬‫پس‬‫کد‬‫های‬
.‫کرد‬ ‫خواهند‬ ‫کار‬ ‫زیر‬
‫ی‬ ‫فراخوا‬ ‫برای‬function،‫به‬ ‫ما‬event‫های‬Angular‫اگر‬ ‫نابراین‬ ‫ب‬ .‫داریم‬ ‫یاج‬ ‫احت‬
‫می‬‫خواهیم‬1Func‫به‬ ،‫یم‬ ‫بز‬ ‫شدا‬ ‫را‬click-ng‫در‬Angular‫یاز‬.‫داریم‬
<input type="button" onclick="Fun1()" name="name" value="Alert" /.>
‫یف‬‫کل‬ ‫گام‬‫هن‬ ‫ید‬ ‫بتوا‬ ‫ید‬‫با‬ ‫کار‬ ‫این‬ ‫جام‬ ‫ا‬ ‫از‬ ‫پس‬‫بر‬‫ه‬ ‫دک‬ ‫روی‬‫ی‬Alert‫د‬ ‫ع‬ ‫در‬‫یداد‬‫رو‬
‫را‬ ‫کلیف‬)‫زیر‬ ‫تصویر‬ ‫ند‬ ‫ببینید.(ما‬
‫شده‬ ‫کامد‬ ‫کد‬ ‫پایین‬ ‫در‬event‫در‬ ‫ها‬Angular.‫است‬ ‫شده‬ ‫آورده‬ ،‫شد‬ ‫داده‬ ‫توضیح‬ ‫که‬
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
$scope.txthello = "microDev.ir";

}
}
</script>
</head>
<body ng-app="myApp">
<input ng-model="txthello" id="txthello" type="text" /><br /><br />
<input type="button" ng-click="Fun1()" name="name" value="Alert"
/><br /><br />
</div>
</body>
</html>
‫کردن‬ ‫اضافه‬ : ‫هفتم‬ ‫قدم‬Validator‫های‬HTML
Validation‫های‬Angular‫از‬ ‫توکار‬ ‫شورت‬ ‫به‬Validator‫های‬HTML5‫استفاده‬
‫می‬‫می‬ ‫ما‬ ‫بگوییم‬ ‫بگذارید‬ ‫بنابراین‬ .‫کنند‬‫که‬ ‫ممویم‬‫م‬‫ش‬ ‫ئن‬ ‫مط‬ ‫خواهیم‬txthello‫ی‬‫د‬ ‫توا‬
‫دار‬ ‫م‬null.‫بگیرد‬‫این‬ ‫برای‬‫منظور‬‫کار‬ ‫که‬ ‫داریم‬ ‫یاز‬‫ها‬‫زیر‬ ‫ی‬:‫دهیم‬ ‫جام‬ ‫ا‬ ‫را‬
‫آراستن‬input‫با‬Validator‫های‬HTML.
‫خاشمممیت‬ ‫ما‬ ‫زیر‬ ‫کد‬ ‫در‬ ،‫مثال‬ ‫برای‬required.‫ایم‬ ‫کرده‬ ‫اضمممافه‬ ‫را‬‫در‬5HTML،
Validator‫می‬ ‫که‬ ،‫د‬ ‫دار‬ ‫وجود‬ ‫زیادی‬ ‫های‬.‫کنید‬ ‫استفاده‬ ‫ها‬ ‫آ‬ ‫از‬ ‫کدام‬ ‫هر‬ ‫از‬ ‫ید‬ ‫توا‬
‫این‬textinput‫تگ‬ ‫درون‬form‫خاشمممیت‬ ‫باید‬ ‫و‬ ‫شمممده‬ ‫داده‬ ‫قرار‬name‫با‬ ‫آن‬
texthello‫که‬ ‫مید‬‫م‬‫باش‬ ‫مته‬‫م‬‫داش‬ ‫دقت‬ .‫مود‬‫م‬‫ش‬ ‫پر‬id‫در‬Angular‫ط‬ ‫ف‬ ‫و‬ ‫دارد‬ ‫یتی‬ ‫اه‬
name.‫است‬ ‫مهم‬ ‫آن‬ ‫برای‬

‫اعتبارسممنجی‬ ‫حاال‬HTML‫توسممط‬Browser‫می‬ ‫جام‬ ‫ا‬ ‫خودکار‬ ‫شممورت‬ ‫به‬‫وقتی‬ .‫پذیرد‬
‫ه‬ ‫دک‬ ‫روی‬ ‫بر‬ ‫کاربر‬submit‫می‬ ‫کلیف‬‫شمممود‬ ‫مواجه‬ ‫زیر‬ ‫خطای‬ ‫پیغام‬ ‫با‬ ‫باید‬ ،‫کند‬.‫ما‬ ‫اما‬
‫ی‬‫خطای‬ ‫پیغام‬ ‫که‬ ‫خواهیم‬Internet Explorer‫یا‬chrome‫ببینیم‬ ‫را‬.‫می‬ ‫ما‬‫خواهیم‬
Angular‫کنتر‬‫پیغام‬ ‫ل‬‫خطا‬‫دست‬ ‫در‬ ‫را‬ ‫ها‬.‫گیرد‬
.‫کردیم‬ ‫ال‬ ‫اع‬ ‫باال‬ ‫مرحله‬ ‫سه‬ ‫در‬ ‫که‬ ‫است‬ ‫تغییراتی‬ ‫حاوی‬ ‫زیر‬ ‫کد‬
<form name="frm1">
<input name="texthello" ng-model="txthello" id="txthello" type="text" required />
</form>
‫هشتم‬ ‫قدم‬‫خاصیت‬ ‫از‬ ‫استفاده‬ :valid$‫در‬Angular
‫ه‬ ‫ه‬ ‫که‬ ‫حاال‬‫ی‬‫و‬ ‫دادیم‬ ‫جام‬ ‫ا‬ ‫را‬ ‫ات‬ ‫تنظی‬Validator‫توکار‬ ‫های‬HTML‫را‬‫کردیم‬ ‫وارد‬،
‫می‬‫کاربر‬ ‫وقتی‬ ‫خواهیم‬‫چ‬‫می‬ ‫تایپ‬ ‫را‬ ‫یزی‬:‫شود‬ ‫جام‬ ‫ا‬ ‫کار‬ ‫دو‬ ،‫کند‬
‫اعتبارسنجی‬ ‫هنگام‬ ‫در‬ ‫ه‬ ‫دک‬ ‫کردن‬ ‫فعال‬ ‫غیر‬ ‫و‬ ‫فعال‬
‫تف‬ ‫در‬ ‫خطا‬ ‫پیغام‬ ‫کردن‬ ‫پنهان‬ ‫و‬ ‫دادن‬ ‫ایش‬div

‫دایرکتیو‬ ‫دو‬ ‫به‬ ،‫منظور‬ ‫این‬ ‫برای‬disabled-ng‫و‬show-ng‫در‬Angular‫احتیاج‬
‫از‬ ‫کدام‬ ‫هر‬ ‫وقتی‬ .‫داریم‬Validator‫شممود‬ ‫جام‬ ‫ا‬ ‫ها‬‫می‬ ‫شممورت‬ ‫ارزیابی‬ ،‫خاشممیت‬ ‫و‬ ‫گیرد‬
valid$‫شده‬ ‫وارد‬ ‫های‬ ‫داده‬ ‫به‬ ‫بسته‬true‫یا‬false‫می‬.‫شود‬
<form name="frm1" id="frm1" novalidate>
<input name="texthello" ng-model="txthello" id="txthello"
type="text" required /><br />
<div ng-show="!(frm1.texthello.$valid)"> ‫این‬ ‫قسمت‬ ‫را‬ ‫پر‬ ‫/<کنید‬div>
<br />
ng-disabled="!(frm1.$valid)" /><br /><br />
</form>
‫نهم‬ ‫قدم‬‫برنامه‬ ‫اجرای‬ :
‫ه‬ ‫ه‬ ‫که‬ ‫حاال‬‫ی‬‫کارها‬‫یت‬ ‫موف‬ ‫با‬‫کلید‬ .‫شممد‬ ‫جام‬ ‫ا‬Ctrl+F5‫کار‬ ‫تیجه‬ ‫از‬ ‫و‬ ‫داده‬ ‫فشممار‬ ‫را‬
.‫ببرید‬ ‫لذت‬ ‫خود‬ ‫سخت‬
‫تصویر‬ ‫پایین‬ ‫در‬‫ی‬‫می‬ ‫را‬‫می‬ ‫شان‬ ‫ا‬ ‫ش‬ ‫به‬ ‫اجرا‬ ‫حال‬ ‫در‬ ‫را‬ ‫امه‬ ‫بر‬ ‫که‬ ‫بینید‬.‫دهد‬

: ‫دهم‬ ‫قدم‬‫شده‬ ‫کامل‬ ‫کد‬
‫کا‬ ‫کد‬ ‫زیر‬ ‫در‬‫اینجا‬ ‫به‬ ‫تا‬ ‫مده‬‫م‬‫ش‬ ‫مد‬‫را‬‫مامد‬‫م‬‫ش‬ ‫که‬ ،event‫و‬ ‫ها‬Validation‫مان‬‫م‬‫ش‬ ‫مت‬‫م‬‫هاس‬
.‫است‬ ‫شده‬ ‫داده‬
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
$scope.txthello = "";
{
}
}
}
</script>
</head>
<body ng-app="myApp">
<form name="frm1" id="frm1" novalidate>
<input name="texthello" ng-model="txthello" id="txthello"
type="text" required /><br />
<div ng-show="!(frm1.texthello.$valid)"> ‫این‬ ‫قسمت‬ ‫را‬ ‫پر‬ ‫/<کنید‬div>
<br />
ng-disabled="!(frm1.$valid)" /><br /><br />
</form>
</div>
</body>
</html>

‫لیست‬‫کتاب‬‫های‬‫نوشته‬:‫شده‬
:‫ها‬ ‫کتاب‬ ‫آدرس‬
http://www.ketabrah.ir-‫/زهرا-بیات-قلی‬
/‫الله‬author/1115

‫ها‬ ‫خانم‬ ‫مخصوص‬ ‫کامپیوتر‬ ‫آموزش‬‫پرداز‬ ‫ایده‬ ‫آموزشگاه‬ ‫در‬
‫از‬ ‫تشکر‬ ‫با‬.‫کردید‬ ‫تخاب‬ ‫ا‬ ‫دن‬ ‫خوا‬ ‫برای‬ ‫را‬ ‫کتاب‬ ‫این‬ ‫اکنون‬ ‫هم‬ ‫که‬ ‫عزیز‬ ‫دوست‬ ‫ا‬ ‫ش‬
‫زهرا‬ ‫من‬‫بی‬‫م‬‫ات‬،‫موسس‬‫گلستان‬ ‫(در‬ ‫پرداز‬ ‫ایده‬ ‫آموزشگاه‬‫بهارستان‬).‫هستم‬
،‫دارد‬ ‫هدفی‬ ‫دگی‬ ‫ز‬ ‫در‬ ‫کس‬ ‫هر‬‫هدف‬ ‫بهترین‬ ‫اما‬، ‫ها‬‫متعالی‬‫آن‬ ‫ترین‬.‫هاست‬
‫تاسیس‬‫ایده‬‫پرداز‬،2:‫داشت‬ ‫دلید‬
1-‫م‬ ‫خا‬ ‫به‬ ‫ف‬ ‫ک‬‫ی‬ ‫کودکا‬ ‫و‬ ‫ها‬‫ی‬ ‫مالی‬ ‫دودیت‬ ‫م‬ ‫یا‬ ‫سن‬ ‫به‬ ‫توجه‬ ‫با‬ ‫که‬‫کالس‬ ‫در‬ ‫ند‬ ‫توا‬‫های‬
‫آموزشگاه‬‫شرکت‬ ‫ها‬. ‫کنند‬
2-‫افزار‬ ‫رم‬ ‫آموزش‬‫روز‬ ‫به‬ ‫های‬،‫ات‬ ‫امکا‬ ‫بود‬ ‫ک‬ ‫دلید‬ ‫به‬ ‫هم‬ ‫باز‬ ‫که‬‫در‬ ،‫اکثر‬‫آموزشگاه‬‫ها‬‫یا‬
‫ی‬ ‫تدریس‬‫شود‬‫و‬‫می‬ ‫تدریس‬ ‫گزاف‬ ‫هزینه‬ ‫با‬ ‫یا‬‫شود‬.‫عده‬ ‫و‬‫آموزش‬ ‫این‬ ‫طالب‬ ‫که‬ ‫ای‬‫ها‬
‫علم‬ ‫از‬ ‫هستند‬‫کامپیوتری‬‫می‬ ‫ب‬ ‫ع‬.‫ند‬ ‫ما‬‫با‬ ‫آموزشگاه‬ ‫این‬ ‫در‬ ‫من‬‫روز‬ ‫به‬‫ترین‬‫تجهیزات‬،‫به‬
‫روز‬‫افزار‬ ‫رم‬ ‫ترین‬‫می‬ ‫آموزش‬ ‫مناسب‬ ‫ت‬ ‫قی‬ ‫با‬ ‫را‬ ‫ها‬.‫دهم‬
‫های‬ ‫زمینه‬ ‫واا‬ ‫ا‬ ‫در‬ ‫من‬ ‫تخصص‬:
‫افزار‬ ‫رم‬(‫اداری‬ ‫های‬Word, Excel, Access, PowerPoint, OneNote)
‫افزار‬ ‫رم‬‫های‬‫گرافیکی‬‫فلش‬ ،‫تاژ‬ ‫مو‬ ‫و‬ ‫میکس‬ ،‫هند‬ ‫فری‬ ،‫کورل‬ ،‫(فتوشاپ‬‫و‬‫دی‬ ‫تری‬
)..‫مکس‬
‫امه‬ ‫بر‬‫ویسی‬(C#،ASP.Net MVC‫و‬C++)

‫عزیز‬ ‫دوستان‬،‫می‬ ‫نام‬ ‫ثبت‬ ‫برای‬ ‫فقط‬‫شماره‬ ‫با‬ ‫توانید‬‫سواالت‬ ‫و‬ .‫کنید‬ ‫برقرار‬ ‫ارتباط‬ ‫زیر‬ ‫های‬
‫برنامه‬.‫باشم‬ ‫پاسخگو‬ ‫وقت‬ ‫اسرع‬ ‫در‬ ‫تا‬ ‫بفرستید‬ ‫من‬ ‫ایمیل‬ ‫به‬ ‫را‬ ‫خود‬ ‫نویسی‬
‫آد‬‫رس‬‫اول‬ ‫فلکه‬ ، ‫ساوه،گلستان‬ ‫جاده‬ :،24‫والیت‬ ‫خیابان‬ ،‫غربی‬ ‫ارغوان‬ ‫متری‬،‫پال‬‫ک‬32
Email: BytMohandes@yahoo.com
09393939924-09373719405Tel:

AngularJS

Recommended

Recommended

More Related Content

Similar to AngularJS

Similar to AngularJS (20)

AngularJS