Angular Application

AngularJS Application

---

It is fourth dimension to arrive at a existent AngularJS Application.

---

Make a Shopping List

Lets utilization simply about of the AngularJS features to brand a shopping list, where you lot tin add together or take items:

My Shopping List

• Milk×
• Bread×
• Cheese×

---

Application Explained

Step 1. Getting Started:

Start yesteryear making an application called myShoppingList, as well as add together a controller named myCtrl to it.
The controller adds an array named products to the electrical flow $scope.
In the HTML, nosotros utilization the ng-repeat directive to display a listing using the items inwards the array.

Example

So far nosotros cause got made an HTML listing based on the items of an array:

<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 inwards products">{{x}}</li>
    </ul>
</div>

---

Step 2. Adding Items:

In the HTML, add together a text field, as well as bind it to the application amongst the ng-model directive.
In the controller, brand a role named addItem, as well as utilization the value of the addMe input land to add together an detail to the products array.
Add a button, as well as hand it an ng-click directive that volition run the addItem role when the clit is clicked.

Example

Now nosotros tin add together items to our shopping list:

<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 inwards products">{{x}}</li>
    </ul>
    <input ng-model="addMe">
    <button ng-click="addItem()">Add</button>
</div>

---

Step 3. Removing Items:

We likewise desire to hold out able to take items from the shopping list.
In the controller, brand a role named removeItem, which takes the index of the detail you lot desire to remove, every bit a parameter.
In the HTML, brand a <span> chemical gene for each item, as well as hand them an ng-click directive which calls the removeItem role amongst the electrical flow $index.

Example

Now nosotros tin take items from our shopping list:

<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 inwards products">
            {{x}}
            <span ng-click="removeItem($index)">&times;</span>
        </li>
    </ul>
    <input ng-model="addMe">
    <button ng-click="addItem()">Add</button>
</div>

---

Step 4. Error Handling:

The application has simply about errors, similar if you lot endeavor to add together the same detail twice, the application crashes. Also, it should non hold out allowed to add together empty items.
We volition arrive at that yesteryear checking the value earlier adding novel items.
In the HTML, nosotros volition add together a container for mistake messages, as well as write an mistake message when somebody tries to add together an existing item.

Example

H5N1 shopping list, amongst the possibility to write mistake messages:

<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 detail is already inwards 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 inwards 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>

---

Step 5. Design:

The application works, but could utilization a amend design. We utilization the W3.CSS stylesheet to vogue our application.
Add the W3.CSS stylesheet, as well as include the proper classes throughout the application, as well as the final result volition hold out the same every bit the shopping listing at the tiptop of this page.

Example

Style your application using the W3.CSS stylesheet:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

---