SQL Server Data Compression

To reduce database size, we normally do data compression. in addition of saving space, data compression can help for improve performance of I/O work loads because queries need to read fewer pages. However, extra CPU resources needed for compress and decompress data.

There are several compression types available;

• Row Compression
• Page Compression
• Unicode Compression

In SQL server we can run sp_estimate_data_compression_savings stored procedure to estimate amount of savings which we can have from each compression type. 

In here I have used AdventureWorks2012 database for the demonstration. According to results, page compression will save lots of space. However, we must have a proper plan before compress data. Otherwise lots of issues may introduced.

Using Ionic with Apache Cordova

I wrote several blog posts(Apache Cordova with Angular JS, and Using a Cordova Plugin with Visual Studio) relates to Apache Cordova. In those applications, I used Bootstrap and FontAwesome for user interface designs. This is not wrong since we used Html 5 for hybrid mobile application development using Apache Cordova. However, we need to think again are those UI and icons are the best for a mobile specific application user interface.
Ionic is a framework, which mainly focused on look and feel of mobile applications.
In this post I will explain how to use Ionic for Html 5 hybrid application development. I'm using Visual Studio 2015 preview. I couldn't find any Visual Studio 2015 project templates for Ionic. Therefore, download Ionic from Github. For Visual Studio 2013 you could download Visual Studio Ionic Project Template.
First create a Blank Cordova Application like below.

Add Ionic files into framework folder.

Add Angular JS main module in to app folder.

Add welcomeView.html file like below. The content should write according to ion-view.

Modify index.html file like below. In here I used ion-nav-view which tracks user navigation history.

Run your application. You will see home screen like below.

Now it's time to modify the app for user friendly views. Add menu.html file and content should be like below. In here I used ion-side-menus directive.

Add another html page called, studentListView.html file. Content should be like below. This will show a list of students and I used item avatar css class from Ionic. I wrote a whole list of students. However you can use web api with angular repeat directive.

Modify, app.js file like below. In here I used angular js nested views.

Run your application, You will see a side menu with Home and Student List links.

For a mobile application it's better to have a footer with some icons. Therefore, modify index.html file and add ionic tabs like below.

You will see the footer of application like below.

Using Cordova Plugins with Visual Studio

In my previous post I explained how to use Apache Cordova with Angular JS. In this post I am going to use a Cordova plugin for show notification.
First, create a blank cordova application like below.

Add following javascript libararies into scripts/framework folder.

Add Angular main module like below.

I have mentioned we have to use notification pop up in this demo. Therefore, add Notification plugin to this project using config.xml file.

No you have to add relevant style sheet files to index.html file like below.

In body of the html page, add following content which have two buttons.

Do not forget to add relevant javascript files.

Now, you have to implement menuController.js file like below.

Run you application in ripple. Then click on GoTo button. It will show a notification like below.

Ripple is mainly used for testing. Therefore, notification will look like above.

If you need to check how this notification view in android environment, then select Android Emulator in debug mode. Then the popup will looks like,

Apache Cordova with Angular JS

Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript. In this post I will create a sample hybrid mobile application using Cordova. This application will mainly use Angular JS. I will use most of the codes from my previous post.
You can easily install Cordova using Visual Studio plugins.
Create a Blank Cordova Application.

Project structure looks like below. When Cordova starts, it will initiate to run index.html file as the start up page. There you will find references of cordova.js and platformoverrides.js which are mainly used by Cordova, when it package the application for different mobile specific packages.

And also, index.js file is another important file which contains mobile application specific lifetime events.
Download Jquery, Bootstrap, Angular, Angular-resource, Angular-router, Angular-touch and FontAwesome and then save javascripts, CSS and fonts accordingly.

Add references of javascripts and css files into index.html file.

Add Angular main module in to app folder like below.

As I have mentioned before, I copied several files from my previous project which relates to previous post. Therefore, I won't explain much about the content. welcomeView.html file is like below.

studentListViewController.js file content is like below.

studentListView.html file content should be like below.

studentDetailViewController.js file content should be like below.

studentDetailView.html file should like below.

commonService.js file content is like below.

studentResource.js file should be like below.

Change index.html file like below.

Then add application specific javascript files.

Now run the application. Sometimes, Visual Studio get crashed(may be I'm using 2015 preview version). Therefore I think it is better if you enable Detailed build output. To do that, go to Tools -> Options and then select Detailed according to following way.

You must run your previous application which contains web api controllers. Reason for that is, you have specified a web api URL, in studentResource.js file.
Following are the screens of Home, List and Detail view.

Validations with Angular JS

In this post I will explain how to use basic form validations with Angular JS. This will continue with the code written in my previous post.
Add web api controller action like below.

Add studentEditInfoController.js file like below.

Add studentEditInfoView.html  file below.

In here, I have used novalidate attribute. This will disable browser based validations. Using an angular condition, I have enabled to add has-error bootstrap class dynamically. In FirstName filed I gave min length and add required form attribute. Also I have disabled Save button till all validations passes for the form .
Modify, app.js locations.

When there are validation errors, the form will look like,

Routing With Angular JS

In this post I will explain how to set up routing with Angular JS. This will continue with the implementations done in previous post.
In wwwroot folder, create student folder like below. In that folder, create studentListView.html file.

From index.html file, cut html code of table tag and paste it in to studentListView.html You have to modify the code in studentListView.html which helps to have a user friendly interface.

In the index.html file, remove ng-Controller and change ng-app directives like below. Also you need to and angular-route javascript file which supports for routing.

Modify app.js file like below. In each route, we must define templateUrl which provides html file location for that particular route.  At the end, I have enabled html5Mode, which allows to use natural urls.

Now, run the application and it will show list of students like below.

Add welcomeView.html file to the app folder.

Change app.js file like below. In here, I have modified url for Student List.

Change index.html file like below.

Run the application again. For default URL, page would looks like,

When you browse for student list, it will show,

Refresh the students page. This will give 404 error. Reason for that is, in here we are using client side routing and not a server side route.

To get rid from that error add web.config into wwwroot folder like below.

Change StudentsApiController.cs file to retrieve a student by id. 

Add studentDetailController.js file like below. 

Add studentDetailView.html file like below.

You must change routes in app.js file like below.

Change studentListView.html file like below.

Run the application. In the student list click on name. You will see below page.