Hi,
We can easily Load One page into another Page in AngularJS by Using ng-include.
Here I have created 4 Pages
In index.html Add the following code
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<body ng-app ng-init="myurl='HTMLPage1.htm'">
<nav class="{{active}}" ng-click="$event.preventDefault()">
<a href="#" class="home" ng-click="active='Home';myurl='HTMLPage1.htm'">Home</a>
<a href="#" class="about" ng-click="active='about';myurl='HTMLPage2.htm'">About</a>
<a href="#" class="contact" ng-click="active='contact';myurl='HTMLPage3.htm'">Contact</a>
</nav>
<p ng-show="active">You chose <b>{{active}}</b></p>
<div ng-include="myurl">
</div>
</body>
Here I have declare myurl as a variable. ng-init is the initial page value for while loading.
when i have click my menu, i have define myurl value by using ng-click.
Then the ng-include div shows that content of myurl value.
We can easily Load One page into another Page in AngularJS by Using ng-include.
Here I have created 4 Pages
- index.html
- HTMLPage1.htm
- HTMLPage2.htm
- HTMLPage3.htm
In index.html Add the following code
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<body ng-app ng-init="myurl='HTMLPage1.htm'">
<nav class="{{active}}" ng-click="$event.preventDefault()">
<a href="#" class="home" ng-click="active='Home';myurl='HTMLPage1.htm'">Home</a>
<a href="#" class="about" ng-click="active='about';myurl='HTMLPage2.htm'">About</a>
<a href="#" class="contact" ng-click="active='contact';myurl='HTMLPage3.htm'">Contact</a>
</nav>
<p ng-show="active">You chose <b>{{active}}</b></p>
<div ng-include="myurl">
</div>
</body>
Here I have declare myurl as a variable. ng-init is the initial page value for while loading.
when i have click my menu, i have define myurl value by using ng-click.
Then the ng-include div shows that content of myurl value.
