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

توسعه یک برنامه هیجان انگیز با انگولار#2
توی بخش اول گفتیم انگولار با جاوا اسکریپت ساخته شده، پس واسه کد نوشتن توش هم از جاوا اسکریپت استفاده میکنیم، اینم گفتیم که یکی از هدفهای انگولار توسعه و گسترش تگ های HTML با استفاده از attributeهای جدید هست. در این بخش قصد داریم تا با معرفی دستورات جدید از این فریم ورک قدرتمند اونو بیشتر و بهتر معرفی کنیم.
آموزش برنامه نویسی موبایل
آموزش برنامه نویسی اندروید به همراه پشتیبانی رایگان برای رفع خطاهای شما
خودتان را اینجا معرفی کنید


فیلترها در انگولار
انگولار به ما این امکان و میده که داده هامون و  فیلتر کنیم، البته این داده ها زمانی نشون داده میشن که معیارهای خاصی و رعایت کنیم، همه این کارها از طریق فیلتر انجام میشه. فیلترها را میشه به دایرکتیوها و  عبارت ها(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 قرار دادیم.



{
"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 قابل دسترسی باشن.
جداول در انگولار
نمایش جدول با AngularJS خیلی راحته و برای نمایش دایرکتیو -ng-repeat خیلی خوب عمل می کنه.
که میشه یه استایل خوبم بهش داد!
اما فایدش چیه؟ بجز سادگی فایدش تو فیلتر کردن قدرتمند انگولاره، مثل؛
حتی میشه با index$ شمارنده هم براش گذاشت!cool

میشه با دایرکتیو ng-if و odd$ و even$ هم بهتر مشخصشون کرد...
برای کار با انگولار باید درک مناسبی از دستورات و اصطلاحاتش داشته باشیم وقتی با این موارد آشنا شدیم میتونیم از قابلیت های زیادی استفاده کنیم بطوریکه کار کردن با اون و خیلی اسون می کنه.wink

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

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

ارسال پاسخ لیلا
لیلا
یکشنبه ۰۳ بهمن ۱۳۹۵ ۰۸:۴۷
بسیار عالی بود ممنون
ارسال پاسخ دارش
دارش
شنبه ۲۹ اسفند ۱۳۹۴ ۱۷:۴۶
لطفا انگولار2 رو آموزش بدید مرسی
ارسال پاسخ نیلوفر افشار
نیلوفر افشار
شنبه ۲۸ شهریور ۱۳۹۴ ۱۶:۲۶
در پاسخ به دیدگاه Massoud Asadi ارسال شده در شنبه ۲۸ شهریور ۱۳۹۴ ۱۳:۱۴

خب برای کسی که اولین باره داره با انگولار کار میکنه توضیحات خیلی کمه ولی تو قسمت قبل خیلی توضیحات کامل بودن

چون در انتها قراره روی یک پروژه کار بشه، بحث های تکمیلیش اونجا مطرح میشه. به هر حال اگر هرجای مطلب براتون واضح نبود و بگین تا بتوونم بیشتر کمکتون کنم.

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

ممنون از نظرتون و اینکه مطالب و پیگیری می کنین، اما چرا به نظرتون ناقص بود؟

خب برای کسی که اولین باره داره با انگولار کار میکنه توضیحات خیلی کمه ولی تو قسمت قبل خیلی توضیحات کامل بودن

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

برعکس آموزش قبلی این قسمت خیلی ناقص بود و تو مثال اول هم حروف کوچیک شده

ممنون از نظرتون و اینکه مطالب و پیگیری می کنین، اما چرا به نظرتون ناقص بود؟

ارسال پاسخ Massoud Asadi
Massoud Asadi
جمعه ۲۷ شهریور ۱۳۹۴ ۲۳:۳۷

برعکس آموزش قبلی این قسمت خیلی ناقص بود و تو مثال اول هم حروف کوچیک شده