एंजुलरजेएस एप्लीकेशन

अब एक वास्तविक एंजुलर जेएस अनुप्रयोग बनाने का समय है

शॉपिंग सूची बनाएं

हम एंजुलर जेएस की कुछ विशेषताओं का उपयोग करके एक शॉपिंग सूची बनाएं, जिसमें आप वस्तुओं को जोड़ सकते हैं या उन्हें हटा सकते हैं:

अनुप्रयोग विवरण

चरण 1: शुरू करें

पहले एक myShoppingList का अनुप्रयोग, और उसमें myCtrl कंट्रोलर

नाम वाला products की आयत्तों को मौजूदा $scope में

HTML में, हम 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: वस्तुओं को जोड़ें

HTML में, एक टेक्स्ट फील्ड जोड़ें और ng-model आदेश को अनुप्रयोग के साथ बांधा जाएगा

कंट्रोलर में, एक नाम बनाएं addItem की फ़ंक्शन को और addMe इनपुट फील्ड के मान को वस्तुओं को जोड़ने के लिए products में

एक बटन जोड़ें और उसे एक 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 की फ़ंक्शन बनाएं, जो आप जोड़ना चाहते हैं के इंडेक्स को पैरामीट के रूप में देता है。

HTML में, प्रत्येक आइटम के लिए एक <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>

स्वयं प्रयास करें

चौथा चरण: त्रुटि संबंधी कार्रवाई

इस अनुप्रयोग में कुछ त्रुटियाँ हैं, जैसे, यदि आप एक ही उत्पाद को दो बार जोड़ने की कोशिश करेंगे, तो अनुप्रयोग गिर जाएगा। एक और बात यह भी नहीं होनी चाहिए कि खाली उत्पाद को जोड़ा जाए।

हम इसे नए उत्पाद को जोड़ने से पहले वाली कीमत की जाँच करके समस्या को हल करेंगे。

HTML में, हम एक त्रुटि संदेश के लिए एक कंटेनर जोड़ेंगे और जब किसी ने निहित उत्पाद को जोड़ने की कोशिश करता है तो त्रुटि संदेश लिखेंगे。

इंस्टांस

शॉपिंग सूची, यहाँ एक त्रुटि संदेश लिख सकते हैं:

<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">

स्वयं प्रयास करें