۲۶ مطلب با کلمه‌ی کلیدی «دوره آموزشی AngularJS به زبان فارسی» ثبت شده است
دوره آموزشی AngularJS به زبان فارسی - بخش ششم
بسم الله الرحمن الرحیم
این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و Angular.js " مراجعه کنید.
مشاهده تمامی آموزش های دوره AngularJS
دوره آموزش AngularJS
بخش ششم
AngularJS XMLHttpRequest
خواندن یک فایل JSON
در زیر یک فایل JSON استاتیک وجود دارد که بر روی یک وب سرور قرارداده شده است.
[ادامه مطلب...
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]
دوره آموزشی AngularJS به زبان فارسی - بخش پنجم
بسم الله الرحمن الرحیم
این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و Angular.js " مراجعه کنید.
مشاهده تمامی آموزش های دوره AngularJS
دوره آموزش AngularJS
بخش پنجم
AngularJS Filters
Filter ها می توانند به رهنمود ها و عبارت ها با استفاده از یک کاراکتر pipe ( | ) اضافه شوند.
فیلترهای AngularJS می توانند شکل داده ها را تغییر دهند:
| Filter | Description |
|---|---|
| currency | Format a number to a currency format. |
| filter | Select a subset of items from an array. |
| lowercase | Format a string to lower case. |
| orderBy | Orders an array by an expression. |
| uppercase | Format a string to upper case. |
اضافه کردن Filter ها به Expression ها
در دو مثال بعدی ما از personController که در مقاله قبل از آن استفاده کردیم بهره می بریم.
فیلتر uppercase همانطور که از نام آن مشخص است فرمت رشته ها (string) به حروف بزرگ تغییر می دهد.
دوره آموزشی AngularJS به زبان فارسی - بخش چهارم
بسم الله الرحمن الرحیم
این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و Angular.js " مراجعه کنید.
مشاهده تمامی آموزش های دوره AngularJS
دوره آموزش AngularJS
بخش چهارم
AngularJS Controllers
AngularJS از معماری MVC استفاده می کند و AngularJS برای کنترل برنامه از controller ها استفاده می کند.
رهنمود ng-controller برای تعریف controller ها درAngularJS به کار می رود.
کدهای درون controller ها پس از لود شدن کامل صفحه اجرا می شوند.
یک controller یک JavaScript Object است که به وسیله object constructor استاندارد ایجاد شده است.
AngularJS با یک شی scope$ فراخوانی خواهد شد.
در AngularJS، شی scope$ شی برنامه می باشد و در واقع مالک اشیا و توابع برنامه های AngularJS می باشد.
مثال
<div ng-app="" ng-controller="personController">ادامه مطلب...
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>
function personController($scope) {
$scope.firstName="John",
$scope.lastName="Doe"
}
</script>
دوره آموزشی AngularJS به زبان فارسی - بخش سوم
بسم الله الرحمن الرحیم
این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و Angular.js " مراجعه کنید.
مشاهده تمامی آموزش های دوره AngularJS
دوره آموزش AngularJS
بخش سوم
AngularJS Directives
همان طور که گفتیم تمامی رهنمودهای AngularJS با پیشوند ng- شروع می شوند.
ng-app
یک رهنمود (یا directive) است که یک برنامه AngularJS را تعریف می کند. در واقع محدوده فعالیت یک برنامه AngularJS را مشخص می کند.
<html ng-app>
….
</html>
AngularJS بر روی کل صفحه ما مدیریت خواهد داشت چون ng-app در بالاترین عنصر صفحه نوشته شده است.
ng-init
یک رهنمود برای مقدار دهی اولیه به داده های برنامه می باشد.
ادامه مطلب...دوره آموزشی AngularJS به زبان فارسی - بخش دوم
بسم الله الرحمن الرحیم
این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و Angular.js " مراجعه کنید.
مشاهده تمامی آموزش های دوره AngularJS
دوره آموزش AngularJS
بخش دوم
AngularJS Expressions
عبارت های AngularJS درون یک جفت براکت نوشته می شوند {{ expression }}
عبارت های AngularJS داده ها را به HTML مانند رهنمود ng-bind مقید می کنند. در همان جایی که عبارت های AngularJS را می نویسید در همان جا نیز خروجی شما نمایش داده می شود.
عبارت های AngularJS خیلی به عبارت های JavaScript شبیه هستند. آنها می توانند شامل عنصرهای تکرار شونده، عملگر ها و متغییرها باشند.
مثال
{{ 5 + 5 }}
یا
{{ firstName + " " + lastName }}
ادامه مطلب...
دوره آموزشی AngularJS به زبان فارسی - بخش اول
بسم الله الرحمن الرحیم
مشاهده تمامی آموزش های دوره AngularJS
دوره آموزش AngularJS
این دوره آموزشی تا بخش بیست و دوم مقدماتی خواهد بود اگر به این مطالب تسلط دارید لطفا به آموزش "طراحی یک Single Page Application با ASP.NET Web API و Angular.js " مراجعه کنید.
در بخش اول تنها موارد را به صورت مختصر معرفی می کنیم و سپس در بخش های بعدی هر یک را توضیح خواهیم داد.
در این دوره قصد داریم با AngularJS آشنا شویم. مثل تمامی دوره های دیگر مطالب را سعی خواهیم کرد بر پایه ی مثال و به صورت ساده و سریع بیان کنیم. انشالله که مفید واقع شود.
AngularJS یک framework جاوا اسکریپت است، یک کتابخانه است که با JavaScript نوشته شده است. AngularJS مانند یک فایل توزیع شده است و شما می توانید با اضافه کردن یک تگ script در صفحه html خود از آن استفاده کنید.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
نکته:
معمولا اکثر افراد فایل های Script خود را در بخش Head صفحه قرار می دهند که این کار خود باعث می شود لود شدن صفحه تا زمان لود تمامی script ها به طول بیانجامد و با توجه به کند بودن سرویس های https در کشور ما، اگر script بخواهد از سرویس HTTPS استفاده کند کاربر عملا از باز شدن صفحه دلسرد خواهد شد.
بهتر است تمامی فایل هایی که امکان دارند را در پایین تگ <body> قرار دهید، البته این کار را برای تمامی فایل های Script نمی توان انجام داد اما با انجام این کار سرعت لود صفحات بسیار افزایش خواهد یافت.