Category Archives: Angular JS

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

Posted on by

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.

image

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.

image

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

image 

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.

image

Advertisement

How to create Cascading Dropdowns in Angular JS using Web API

Posted on by

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.

thuruinhttp.wordpress.com

The below is my HTML

thuruinhttp.wordpress.com

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.

angular cascading drop down