AngularJS ng-include | ng-if | ng-switch with example

AngularJS ng-include

AngularJS ng-include is used to include other pages inside your code. we will see how to use the ng-include directory with the example.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src=js/index.js></script>
</head>
<body ng-app>
<div ng-include="'home.html'">
</div>

</body>
</html>

home.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1>Hello Home Page</h1>
</body>
</html>

AngularJS ng-if directive

ng-if takes input as true or false. there is a difference between ng-hide and ng-if. ng-if remove the complete element and ng-hide hide the element.

<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src=js/index.js></script>
</head>
<body ng-app>
<input type="checkbox" ng-model="x" ng-init="x = true">
<div ng-if="x">
<p>remove p element Click the check Box</p>
</div>

</body>
</html>

Angular JS ng-switch directive

<element ng-switch="expression">
  <element ng-switch-when="value"></element>
  <element ng-switch-when="value"></element>
  <element ng-switch-when="value"></element>
  <element ng-switch-default></element>
</element>

index.html

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

<body ng-app>
  <label>
   <input type="text" ng-model="showNumber" /></label><br />
  <div ng-switch="showNumber">
    <h1 ng-switch-when="1">1</h1>
    <h1 ng-switch-when="2">2</h1>
    <h1 ng-switch-when="3">3</h1>
    <h1 ng-switch-default>Enter a number between 1 to 3</h1>
    
  </div>
</body>
</html>

 

Angular ng-class

 

 

 

Add a Comment

Your email address will not be published. Required fields are marked *

sixteen − thirteen =