8 Example(s) of Ng-App


Description :

Ng-App is a directive that is basically bootstrap the angularjs application and this will be placed at the top root element of the tag like

and in js, Here is how we define the appExample module: var app = angular.module("appExample", []); app.controller('ExampleController', ['$scope', function ($scope) { $scope.a = 5; $scope.b = 10; }]);


Ng-App Example - 1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div ng-app="appExample"><br />
            <b>Inside ng-app directive.</b>
            <hr />
            <div ng-controller="ExampleController">
                I can add: {{a}} + {{b}} =  {{ a+b }}
            </div>
            <div ng-controller="ExampleController">
                Name: <input ng-model="name"><br />
                Hello, {{name}}!
            </div>
        </div>
        <hr />
        <b>Out of ng-App</b>
        <div ng-controller="ExampleController">
            I can't add: {{a}} + {{b}} =  {{ a+b }}
        </div>
    </div>
    <script>
    var app = angular.module("appExample", []);
    app.controller('ExampleController', ['$scope', function ($scope) {
        $scope.a = 5;
        $scope.b = 10;
    }]);
</script>
</body>
</html>

Output

Description :

In this example of Ng-App, We are going to create custom filter that will convert the message to uppercase. See the example


Ng-App Example - 2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="appExample">
    <br />
    <div class="container" ng-init="msg='LearnKode'">
        <label>
            Name: <input ng-model="msg" />
        </label>
        <br />
        <b> {{msg | myUpperFilter}}</b>
    </div>
    <script>
    var app = angular.module("appExample", []);
    app.filter("myUpperFilter", function () {
       
        return function (input) {
            return input.toUpperCase();
        }
    })
</script>
</body>
</html>

Output

Description :

In this example of Ng-App, We will assign empty value for ng-app and everything works perfectly. See the code


Ng-App Example - 3
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <p>Name: <input type="text" ng-model="name"></p>
        <p ng-bind="name"></p>
    </div>
</body>
</html>

Output

Description :

Another example of Ng-App with empty ng-app value. See the code


Ng-App Example - 4
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="firstName='LearnKode'">
        <p>The name is <span ng-bind="firstName"></span></p>
    </div>
</body>
</html>

Output

Description :

Another example of Ng-App..


Ng-App Example - 5
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        First Name: <input type="text" ng-model="fName"><br>
        Last Name: <input type="text" ng-model="lName"><br>
        <br>
        Full Name: {{fName + " " + lName}}
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.fName = "LearnKode";
        $scope.lName = ".com";
    });
</script>
</body>
</html>

Output

Description :

Another example of Ng-App where we are initializing the values in ng-init and empty ng-app but everything work just perfectly. See the code


Ng-App Example - 6
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="qt=3;rt=50">
        <br />
        Quantity: <input type="number" ng-model="qt"><br />
        Costs:    <input type="number" ng-model="rt"><br />
        Total : {{ qt * rt }}
    </div>
</body>
</html>

Output

Description :

In this example of Ng-App, we will initialize the char array and loop thro it. See the code:


Ng-App Example - 7
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="chars=['L','e','a','r','n','K','o','d','e']">
        <span ng-repeat="c in chars">
            {{ c }}
        </span>
    </div>
</body>
</html>

Output

Description :

If we add math formula outside the Ng-App then that will not work whereas if we put that inside ngapp then the value will be calculated. See the code


Ng-App Example - 8
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
    <div>
        Out side from ng-app:  {{2/2}}
    </div>
    <div ng-app>
        In side ng-app: {{5/2}}
        <div>
            In side ng-app: {{10/2}}
        </div>
    </div>
    <div>
        Out side from ng-app: {{2/2}}
    </div>
</body>
</html>

Output