توسعه یک برنامه هیجان انگیز با انگولار#2
دارالترجمه رسمی
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
دارالترجمه رسمی پارسیس شامل خدمات ترجمه رسمی و تخصصی در بیش از 60 زبان زنده دنیا
افزونه های سئو وردپرس
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
بهترین افزونه های سئو وردپرس به صورت کاملا فارسی
مشاوره و خدمات سئو
آژانس تخصصی "انجام سئو"؛ ارائه خدمات حرفه ای سئو سایت
آژانس تخصصی "انجام سئو"؛ ارائه خدمات حرفه ای سئو سایت
افزونه فرم ساز آسان
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
فرم ساز آسان اولین فرم ساز کاملا فارسی وردپرس
خرید ورق گالوانیزه رنگی
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
خرید انواع ورق گالوانیزه رنگی با بهترین قیمت
افزونه ورود به سبک دیوار
ورود و ثبت نام به سبک دیوار در وردپرس با افزونه ایرانی و فارسی دکتر لاگین
خودتان را اینجا معرفی کنید
ورود و ثبت نام به سبک دیوار در وردپرس با افزونه ایرانی و فارسی دکتر لاگین
فیلترها در انگولار
انگولار به ما این امکان و میده که داده هامون و فیلتر کنیم، البته این داده ها زمانی نشون داده میشن که معیارهای خاصی و رعایت کنیم، همه این کارها از طریق فیلتر انجام میشه. فیلترها را میشه به دایرکتیوها و عبارت ها(expressions) با استفاده از کاراکتر pipe (|) اضافه کرد. بعضی از فیلترهایی که در خود انگولار وجود دارن و شکل داده هارو تغییر میدن این شکلین!
فیلترها | توضیحات |
Currency | فرمت یک عدد و نسبت به فرمت پولی نمایش میده |
Filter | یک زیر مجموعه از آیتم های یک آرایه را انتخاب می کنه |
Lowercase | کاراکترهای یک رشته رو تبدیل به حروف کوچک می کنه |
orderBy | یک آرایه و بر اساس عبارت(expressions) مرتب می کنه |
Uppercase | کاراکترهای یک رشته رو تبدیل به حروف بزرگ می کنه |
در این مثال از یک فیلتر در عبارت استفاده کردیم، همانطور که در جدول آوردیم lowercase کاراکترهای رشته و به حروف کوچک تبدیل میکنه.
به همین صورت هم میشه یک فیلتر و به Directive اضافه کرد.
فیلترها رو میشه با یک کولن (,) و یک model name استفاده کرد.
AngularJS AJAX - $http
تا اینجای کار داده ها را در برنامه هامون وارد می کردیم مانند متغییر های name و country اما شاید بهتر باشه که داده هامون و به صورت یک فایل دریافت کنیم، چون در این صورت مدیریت آنها ساده تر بنظر میرسه. داده ها را مینونیم با استفاده از یک فایل JSON یا XML وارد کنیم (احتمالا با این تکنیک در Ajax آشنایی دارید) در انگولار ما میتونیم دسترسی به داده هامون و با استفاده از یکسری سرویس داشته باشیم. سرویس چیزیه که وقتی ما داریم کاری و انجام میدهیم بتونیم کدهامون رو مدیریت کنیم. در اینجا می خواهیم در مورد سرویس خاصی به نام http صحبت کنیم. کار http اینه که ارتباط بین برنامه ها و سرور http و برقرار می کنه. استفاده از سرویس http خیلی راحته، فقط کافیه که داده ها را روی سرور قرار دهیم و از آنجا بخوانیم.
فرض کنید که این داده ها را بر روی سرور http://www.w3schools.com/angular/customers.php قرار دادیم.
فرض کنید که این داده ها را بر روی سرور http://www.w3schools.com/angular/customers.php قرار دادیم.
{
"records": [
{
"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"
}
]
}
خب! از تابع$http.get(url) برای خواندن داده ها استفاده میشه. حالا اینطوری اطلاعاتمون و میخونیم!
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function (response) {$scope.names = response.records;});
});
</script>
- Alfreds Futterkiste, Germany
- Ana Trujillo Emparedados y helados, Mexico
- Antonio Moreno Taquería, Mexico
- Around the Horn, UK
- B's Beverages, UK
- Berglunds snabbköp, Sweden
- Blauer See Delikatessen, Germany
- Blondel père et fils, France
- Bólido Comidas preparadas, Spain
- Bon app', France
- Bottom-Dollar Marketse, Canada
- Cactus Comidas para llevar, Argentina
- Centro comercial Moctezuma, Mexico
- Chop-suey Chinese, Switzerland
- Comércio Mineiro, Brazil
مثل بقیه نمونه هایی که توضیح دادیم با ng-app محدوده div مورد نظرمون رو بعنوان محدوده برنامه تعریف میکنیم و مثل سابق دایرکتیو ng-controller، شیء controller و فراخوانی می کنه و customersCtrl وارد عمل میشه و http$ و scope$ بعنوان ورودی بهش پاس داده میشن.
http$ یک شی XMLHttpRequest هست که کارهای مربوط به دریافت اطلاعات رو انجام میده و $http.get() داده ها رو از وب سرور می خونه و وقتی داده ها لود شد یا وارد حالت success شد، controller یک property(names) با داده های خوانده شده از سرور در scope$ ایجاد می کنه که برای دایرکتیو ng-repeat قابل دسترسی باشن.
جداول در انگولارhttp$ یک شی XMLHttpRequest هست که کارهای مربوط به دریافت اطلاعات رو انجام میده و $http.get() داده ها رو از وب سرور می خونه و وقتی داده ها لود شد یا وارد حالت success شد، controller یک property(names) با داده های خوانده شده از سرور در scope$ ایجاد می کنه که برای دایرکتیو ng-repeat قابل دسترسی باشن.
نمایش جدول با AngularJS خیلی راحته و برای نمایش دایرکتیو -ng-repeat خیلی خوب عمل می کنه.
که میشه یه استایل خوبم بهش داد!
اما فایدش چیه؟ بجز سادگی فایدش تو فیلتر کردن قدرتمند انگولاره، مثل؛
حتی میشه با index$ شمارنده هم براش گذاشت!
میشه با دایرکتیو ng-if و odd$ و even$ هم بهتر مشخصشون کرد...
برای کار با انگولار باید درک مناسبی از دستورات و اصطلاحاتش داشته باشیم وقتی با این موارد آشنا شدیم میتونیم از قابلیت های زیادی استفاده کنیم بطوریکه کار کردن با اون و خیلی اسون می کنه.
نظرات و سوالات کاربران
چون در انتها قراره روی یک پروژه کار بشه، بحث های تکمیلیش اونجا مطرح میشه. به هر حال اگر هرجای مطلب براتون واضح نبود و بگین تا بتوونم بیشتر کمکتون کنم.
خب برای کسی که اولین باره داره با انگولار کار میکنه توضیحات خیلی کمه ولی تو قسمت قبل خیلی توضیحات کامل بودن
ممنون از نظرتون و اینکه مطالب و پیگیری می کنین، اما چرا به نظرتون ناقص بود؟
برعکس آموزش قبلی این قسمت خیلی ناقص بود و تو مثال اول هم حروف کوچیک شده