Youtube like progress bar using NProgress.js with Angular.js

Posted on October 5, 2014 by Thuru

NProgress provides decent and attractive Javascript library to get a nice progress bar similar to the Youtube one. This is very sleek and classy, I love that and it’s very useful for the Single Page Applications.

You can download NProgress.js from http://ricostacruz.com/nprogress/

If you’re doing the development in Visual Studio you can install the NProgress from the NuGet. It is very simple library. When you install NProgress you get all the other dependencies as well. NProgress has one simple CSS file which very easy to work with and handle.

It has 4 methods.

NProgress.start() – to start the progress bar
NProgress.set(0.5) – set the progress bar value; ranges from 0 to 1
NProgress.inc() – increment the progress bar value.
NProgress.done() – complete the load process and hides the bar

Let’s see how to use with Angular.js. Better practice is to use the progress bar in background operations or when the UI wait happens. In this sample I didn’t use $http service of the Angular I just used $scope.

The HTML goes like this.

nprogress.css is the style sheet where you can control the behavior of the progress bar. It also contains the code for the spinner. If you want you can disable the spinner by simply commenting the code. Spinner only has start and done methods. HTML contains 3 Javascript references nprogress.js, angular.js and the custom controller AppController.js.

Code for AppController.js

You can this is a very crud code sample, when request data from web service using $http service, you can call NProgress start and done methods appropriately.

I also did some color changes in the nprogress.css file and made the progress bar to red.

How to create Cascading Dropdowns in Angular JS using Web API

Posted on August 3, 2014 by Thuru

Angular JS is one of the famous and a ‘WoW’ making Javascript frameworks available. https://angularjs.org/ has plenty of learning resources for Angular JS. This post shows how to create cascading drop downs using Angular JS whilst showing the use of other basic features of Angular JS.

Angular JS relies heavily on angular directives which HTML extended attributes with prefix of ng-

The following sample shows a simple web application developed using Angular JS and Web API. I used the AdventureWorks2012LT database and a Web API 2. UI has two dropdowns, first one shows the product categories and when a category is selected the second one shows the products for that particular category.

http://localhost/ADLTService/api/productcategory – to get the product categories

http://localhost/ADLTService/api/productforcategory/{id} – to get the products for a category id.

Create a simple HTML project and add Angular from NuGet. The below code shows the app script.

The below is my HTML

ng-repeat directive loops through the collection and creates the <options> tag for us. ng-model binds the value to the parameter in ng-change event. Here the name should be identical. The rest Angular knows how to interpret. Cascading drop down simple as that. You can also use ng-options as a directive for the <select> for more details refer this article.

Working Model.

HTTP Performance Tuning

Posted on June 29, 2014 by Thuru

When we talk about the HTTP performance of a web site or a web page mostly we regard to the speed the content delivered. If we summarize all the parameters of the web performance we can stick to these 3 golden rules in order to gain high performance.

Reduce the number of HTTP calls (Reduce the number of requests to the server)
Reduce the size of the content in the requests
Send information infrequently

These are some common practices to boost up HTTP performance.

HTTP Compression – Most of the web servers support this option. HTTP compression can be static or dynamic. In the static HTTP compression web server saves the compressed version of the content files such as CSS and Javascript. In the Dynamic compression the response HTML is compressed and sent to the client. Dynamic compression works well but eats up more CPU in your web server. Mostly static compression is configured in the web servers by default

Minification – This is a well known method for the Javascript developers. We can do minification to CSS files as well. We reduce the size of the files by removing comments, white spaces, shrinking variable names and ect. There’re plenty of Javascript minification tools available online. jQuery.min is the best example for this type.

Content Expiration – This is the cache in the browser. Browsers check for the new versions of the files and they download the files only when a new version is available. This is good since it reduces the size of the calls to the server, but if you have many small files and the browser goes on checking all of them it will be a performance hit. So better include your files in the relevant folders and set the expiration to the folders.

Content Delivery Networks – CDNs are well known and highly used by many. Geographically distributed so this reduces the travel time of data. CDNs are mostly used to deliver the static content.

Image Optimization – By optimizing the images we can reduce the size of the requests. JPEG and PNG are the heavily used file formats in the web. There are plenty of image optimization tools available. JPEG Tran for the JPEG images and PNG Crush for the PNG images are widely used and light weight.

Charting with DotNet HighCharts

Posted on January 6, 2013 by Thuru

This post explains how to use the DotNet HighCharts wrapper for the HighCharts Javascript library. You can download the wrapper from Codeplex.

First create an ASP,NET file and add the following Javascript references.

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>   1:  
<script src="http://code.highcharts.com/highcharts.js">
</script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

Download the wrapper and add the single .dll reference to the project and add the following using statements to the code.

using DotNet.Highcharts;
using DotNet.Highcharts.Options;
using DotNet.Highcharts.Helpers;
using DotNet.Highcharts.Enums;

The wrapper provides pure C# methods for generating the charts and has a method ToHtmlString() which returns the JavaScript version of the chart. This can be set to a ASP.NET Literal control for rendering.

Then here’s a sample for creating a column chart with two series.

DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart").SetXAxis(new XAxis
            {
                Categories = sales.GetSales().Select(list => list.ProductName).ToArray<string>()
            })
            .SetSeries(new Series []
            {
                new Series()
                {
                    Type = ChartTypes.Column,
                    Data = new Data(new object [] {125,824,122}),
                    Name = "Sales"
                },
                new Series()
                {
                    Type = ChartTypes.Column,
                    Data = new Data(new object [] { 57,234,67 }),
                    Name = "Freight"
                }
            });

‘sales’ is the object data source, and we get the product name from it and the values are hard coded. All charts has a name, here the column chart’s name is ‘chart’ itself. Names should be unique for the page. If you have another chart with same in the same page only the last chart will be displayed.

Then chart has SetXAxis method where set the X-Axis properties. And the chart has number of series. We feed the data to the series through its Data property which takes an object array.

Finally we serialize the chart as HTML content to the Literal control (ltrChart)

Example of a pie chart generation.

DotNet.Highcharts.Highcharts piechart = new DotNet.Highcharts.Highcharts("pie").SetXAxis(new XAxis
            {
                Categories = sales.GetSales().Select(list => list.ProductName).ToArray<string>()
            })
            .SetSeries(new Series[]
            {
                new Series()
                {
                    Type = ChartTypes.Pie,
                    Data = new Data(new object [] {125,824,122}),
                    Name = "Sales"
                }
            });
  
            piechartLiteral.Text = piechart.ToHtmlString();

Versatile Digital DNA

Category Archives: HTML 5/Javascript

Youtube like progress bar using NProgress.js with Angular.js

How to create Cascading Dropdowns in Angular JS using Web API

HTTP Performance Tuning

Charting with DotNet HighCharts

Share this:

Share this:

Share this:

Share this: