The ng-app Directive. The ng-app directive defines the root element of an AngularJS application.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>Anguler JS Demo</title>
    <link href="bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
</head>
<body ng-app="" class="container">
    <br />
    <div class="row">
        <div class="col-md-6">
            <div class="well well-sm">
                Addition
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label>Enter Number</label>
                    <input type="number" ng-model="Num1" class="form-control text-success" /><br />
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label>Enter Number</label>
                    <input type="number" ng-model="Num2" class="form-control text-success" /><br />
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label>Result</label>
                    <input readonly="readonly" type="text" value="{{Num1 + Num2}}" class="form-control text-info" />
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="well well-sm">
                Subtraction
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label>Enter Number</label>
                    <input type="number" ng-model="Num3" class="form-control text-success" /><br />
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label>Enter Number</label>
                    <input type="number" ng-model="Num4" class="form-control text-success" /><br />
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label>Result</label>
                    <input readonly="readonly" type="text" value="{{Num3 - Num4}}" class="form-control text-info" />
                </div>
            </div>
        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-md-6">
            <div class="well well-sm" style="padding: 10px">
                Division
            </div>
            <div class="row">
 
                <div class="col-md-12">
                    <label>Enter Number</label>
                    <input type="text" ng-model="Num5" class="form-control text-success" /><br />
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label>Enter Number</label>
                    <input type="text" ng-model="Num6" class="form-control text-success" /><br />
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label>Result</label>
                    <input readonly="readonly" type="text" value="{{Num5 / Num6}}" class="form-control text-info" />
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="well well-sm">
                Multiply
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label>Enter Number</label>
                    <input type="number" ng-model="Num7" class="form-control text-success" /><br />
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label>Enter Number</label>
                    <input type="number" ng-model="Num8" class="form-control text-success" /><br />
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <label>Result</label>
                    <input readonly="readonly" type="text" value="{{Num7 * Num8}}" class="form-control text-info" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Result


 

  Modified On Mar-13-2018 06:17:35 AM

Leave Comment