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>
