AngularJs – Extracting Querystring

We are discussing about different implementations using AngularJs in previous blogs. Today, let us see how we can access the data from querystring using AngularJs. AngularJs is based on MVC pattern and all requests reach the controller first. We need to extract the query string values in Controller.

$location object is used for extracting the query string parameters in AngularJs. Following code snippet is used for extracting data from querystring ‘user’.

soApp.controller(‘soDetController’, function ($scope, $location) {
var user = $location.search()['user'];
if (typeof user != ‘undefined’)
{….}
}

Posted in AngularJs, HTML5 | Tagged | Leave a comment

AngularJs – Filter over a field & multiple filter

AngularJs provides great filtering options. We use the filter for filtering the collection of data according to user selection.
Following code filter the students’ data using the user entry in ‘query’ field. In this case the filter will apply to all fields in students’ data collection.

Search: <input ng-model=”query” />
<ul>
<li ng-repeat=”st in students | filter:query“>

<p></p>
</li>
</ul>

Angular provides specific field level filtering. Following sample displays the students whose status is ‘Pass’
<ul>
<li ng-repeat=”st in students | filter:{Status: ‘Pass’} “>

<p></p>
</li>
</ul>

Moreover, we can perform multiple filtering in the same collection. Following sample shows how we can filter the students whose status is ‘Pass’ using user input

Search: <input ng-model=”query” />
<ul>
<li ng-repeat=”st in students | filter:{Status: ‘Pass’}| filter:query “>

<p></p>
</li>
</ul>

Posted in AngularJs, HTML5 | Tagged | Leave a comment

Team Foundation Server Error: TF80012: The document cannot be opened ….

Issue
We are using Team Foundation Server(TFS) for managing test cases and bugs. We want to export the query result from TFS to an excel file for offline update. When we try to open the query result in excel, we have received the following error message

TF80012: The document cannot be opened because there is a problem with the installation of the Microsoft Visual Studio Team Foundation Office integration components.For more information, see the following page on the Microsoft website

Solution
Enable the Team Foundation Plugin in Excel. For enabling the Plugin, follow the steps
1. Open Excel
2. Click File->Options->Add-Ins
3. Select Com Add-ins from the Manage dropdown
4. Click Go
5. Check the Team Foundation Add-In box and click Ok

Posted in Office, TFS | Tagged | Leave a comment

AngularJs – Modal popup with custom style

 
Modal popups based on AngularJs is having predefined styles associated with it. If you want to customize the modal popup style, we can use the windowClass option available as part of the modal’s open method.Follow the steps to define new style for modal popup

1. Define our custom style
.my-dialog .modal-dialog {
width: 90%;
max-width: 800px;
top: 40%;
left: 1%;
}
Custom class definition should contain the internal .modal-dialog class reference.

2. Pass the new style class name as part of modal’s open method
var modalInstance = $modal.open({
templateUrl: ‘modalView.html’,
controller: modalViewCtrl,
windowClass: ‘my-dialog’
});

Note

For using the modal dialog, use the Angular UI Bootstrap (http://angular-ui.github.io/bootstrap/#/modal).
Include the library (ui-bootstrap-tpls-0.10.0.min.js) to the view and define the dependency module
angular.module(‘myApp’, ['ui.bootstrap' ])
Posted in AngularJs, HTML5 | Tagged , | Leave a comment

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&#8217;
});

});

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 , | 1 Comment