Skip to content
BankyCode.com

Angular JS

ng-app Directive in AngularJS

ng-app directive is used to define AngularJS application. We can use this to auto-bootstrap an AngularJS application. It designates the root element of AngularJS application and generally kept near or tag. We can define any number of ng-app directive inside the HTML document but only one AngularJS application can be bootstrapped automatically (auto-bootstrapped) the other applications needs to be bootstrapped manually.

Example :

    <div ng-app="myApp" ng-controller="myCtrl">


        First Name : <input type="text" ng-model="firstName"> <br />
 Middle Name: <input type="text" ng-model="middleName"><br />
        Last Name : <input type="text" ng-model="lastName"><br>


        Full Name: {{firstName + " " + middleName + " " + lastName }}
  </div>

Complete HTML Code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js">
</script>
</head>
<body>
    <p>Please enter you details :</p>


    <div ng-app="myApp" ng-controller="myCtrl">


        First Name : <input type="text" ng-model="firstName"> <br />
        Middle Name: <input type="text" ng-model="middleName"><br />
        Last Name : <input type="text" ng-model="lastName"><br>


        Full Name: {{firstName + " " + middleName + " " + lastName }}
    </div>


    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope) {
            $scope.firstName = "Banketeshvar";
            $scope.lastName = "Narayan";
            $scope.middleName = "";
        });
    </script>
</body>
</html>

ng-repeat Directive in AngularJS

ng-repeat directive is used on an array of objects to repeat an HTML element. We can use $index, $first, $last, $middle, $even, $odd inside ngRepeat. Let try to understand it using examples.

Example 1:

<ul>
<li data-ng-repeat="x in friends">
   {{ x }}
</li>
</ul>

Complete HTML Code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body>
    <div data-ng-app="" data-ng-init="friends
         =['Banketeshvar Narayan','Mnaish Sharma','Rajnish Kumar','Om Prakash']">
        <p>List of Friends</p>
        <ul>
            <li data-ng-repeat="x in friends">
                {{ x }}
            </li>
        </ul>
    </div>
</body>
</html>

Browser output

Example 2:

<ul class="example-animate-container">
           <li class="animate-repeat" ng-repeat="employee in employees | filter:q as results">
               EmployeeId :ABC000{{$index + 1}} <br /> Employee Name: {{employee.name}} <br /> Salary: {{employee.salary}} <br /> Years of experience : {{employee.experience}} <br /><br />
           </li>
           <li class="animate-repeat" ng-if="results.length == 0">
               <strong>No results found...</strong>
           </li>
</ul>

Complete HTML Code:

<!DOCTYPE html>
<html>
<head>
    <title>ng-repeat Example 2</title>
    <meta charset="utf-8" />
    <link href="animations.css" rel="stylesheet" type="text/css">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-animate.js"></script>
</head>
<body ng-app="ngAnimate">




    <div ng-init="employees = [
  {name:'B Kaushik',    salary:160000,  experience:'6.0'},
  {name:'M K Sharma',   salary:150000,  experience:'7.2'},
  {name:'R Choudhary',  salary:90000,   experience:'1.9'},
  {name:'M N Yadav',    salary:80000,   experience:'2.8'},
  {name:'M Kumar',      salary:70000,   experience:'5.6'},
  {name:'S Chouhan',    salary:85000,   experience:'5.9'},
  {name:'A P Verma',    salary:53000,   experience:'4.2'},
  {name:'S N Mitra ',   salary:25000,   experience:'3.0'},
  {name:'G H Pant',     salary:12000,   experience:'2.2'},
  {name:'H S Nirala',   salary:125000,  experience:'8.1'}
]">
        ABC Pvt. Ltd. has done more than 40% increment for  {{employees.length}} employees. <br />They are:
        <input type="search" ng-model="q" placeholder="filter employees..." aria-label="filter employees" />
        <ul class="example-animate-container">
            <li class="animate-repeat" ng-repeat="employee in employees | filter:q as results">
                EmployeeId :ABC000{{$index + 1}} <br /> Employee Name: {{employee.name}} <br /> Salary: {{employee.salary}} <br /> Years of experience : {{employee.experience}} <br /><br />
            </li>
            <li class="animate-repeat" ng-if="results.length == 0">
                <strong>No results found...</strong>
            </li>
        </ul>
    </div>




</body>
</html>

Now you can filter data by typing text in textbox