dotnet tutorials

Hi,
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.

How to Load One page into another Page Using AngularJS