AngularJS অ্যাপ্লিকেশন

একটি এসট্রাইক এংগুলারজেস অ্যাপলিকেশন তৈরি করার সময়

কেনার তালিকা তৈরি করুন

আমরা একটি কেনার তালিকা তৈরি করতে এংগুলারজেসের কিছু ফিল্ড ব্যবহার করবো, যেখানে আপনি প্রডাক্টসকে যোগ করা বা তুলে নিতে পারবেন:

অ্যাপলিকেশন বিবরণ

পদ 1: শুরু করুন

প্রথমে, একটি myShoppingList অ্যাপলিকেশনকে myCtrl নিয়ন্ত্রক

নামক প্রডাক্টস এর আইসিডিব্লিউ যোগ করেছি $scope এবং

এইচটিএমএল-এ, আমরা ng-repeat ইনট্রাকশনটি যেটি আইসিডিব্লিউ-এর আইটেমস ব্যবহার করে তালিকা দেখাবে

ইনস্ট্যান্স

এখন পর্যন্ত, আমরা আইসিডিব্লিউ-এর আইটেমস অনুযায়ী একটি HTML তালিকা তৈরি করেছি:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["দুধ", "ব্রেড", "চেস"];
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
</div>

আপনাদের নিজেরভাবে প্রয়াস করুন

পদ 2: প্রডাক্টস যোগ করুন

এইচটিএমএল-এ, একটি টেক্সট ফিল্ড যোগ করুন এবং ng-model কমান্ডটিকে অ্যাপলিকেশনে বাঁধানো করুন

কন্ট্রোলারে, একটি addItem ফাংশনটিকে যুক্ত করে এবং addMe ইনপুট ফিল্ডের মান প্রডাক্টসকে প্রডাক্টস আইসিডিব্লিউ এবং তারপর

একটি বুটন যোগ করুন এবং তাকে একটি ng-click কমান্ড, যা বুটনটি ক্লিক করার সময় চালু হবে addItem ফাংশন

ইনস্ট্যান্স

এখন আমরা পণ্যকে কেনার তালিকায় যোগ করতে পারি:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["দুধ", "ব্রেড", "চেস"];
  $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()">যোগ করুন</button>
</div>

আপনাদের নিজেরভাবে প্রয়াস করুন

পদ ৩: পণ্য অপসারণ

আমরা আশা করি যে, আমরা কেনার তালিকা থেকে পণ্য অপসারণ করতে পারি。

কন্ট্রোলারে, একটি removeItem ফাংশন তৈরি করব, যা আপনি অপসারণ করতে চান এবং সেটির ইনডেক্স হিসাবে প্রদান করবে。

এইমল, এইমস্ট প্রত্যেক আইটেমের জন্য একটি <span> এলিমেন্ট, এবং তাকে একটি ng-click ইনড্রেকশন, যা এখনকার ইলেকট্রন $index বাউন্ড removeItem ফাংশন

ইনস্ট্যান্স

এখন আমরা কেনার তালিকা থেকে পণ্য অপসারণ করতে পারি:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["দুধ", "ব্রেড", "চেস"];
  $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()">যোগ করুন</button>
</div>

আপনাদের নিজেরভাবে প্রয়াস করুন

পদ ৪: ত্রুটি হস্তক্ষেপ

এই অ্যাপটিতে কিছু ত্রুটি আছে, যেমন, আপনি যদি একই পণ্যটিকে দুবার যোগ করাচ্ছেন, তবে অ্যাপটি ভেঙে যাবে। এছাড়া, খালি পণ্য যোগ করাও অনুমদিত হবে না。

আমরা এই সমস্যা সমাধান করতে প্রয়োজন, কোনও নতুন পণ্য যোগ করার আগে সার্বমুখী তথ্য পরীক্ষা করা হবে。

এইমস্ট এইমল, আমরা একটি ক্ষেত্র যা ত্রুটি বার্তার জন্য ব্যবহার করব, যখন কোনও ব্যক্তি একটি সমীক্ষিত পণ্য যোগ করাচ্ছেন।

ইনস্ট্যান্স

কেনার তালিকা, এখানে ত্রুটি বার্তা লিখতে পারেন:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["দুধ", "ব্রেড", "চেস"];
  $scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = "এই পণ্যটি আপনার কেনার তালিকায় আছে।";
    }
  }
  $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()">যোগ করুন</button>
  <p>{{errortext}}</p>
</div>

আপনাদের নিজেরভাবে প্রয়াস করুন

পঞ্চম পদক্ষেপ: ডিজাইন

এই অ্যাপ্লিকেশনটি চলতে পারে, কিন্তু ভালোভাবে ডিজাইন করা যেতে পারে। আমরা আমাদের অ্যাপ্লিকেশনটি ডিজাইন করতে W3.CSS স্টাইলশীট ব্যবহার করি。

W3.CSS স্টাইলশীট যোগ করুন এবং সমস্ত অ্যাপ্লিকেশনে উপযুক্ত শ্রেণী যোগ করুন, ফলাফল এই পৃষ্ঠার শীর্ষের ক্যার্ট তালিকার মতো হবে。

ইনস্ট্যান্স

আপনার অ্যাপ্লিকেশন ডিজাইন করতে W3.CSS স্টাইলশীট ব্যবহার করুন:

<link rel="stylesheet" href="https://www.codew3c.com/lib/style/w3.css">

আপনাদের নিজেরভাবে প্রয়াস করুন