باسلام در این قسمت از اموزش های انگولار جی اس قصد ساخت یک اپلیکیشن angularjs را داریم ، در قسمت های پیشین توضیحات کامل angularjs بیان شد و حال وقت ان رسیده که یک اپلیکیشن کامل بسیازیم. پس تا انتهای این مقاله با ما همراه باشید. برای اطلاع از قسمت های پیشین وارد دوره ی انگولار جی اس شوید.
ساخت لیست فروش
اجازه دهید تا با استفاده از برقی از ویژگی های انگولار جی اس یک لیست خرید تهیه کنیم ، شما در این لیست قابلیت افزودن و حذف کردن المان ها را دارید.
توضیحات وب اپلیکیشن
قدم اول : شروع
برای شروع اپلیکیشنی با نام myShoppingList و همچنین کنترل کننده ای با نام myCtrl می سازیم. کنترل کننده یک ارایه با نام products و محتوای $scope اضافه میکند. در تگ html نیز ما از دستورالعمل ng-repeat استفاده میکنیم تا ایتم های داخل ارایه برایمان به نمایش درایند. شاید شما هم نیاز به داشتن اطلاعاتی در رابطه با ساخت سند html داشته باشید که میتوانید به مقاله فوق مراجعه فرمایید.
خب در زیر ما یک سند html برپاییه ایتم های یک ارایه ساختیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
< script > var app = angular.module("myShoppingList", []); app.controller("myCtrl", function($scope) { $scope.products = ["Milk", "Bread", "Cheese"]; }); </script> <div ng-app="myShoppingList" ng-controller="myCtrl"> <ul> <li ng-repeat="x in products">{{x}}</li> </ul> </div> |
قدم دوم : افزودن ایتم ها
در سند html نیاز به ساخت یک فیلد و همچنین اتصال ان به اپلیکیشن با استفاده از دستورالعمل ng-model داریم.در کنترل کننده یک تابع با نام addItem میسازیم و مقدار ان را به وسیله ی فیلد ورودی که در سند html ساختیم و همچنین با addMe در ارایه ی products اضافه میکنیم.
حال با توضیحات فوق میتوانید ایتم هایی را به لیست خود اضافه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
< script > var app = angular.module("myShoppingList", []); app.controller("myCtrl", function($scope) { $scope.products = ["Milk", "Bread", "Cheese"]; $scope.addItem = function () { $scope.products.push($scope.addMe); } }); </script> <div ng-app="myShoppingList" ng-controller="myCtrl"> <ul> <li ng-repeat="x in products">{{x}}</li> </ul> <input ng-model="addMe"> <button ng-click="addItem()">Add</button> </div> |
قدم سوم : حذف ایتم
ماهمچنین قصد داریم تا حذف کردن ایتم را نیز به برنامه ی خود اضافه کنیم. برای اینکار در کنترل کننده یک تابع با نام removeItem می سازیم این تابع هرمقداری را که شما بخواهید از ارایه حذف میکند. در HTML، یک عنصر <span> برای هر عنصر ایجاد کنید و دستورالعمل ng-click که تابع removeItem را با $index فعلی فراخوانی می کند.
حال با توضیحات فوق توانایی ساخت یک حذف کننده ایتم را داریم :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
< script > var app = angular.module("myShoppingList", []); app.controller("myCtrl", function($scope) { $scope.products = ["Milk", "Bread", "Cheese"]; $scope.addItem = function () { $scope.products.push($scope.addMe); } $scope.removeItem = function (x) { $scope.products.splice(x, 1); } }); </script> <div ng-app="myShoppingList" ng-controller="myCtrl"> <ul> <li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">×</span></li> </ul> <input ng-model="addMe"> <button ng-click="addItem()">Add</button> </div> |
قدم چهارم : پردازش خطاها
این برنامه دارای خطاهایی است ، مانند اینکه اگر سعی کنید دوبار یک ایتم را اضافه کنید ، برنامه از کار می افتد ، همچنین نباید مجاز به اضافه کردن موارد خالی باشید.
ما این را با چک کردن مقدار قبل از اضافه کردن موارد جدید حل خواهیم کرد.
در html یک ظرف برای پیام های خطا اضافه میکنیم و وقتی یک نفر تلاش میکند یک ایتم موجود اضافه کند یک پیام خطا را نمایش دهد.
یک فهرست خرید با امکان نوشتن پیغام‌های خطا:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
< script > var app = angular.module("myShoppingList", []); app.controller("myCtrl", function($scope) { $scope.products = ["Milk", "Bread", "Cheese"]; $scope.addItem = function () { $scope.errortext = ""; if (!$scope.addMe) {return;} if ($scope.products.indexOf($scope.addMe) == -1) { $scope.products.push($scope.addMe); } else { $scope.errortext = "The item is already in your shopping list."; } } $scope.removeItem = function (x) { $scope.errortext = ""; $scope.products.splice(x, 1); } }); </script> <div ng-app="myShoppingList" ng-controller="myCtrl"> <ul> <li ng-repeat="x in products">{{x}}<span ng-click="removeItem($index)">×</span></li> </ul> <input ng-model="addMe"> <button ng-click="addItem()">Add</button> <p>{{errortext}}</p> </div> |
قدم پنجم : ظاهر برنامه
به همین سادگی برنامه ی شما اجرا شد ، اما بهتر است برای استفاده ی بهتر ظاهر ان را بهبود دهید ، ما برای بهود دادن از فایل w3.css استفاده کردیم .
شیوه W3.CSS را اضافه کنید و کلاس های مناسب را در طول برنامه وارد کنید، و از برنامه ی خود لذت ببرید. شاید برای شما هم سوال باشد که به چه روش هایی میتوان استایل برای این اپلیکیشن تعریف کرد که پیشنهاد میشود انواع روش های افزودن استایل را مطالعه فرمایید.
|
1 |
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> |
امیدوارم این اموزش برای شما عزیزان مفید واقع شده باشد، به پایان اموزش های انگولار جی اس رسیدیم و بنا به درخواست دوستان قرار شد که پروژه های کوچک قرار دهیم.
برای مطالعه موارد بیشتر میتوانید به سایت w3schools مراجعه فرمایید.
موفق باشید.
