WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Application


It is a great opportunity to make a genuine AngularJS Application.


Make a Shopping List

Lets utilize a portion of the AngularJS highlights to make a shopping list, were you can include or evacuate items:

My Shopping List

  • {{x}}×

{{errortext}}



Application Explained

Step 1. Getting Started:

Start by making an application called myShoppingList, and include a controller named myCtrl to it.

The controller includes an exhibit named products to the current $scope.

In the HTML, we utilize the ng-repeat order to show a rundown utilizing the things in the array.

Example

So far we have made a HTML list dependent on the things of an array:

<script>
var application = 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>
Try it Yourself »

Step 2. Including Items:

In the HTML, include a content field, and tie it to the application with the ng-model directive.

In the controller, make a capacity named addItem, and utilize the estimation of the addMe input field to add a thing to the products array.

Add a catch, and give it a ng-click order that will run the addItem work when the catch is clicked.

Example

Now we can add things to our shopping list:

<script>
var application = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = work () {
        $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>
Try it Yourself »

Step 3. Expelling Items:

We additionally need to most likely expel things from the shopping list.

In the controller, make a capacity named removeItem, which takes the record of the thing you need to evacuate, as a paramter

In the HTML, make a <span> component for every thing, and give them a ng-click order which calls the removeItem work with the current $index.

Example

Now we can expel things from our shopping list:

<script>
var application = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = work () {
        $scope.products.push($scope.addMe);
    }
    $scope.removeItem = work (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)">&times;</span>
       
</li>
    </ul>
    <input ng-model="addMe">
    <button ng-click="addItem()">Add</button>
</div>
Try it Yourself »

Step 4. Mistake Handling:

The application has a few mistakes, as in the event that you endeavor to include a similar thing twice, the application crashes. Likewise, it ought not be permitted to include void items.

We will fix that by checking the incentive before including new items.

In the HTML, we will include a compartment for mistake messages, and compose a blunder message when somebody attempts to include a current item.

Example

A shopping list, with the likelihood to compose blunder messages:

<script>
var application = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
    $scope.products = ["Milk", "Bread", "Cheese"];
    $scope.addItem = work () {
        $scope.errortext = "";
        on the off chance that (!$scope.addMe) {return;}
        if ($scope.products.indexOf($scope.addMe) == - 1) {
            $scope.products.push($scope.addMe);
        } else {
            $scope.errortext = "The thing is as of now in your shopping list.";
        }
    }
    $scope.removeItem = work (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)">&times;</span>
        </li>
    </ul>
    <input ng-model="addMe">
    <button ng-click="addItem()">Add</button>
    <p>{{errortext}}</p>
</div>