Categories
Programming

Single Page Web App Using Angular and Bootstrap

Recently, I developed single page web app using Angular.js, Bootstrap, JavaScript and HTML. In this Product List app we can add, delete and display particular thing.

Let’s Get Coding

First we start by creating ‘app.js‘. This is where JavaScript code will go. In this file create the angular module and controller. Write a code to add products in a list using ‘addItem‘ function.

var app = angular.module("myApp", []);

app.controller("firstController", function($scope) {
  $scope.message = "Product List App";
  // Add product to list
  $scope.product = { title: "", desc: "" };
  $scope.products = [
    { title: "Milk", desc: "Three Packets of Organic Milk." },
    { title: "Banana", desc: "Five count of raw Banana's." }
  ];
  $scope.cur = { title: "", desc: "" };
  $scope.showCur = false;
  $scope.addItem = function() {
    $scope.products.push($scope.product);
    $scope.product = { title: "", desc: "" };
    $scope.showCur = false;
  };

Now Add another ‘removeItem‘ function to remove any product from products list:

// Remove product from list
$scope.removeItem = function (x) {
    $scope.products.splice(x, 1); 
}

For getting to display just any particular product and it’s description on screen, add next function ‘displayItem‘ :

// Display particular product-description
$scope.displayItem = function (x) {
    $scope.cur = $scope.products[x];
    $scope.showCur = true;
}

For going back to main page using ‘Back’ button, add another code using ‘backDisp‘ function:

// back button result
$scope.backDisp = function() {
 $scope.showCur = false;
}

Let’s move on ‘index.html‘ file. In html header we need to load angular and bootstrap. I have also added my stylesheet ‘style.css’ in header but in this app I’m not adding any code in this file. For styling purpose I’m only using bootstrap. So we can see the real magic of bootstrap and angular in this app.

<!DOCTYPE html>
<html>
  <head>
    <!-- load Angular -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

    <!-- load Bootstrap -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />

    <!-- CSS -->
    <link rel="stylesheet" href="./style.css" />
  </head>

In html body define angular module, controller and also inject content and view. 

<body ng-app="myApp" ng-controller="firstController">
    <div class="jumbotron">
        <div class="container">
            <h1 class="page-header">{{ message }}</h1>
            <form>
                Your Item:<br />
                <input class="form-control form-control-lg" type="text" placeholder="Item"
                    ng-model="product.title"><br />
                Description of Item:
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder="Description"
                    ng-model="product.desc"></textarea>
                <br />
                <button type="button" class="btn btn-primary btn-lg btn-block" ng-click="addItem()">Add</button>
                <br />
                <br />
                <h2>Item: {{product.title}} </h2>
                <br />
                <h2>Description: {{product.desc}} </h2>
                <br />

                <ul class="list-group" ng-show="!showCur">
                    <li class="d-flex list-group-item list-group-item-info" ng-repeat="product in products">
                        <span class="col-sm-8">{{product.title + " - " + product.desc}}</span>

                        <button type="button" class="btn btn-dark col-sm-2"
                            ng-click="removeItem($index)">Delete</button>
                        <span> </span>
                        <button type="button" class="btn btn-dark col-sm-2" ng-click="displayItem($index)">Open</button>

                    </li>
                </ul>

                <div ng-show="showCur">
                    {{cur.title + " - " + cur.desc}}
                    <br />
                    <button type="button" class="btn btn-secondary btn-lg btn-block" ng-click="backDisp()">Back</button>
                </div>
            </form>
        </div>
    </div>

Finally Don’t forget to add our JavaScript code in html body:

    <script src="app.js"></script>
  </body>
</html>

Let’s try to create your own product list: