در این آموزش ما یک نرم افزار لیست خرید را با آنگولار ایجاد می کنیم.
در آخرین درس از آموزش آنگولار به نحوه ایجاد یک نرم افزار خواهیم پرداخت.
ایجاد لیست خرید
در این آموزش ما لیستی ایجاد می کنیم که میتوان به آن ایتم های را اضافه و حذف کرد. با توجه به آموزش نحوه اتصال به بانک داده و این آموزش شما قادر خواهید بود انواع فروشگاه تک محصولی و چند محصولی را ایجاد کنید.
توضیح نرم افزار
گام 1. شروع به کار
در قدم اول یک نرم افزار به نام myShoppingList ایجاد کرده و کنترلری به نام myctrl اضافه کنید.
کنترلر آرایه ای به نام products را به $scope فعلی اضافه می کند.
در HTML ، ما از دستورالعمل ng-repeat برای نمایش یک لیست از آیتم های آرایه استفاده می کنیم.
مثال
در این گام یک لیست HTML با آرایه ها ایجاد می کنیم:
<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>
مشاهده نتیجه
گام 2 افزودن آیتم ها :
در HTML، یک فیلد ورود متن ایجاد کنید، با دستور العمل ng-model نرم افزار را به این فیلد وصل کنید.
در کنترلر ، نام عمگلر را addItem بگذارید، از مقدار فیلد ورودی addMe را برای افزودن به آرایه products استفاده کنید.
افزودن یک دکمه، دستورالعمل ng-click را به آن بدهید و عملگر addItem را با کلیک شدن دکمه اجرا کنید.
مثال
حالا میتوانیم آیتم های خود را به لیست خرید اضافه کنید:
<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>
مشاهده نتیجه
گام 3. حذف ایتم ها
ما همچنین میخواهیم که قادر به حذف آیتم ها از لیست خرید باشیم.
برای اینکار در کنترلر ، یک عملگر به نام removeItem ، که ایندکس ها را برای حذف آیتم ها به صورت پارامترمشخص کند، ایجاد می کنیم.
در این فایل HTML، یک تگ Span هر کدام از آیتم ها را در برمیگیرد. که با دستورالعمل ng-click و فراخوانی عملگر removeItem امکان حذف $index فعلی را به ما میدهد:
مثال
حالا ما میتوانیم آیتم فعلی را از لیست خرید خود حذف کنیم:
<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>
مشاهده نتیجه
گام 4: رسیدگی کردن به مشکلات
در یک نرم افزار همواره احتمال بروز مشکل هست، مثلا اگر شما سعی کنید که یک آیتم را دوبار اضافه کنید. نرم افزار کرش خواهد شد. همچنین نرم افزار نباید اجازه ورود آیتم تهی را به شما بدهد.
ما این مشکلات را برطرف خواهیم کرد. برای اینکار باید قبل از ورود یک مقدار آنرا بررسی کنیم.
در HTML ، ما یک تگ دربرگیرنده پیام خطا ایجاد کرده و پیام خطا را در آن یادداشت میکنیم ، به این ترتیب هنگامی که کاربر سعی در افزودن آیتم موجود کند، با پیام خطا مواجه میشود.
مثال
یک لسیت خرید، با امکان نوشتن پیام خطا:
<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>
مشاهده نتیجه
گام 5: طراحی:
نرم افزار در حال حاضر کار می کند. اما بهتر است که گرافیک زیباتری داشته باشد. از اصول استایل دهی w3.Css برای استایل دهی به این نرم افزار استفاده می کنیم.
فایل CSS مربوط به W3 را نصب کنید.
مثال
استایل دهی به نرم افزار با کمک استایل های w3.css :
<link rel="stylesheet" href=" https://sargonco.com/Uploads/Public/article/traning/Web%20design/newweb/w3.css ">
مشاهده نتیجه
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد