Exception handling in Angular using $exceptionHandler

Handling uncaught exception

Edit in plnkr

Steps involved

• Use $provide service in config section as shown below

Note:We need to customize the handler action

In the example shown below $scope is not defined. This exception is handled and alert is shown to the user

Confirm message before close

If the user unknowingly closes the application. He might loose important information.

Solution
We can avoid this by providing confirm message before close. The user would have the option to save his work or to close the application

The event which we can use is window.onbeforeunload 

Creation of DOM

What do we mean by DOM?

Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XMLdocuments.

Steps

Critical rendering path

What is critical rendering path ?

It is the sequence of steps that the browser goes through to render the actual pixels on the page

Critical : Important or absolutely needed
Render : When the page can be seen by the user
Path     : Chain of events that lead to our web page being displayed in a browser 

Need for understanding critical rendering path ?

We can optimize website performance

Steps involved:                   

Remove JSON properties

We can easily remove specific properties from a JSON object in an array.

Edit in plunkr

Steps involved

• Loop through the JSON object
• Specify the properties which needs to be filtered

In the example below I was supposed to remove some properties. I have removed "Date" property.

Angular ng-class for error message

We can use angular ng-class to change the style based on error. 

Edit in plunker

ng-Class : Directive allows us to dynamically set CSS classes on an HTML element by data binding an expression that represents all classes to be added.

Steps involved

• Include css class
• Use control-group class from bootstrap
• Specify error condition 

Angular Patterns

ng-Pattern : We can use angular patterns to validate input type. adds the pattern validator to ngModel. It is most often used for text-based input controls, but can also be applied to custom text-based controls

Edit in plunkr

Steps involved

• Specify input type
• Specify the angular pattern in regular expression

Refresh Iframe

We can refresh and Iframe content using one line of code

Edit in plunker

document.getElementById('iframeid').src += '';

In this example we can reset the position of the map based on button click

Implementing TransactionScope

The TransactionScope class provides a simple way to mark a block of code as participating in a transaction, without requiring you to interact with the transaction itself.

Steps

1. Add reference to System.Transactions                                                                             
   

Issue with installing protractor in windows

I was trying to install protractor in  windows 7. However I was no able to install it easily.
I have listed the steps which you need to perform in order to install protractor in windows 

npm install -g protractor

The step involves.

1. Before running the above command install python 2.7.3 https://www.python.org/download/releases/2.7.3

Logoff MVC

We cannot call logout function directly from an anchor tag or javascript .Reason they are supposed to be [HttpPost] with [ValidateAntiForgeryToken]

http://localhost:54673/Account/logOFF

we can achieve this by removing  [httpPost] and [ValidateAntiForgeryToken]

ASP ODBC Connection

In classic ASP we had the option to use odbc for connecting to the database. I had to use this in one of my project. I did not find any useful article on this.

Establishing ODBC connection for classic ASP

We can specify the odbc connection in ASP as shown below

Performance through image optimization

What are different types of Image?

   GIF

• Simple format
• Only supports 256 formats
• Supports animation
• Initially patented

Performance using css sprites

What is the advantage of using css sprites?

• It reduces the round trip required to the server
• Increases performance
• On resource several uses

What is the disadvantage of using css sprites?

• Maintenance : If you change one image we have to change other image's css properties 

Sample sprite Images 

The Image on the right has width of 50 pixels and height of 100 pixels. 

First-Image : Top 50 pixels
Second-Image: Bottom 50 pixels


Css would be
.First-Image {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}

.Second-Image {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}




Note:
We cannot have sprite images for all website images. Best use case would be for icon , footer menu images.

Mapping using automapper

Need  for using Automapper 

Eventually, in any application, a developer will need to translate data from one object type to another.

Common examples include DTOs (Data Transfer Objects), View Models, or even just some request or response object from a service or Web API call.

Usually we end up doing manual mapping.

How to Create simple SSIS package?

We need Sql server Business intelligence development studio to create packages.

Steps involved

• Open BIDS (Business intelligence development studio)
• Select new project as Integration Services Project

Caching specific file types

            

Today I would be writing about caching specific file types in IIS. By default this option is not provided in IIS. 

Angular pass selected item

We need to pass the selected list from the table. This can be achieved by passing the selected item list as shown below

• On ng-click  we need to pass the selected item list as parameter

• We can fetch the selected list in java script function as shown below

EDIT IN PLUNKER