एंगुलरजेएस एप्लीकेशन
यह एक वास्तविक AngularJS एप्लिकेशन बनाने का समय है।
खरीदारी की सूची बनाना
खरीदारी की सूची बनाने के लिए कुछ AngularJS सुविधाओं का उपयोग करें, जहां आप आइटम जोड़ या हटा सकते हैं:
मेरी खरीदारी सूची
- दूध×
- रोटी×
- पनीर×
आवेदन समझाया
चरण 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. आइटम जोड़ना:
एचटीएमएल में, एक टेक्स्ट फ़ील्ड जोड़ें, और इसे ng-model
निर्देश के साथ एप्लिकेशन से बांधें।
नियंत्रक में, नाम का एक फ़ंक्शन बनाएं , और सरणी में कोई आइटम जोड़ने addItemके लिए इनपुट फ़ील्ड के मान का उपयोग करें ।addMeproducts
एक बटन जोड़ें, और इसे एक निर्देश दें जो बटन पर क्लिक करने पर फ़ंक्शन 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, जो उस आइटम की अनुक्रमणिका लेता है जिसे आप निकालना चाहते हैं, एक पैरामीटर के रूप में।
एचटीएमएल में, <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. त्रुटि प्रबंधन:
एप्लिकेशन में कुछ त्रुटियां हैं, जैसे यदि आप एक ही आइटम को दो बार जोड़ने का प्रयास करते हैं, तो एप्लिकेशन क्रैश हो जाता है। साथ ही इसमें खाली सामान जोड़ने की अनुमति नहीं दी जानी चाहिए।
हम नए आइटम जोड़ने से पहले मूल्य की जांच करके इसे ठीक कर देंगे।
एचटीएमएल में, हम त्रुटि संदेशों के लिए एक कंटेनर जोड़ेंगे, और जब कोई मौजूदा आइटम जोड़ने का प्रयास करेगा तो एक त्रुटि संदेश लिखेंगे।
उदाहरण
खरीदारी की सूची, त्रुटि संदेश लिखने की संभावना के साथ:
<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 स्टाइलशीट का उपयोग करते हैं।
W3.CSS स्टाइलशीट जोड़ें, और पूरे एप्लिकेशन में उचित कक्षाएं शामिल करें, और परिणाम इस पृष्ठ के शीर्ष पर खरीदारी सूची के समान होगा।
उदाहरण
W3.CSS स्टाइलशीट का उपयोग करके अपने एप्लिकेशन को स्टाइल करें:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">