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

Posted in AngularJs, HTML5 | Tagged , | Leave a comment

AngularJS – Dynamic HTML in AngularJS Modal Popup

AngularJS is the JavaScript library from Google for client side development. We will be discussing various issues and resolutions related to AngularJS in a series of blogposts

Requirement:¬†How to embed dynamic html content in AngularJS’s modal popup

Solution
1. Include the sanitize library from http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js to our project

2. Add the ng-bind-html element as shown below in the Modal popup template
<div class=”modal-body”>
<p ng-bind-html=”customHTML“></p>
</div>

3. Add the code to insert dynamic html inside the controller as shown below

var ModalInstanceCtrl = function ($scope, $modalInstance) {
………………………………………..
$scope.customHTML = ‘<h1> Random html snippet at run time </h1>’;
…………………………………………..
};

4. Include the sanitize module to the controller
angular.module(‘myApp’, ['ui.bootstrap', 'ngSanitize']);

Posted in AngularJs, HTML5 | Tagged , | Leave a comment

HTML5 Basics

With the advent of client side technologies and the improvements in browser features built a new paradigm for the modern web applications. The basic of any new web application which is cross-platform with multi-device support is HTML5. HTML5 define the UI elements and the structure of your page and CSS3 makes it rich UI. I will be writing serierticles on various features of HTML5 in CodeProject. You can refer my first article in the series at http://www.codeproject.com/Articles/752140/HTML-Basics-Part

Posted in Contest, HTML5 | Tagged , | 1 Comment

ASP.NET Web API

My article on ASP .Net Web API in Code Project website has attracted nearly 4000 views and 22 Bookmarks. Please find the article blog here

http://www.codeproject.com/Articles/720356/ASP-NET-Web-API

ASP.NET Web API is a framework for building HTTP services that can be accessed from various clients, such as browsers and mobile devices. ASP.NET Web API was introduced as part of ASP.NET MVC 4

Posted in ASP.Net, ASP.Net 4.5, MVC | Tagged , | Leave a comment

Impact of TFS Database Updates

Problem:

We had a requirement to update the TFS database. Scenario is that we have one custom field in the Task work item, which is defined as string. For getting a proper report, we need to change the data type of the custom field to double. Team deployed the SQL script, which will change the custom field type from string to double. Moreover, the script mark the field as reportable. This change in turn affected the TFS warehouse and analysis databases and the report generation stopped.

Solution:

Whenever there is a TFS database change, which mark the field as reportable, follow the steps to properly deploy the same into production.

1. Prepare the SQL Script to do the TFS database change
2. Regenerate both warehouse and analysis databases using TFS Admin Console
3. Queue the warehouse and analysis process

Regeneration of TFS warehouse and analysis databases ensure the proper schema update from the modified TFS database.

Posted in TFS | Tagged | Leave a comment