Requirement
Our requirement is to reuse few of the complex screens designed in aspx as part of our new web application, which is on HTML5/CSS3.
Solution
1. Include the angular router library (angular-ui-router.min.js) to the html page
2. Specify the ‘ui.router’ module as part of controller definition and configure the State provider with a new state pointing to our aspx page
var soApp = angular.module(‘app’, [‘ui.router’])
.config(function config($stateProvider) {
$stateProvider
.state(‘myAspxPage’, {
url: “/myAspxPage”,
templateUrl: ‘http://localhost:26824/WebForm1.aspx’
});
});
4. Define the HTML page with a div as ui-view, where our aspx page content will be displayed
<body ng-controller=”test”>
<a ui-sref=”myAspxPage”>Load ASPX Page – 1</a>
<button ng-click=”load()”> Load ASPX Page – 2 </button>
<div ui-view></div>
</body>
There are two ways to load the aspx page into the HTML page
a. “ui-sref” : This will point to the state name. When the user select the hypherlink, this will load the aspx page from the templateUrl to the ui-view.
b. using event handler: When the user click on the Load ASPX Page – 2 button, it loads the aspx page to the ui-view
3. Define the event handler in controller
If we are using the event handler for loading the aspx page, define the corresponding function in controller as shown below
soApp.controller(‘test’, function ($scope, $state) {
$scope.load = function() {
$state.transitionTo(‘myAspxPage’);
};
});
Ambilykk's Blog 
Thanks for the marvelous posting! I definitely enjoyed reading it, you might be a great author.
I will ensure that I bookmark your blog and will come back later on. I want to encourage one to
continue your great job, have a nice weekend!
Can you please show a little plunker application?
I have created the application as you described it.
Unfortunately this does not work for me.
Thanks a lot.
Sure, I will add the plunker application by next week
Thanks
Ambily
And where is the plunker application now?