AngularJS – Integrate aspx page from other project inside html document

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’);
};
});

Advertisements

About ambilykk

I am a Technology Evangelist on Microsoft Technologies. I am carrying the passion on Microsoft technologies specifically on web technologies such as ASP .Net and Ajax. My interests also include Azure and Visual Studio. Technology adoption and learning is my key strength and technology sharing is my passion.
This entry was posted in AngularJs, HTML5 and tagged , . Bookmark the permalink.

4 Responses to AngularJS – Integrate aspx page from other project inside html document

  1. sports car says:

    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!

  2. happy people says:

    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.

  3. I am says:

    And where is the plunker application now?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s