Friday, December 12, 2014

AngularJS Easiest way to upload a file

Here is the easiest way to include an upload file in your angular. This is not the angular way of doing the upload, but will get the work done. If you are doing a prototype or in a hurry, then you can use this approach.

I just have a simple view which allows user to select a file and upload it on a button click. Here is the view code.

    <div ng-controller="fileUploader">
        <input type="file" onchange="angular.element(this).scope().setFile(this)">
        <br />
        <button ng-click="UploadFile()">Upload</button>
    </div>

As you see in the above code, I defined a controller with a file input and button. On clicking the button will upload the file to the server.

Here is the angular script which sets the uploaded file to the scope and then uploads the file on the button click

'use strict';
angular.module('pos').controller('fileUploader', fileUploader)
fileUploader.$inject = ['$scope', '$http'];

function fileUploader($scope, $http) {
    $scope.setFile = function(element) {
        $scope.currentFile = element.files[0];
    }

    $scope.UploadFile = function () {
        var formData = new FormData();
        formData.append("file", $scope.currentFile);
        return $http.post("/api/user", formData, {
            headers: { 'Content-Type': undefined }, transformRequest: angular.identity
        });
    }
};


As mentioned above this is a hack solution. In my next blog I will rewrite this in an angular way by defining a directive and using it.

Monday, December 8, 2014

AngularJS Material to Replace Bootstrap

AngularJS team along with Ionic team is developing a framework that I believe is going to replace the Bootstrap and may become the defacto standard for Angular development. Right now Angular Material is in the beta stage and have few components (more is on the way). It also has a layout design much more advanced than that of the Bootstap grid system.

Please take a look at the Material Design presentation at ng-europe 2014

Also go to their demos and docs at

I just rewrote my app which was using Bootstrap to use this material design and I likeed it very much. Angular Material’s layout is much more easy to use and can do more than the Bootstrap css. It is very easy to do vertical alignment, I have to jump several hoops to do the same with Bootstrap.

Angular Material components have a good animation which improves the user experience. It also have some additional components which improve your productivity. Similar to any other frameworks, Angular Material is also designed with mobile first approach.


I strongly recommend to use this Angular Material in your angular apps. 

Tuesday, November 18, 2014

AngularJS Boolean display filter

Sometimes we may have to show a Boolean value to the user. The examples could be user is active or not. In my scenario whether a patient is premature birth or not. We typically store this information in the database or other persistence layer as a Boolean variable. When we show this property to the user, it will be shown as true or false.
Showing true or false to the user is not a very good user experience, instead of true or false we should show yes or no (or something similar) to the user. For transforming the Boolean value to more user friendly text I am using a filter in angular. As you know filter is used for format or transform the expression for the display to the user.
Here is my filter which formats or transforms the Boolean expression to display to the user
'use strict'

angular.module('pos').filter('boolText', boolText);

function boolText() {
    return function (boolValue) {
        if (boolValue === true)
            return "Yes";
        else
            return "No";
    }
}

The above filter can then be used in our bindings as below
{{vm.patientModel.PrematureBirth | boolText }}

As you see a simple reusable Boolean filter provides a user friendly display of all our Boolean variables in the module

Friday, October 31, 2014

AngularJS & Download File using WebAPI

As you know AngularJS routing overwrites the relative urls in a hyperlink so that AngularJS can handle all the requests. This sometimes causes problems. In my scenario I want to download a file when user clicks on a hyperlink in my grid. AngularJS is not sending this request to the server as a result I am unable to serve the file user wants to download.

Here is my hyperlink code that I used in the grid.

<a href="/api/download/1">Download File</a>

As you see the above hyperlink calls an webapi which in turns returns a word document that needs to be downloaded. As mentioned above clicking on this hyperlink does not download the file.
The solution for this issue is very simple, we just need to specify the target of the “a” tag as shown below

<a target="_self" href="/api/download/1">Download File</a>

Please see my other blog on how to download a file from Web API


Thursday, October 30, 2014

AngularJS UI-Router and Page title

In my previous blog, I wrote about on how to set Page title when using AngularJS routing. In this blog I will write about on how to do the same when we are using ui-router. If you haven’t read my previous blog, here is my requirement: when the user navigates from one page to another using angular routing mechanism, I want to set the page title and I would like to set this in an unobtrusive manner.

The approach and the code is almost similar in setting the page title using either with angularjs router or ui-router. But there is a minor difference due to the syntactical differences between these two routers.

Here is the code for defining the title attribute in the router

    $stateProvider
        .state("dashboard", {
            url: "/",
            title: "Dashboard",
            templateUrl: "/app/dashboard/dashboard.html",
            controller: "dashboard",
            controllerAs: "vm",
            resolve: ['dashboardService', function (dashboardService) {
                return dashboardService.resolve();
            }]
        })
        .state("login", {
            url: "/login",
            title: "Login",
            templateUrl: "/app/account/login.html",
            controller: "login",
            controllerAs: "vm",
        })
        .state("patient", {
            url: "/patient/:patientid",
            title: "Patient",
            templateUrl: "/app/patient/patient.html",
            controller: "patient",
            controllerAs: "vm",
            resolve: ['$stateParams', 'patientService', function ($stateParams, patientService) {
                return patientService.resolve($stateParams.patientid);
            }]
        })

Once the route is defined with the title attribute, I can set the window title on the state change event

        $rootScope.$on('$stateChangeSuccess', function (evt, toState, toParams, fromState, fromParams) {
            $window.document.title = toState.title;
        });

As you see we can unobtrusively set the page title by using either routers

AngularJS Routing and Page title

I came across a scenario where I would like to set the page title for each route in my angularjs app. For example if the user is in the dashboard, I want to set the page title as dashboard and when the user navigates to the patient page, I would like to set the page title as Patient. Obviously I would like to set this in an unobtrusive way.

In order to accomplish this first I defined a custom attribute called “title” in the angularjs routing as shown below:

    $routeProvider
        .when("/", {
            title: "Dashboard",
            templateUrl: "/app/dashboard/dashboard.html",
            controller: "dashboard",
            controllerAs: "vm",
        })
        .when("/login", {
            title: "Login",
            templateUrl: "/app/account/login.html",
            controller: "login",
            controllerAs: "vm",
        })
        .when("/patient/:patientid", {
            title: "Patients",
            templateUrl: "/app/patient/patient.html",
            controller: "patient",
            controllerAs: "vm",
            resolve: ['patientService', function (patientService) {
                return patientService.resolve();
            }]
        })

For each of the routes defined in my routing, I added a title attribute that will be set as a page title. After defining the title, I am setting this title on the route change event of the angularjs routing as shown below

        $rootScope.$on('$routeChangeSuccess', function () {
            $window.document.title = $route.current.title;
        });

With this approach I was able to set the title of each page at a module level (not going inside each page).

Monday, October 13, 2014

Typical AngularJS routing using ui-router

Last month I blogged about a typical routing using AngularJS router. AngularJS routing is good and works for most of the scenarios. In some situations where you need to do nested routing or some advanced routing, the current implementation fells short. It seems that the AngularJS 2.0 routing is robust and should cater to all the requirements. But that’s not going to be out soon. In the meanwhile we have an excellent routing module called ui-router. There is an excellent article on how to use this router. I provided the link to this article at the end of my blog.

ui-router supports and caters all the requirements AngularJS default routing provides. Hence I recommend to use this routing for all your scenarios. In this blog I will show my simple routing configuration using ui-router. In my subsequent blogs I will dig deeper into the nested routing and other ui-router tasks.

Here is my complete code for defining a route (for simplicity I kept only one route and removed all other routes)

'use strict';

angular.module('pos').config(routeConfig);
routeConfig.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider'];

function routeConfig($stateProvider, $urlRouterProvider, $locationProvider) {

    $stateProvider
        .state("patient", {
            url: "/patient/:patientid",
            title: "Patient",
            templateUrl: "/app/patient/patient.html",
            controller: "patient",
            controllerAs: "vm",
            resolve: ['$stateParams', 'patientService', function ($stateParams,
                     patientService) {
                return patientService.resolve($stateParams.patientid);
            }]

    $locationProvider.html5Mode(true);

    $urlRouterProvider.when('', '/login')

}
As you see in the above code, I defined a state called “patient” and defined all the parameters for this state. Here are the salient features of this route definition
            title: "Patient",
This is not the attribute or property of the ui-router. I am using this to set the window title (which is shown in the browser toolbar). This is similar to setting the title tag. I will blog about this in my next blog.
            controllerAs: "vm",
I like the controllerAs feature. It eliminates the need of using $scope in my code and make my code clean.

            resolve: ['$stateParams', 'patientService', function ($stateParams,
                     patientService) {
                return patientService.resolve($stateParams.patientid);
            }]
This is one of the important features of my routing. I don’t want to burden my compiler with fetching the data from server and activities other than rendering. As these are model or domain specific, I create a service for each controller to handle these activities. As you know in most scenarios you need to fetch data from the server before rendering the page, “resolve” is designed for that activity. Until resolve returns (fetches the data or any other activity) Angular waits and will not render the page. Resolve option also helps avoiding the FOUC. Please see my blog on this for further details
    $locationProvider.html5Mode(true);
I am also using the html5Mode which makes my urls simple. As you know for older browsers the router automatically fallback to using “#”.
    $urlRouterProvider.when('', '/login')
Finally I am using the $urlRouterProvider to specify a default start view. In this scenario I am redirecting user to the login page.

As you see my routing with ui-router is almost similar to that of the router provided by angular. With this set, I can start using advanced routing features.

Here is a detailed blog on the using Angular ui-router Diving deep into the AngularUI Router

Sunday, September 28, 2014

AngularJS Splash Page

As you know splash page is one you show when Angular is loading. If you have too many pages in your site or depend on several heavy weight javascript libraries you page may take a while for initial loading. In those scenarios a splash page would be a good way to engage the user. A typical splash page is show a loading image to the user while AngularJS is loading.

For typical single page applications developed in Angular we use views with routing. In these scenarios it is very easy to implement the splash page. All you need is to keep your splash page inside the ng-view. When Angular loads, it replaces the ng-view with the corresponding template. Here is the html (ASP.NET MVC) code implementing the splash page.

<html ng-app="appstyleguide">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AngularJS Styleguide</title>
    @Styles.Render("~/Content/css")
</head>
<body>
    <div ng-view>
        <div id="splash" class="splash">
            Loading ...
        </div>
    </div>
    @Scripts.Render("~/scripts/libraries")
    @Scripts.Render("~/scripts/app")
</body>
</html>

In the above code, I am using ASP.NET to include the script files and css files.

In most scenarios we will be having more content than the just the ng-view directive. We will have the headers, menus etc. In those scenarios we need to hide these until Angular loads. For this Angular provides ng-cloak directive. This directive along with the css hides the content on the page till Angular loads. Here is the html with ng-cloak hiding the additional elements of the page and just showing the splash page.

<html ng-app="appstyleguide">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AngularJS Styleguide</title>
    @Styles.Render("~/Content/css")
</head>
<body>
    <div ng-cloak>
        <h2>AngularJS Styleguide</h2>
        <a href="/home">Home</a> <a href="/contact">Contact</a>
    </div>
    <div ng-view>
        <div id="splash" class="splash">
            Loading ...
        </div>
    </div>
    @Scripts.Render("~/scripts/libraries")
    @Scripts.Render("~/scripts/app")
</body>
</html>

Using ng-cloak and ng-view we can show the splash page while Angular is loading.

Please go to my GitHub project for a style guide project using Visual studio
https://github.com/prasannapattam/ng-demos/tree/master/ng-demos/ng-styleguide

Top 5 Daily Habits

Our habits run our life. We all have hundreds of habits or routines which we perform daily without thinking. These habits include brushing teeth, checking emails etc. We can do wonders if we consciously add some habits to our daily list. In this blog I will mention the top 5 daily routing which I made a habit out of it. These routines helped me a lot to reach my goals.
  1. Daily Health management – Health is wealth. Without proper health we cannot achieve everything we want. If we want to reach our goals or do bigger we need better health. Health should be our first priority. We need to keep or develop good health habits such as exercising daily, eating healthy foods and avoiding junk food. We all know about this but somehow gets skipped out of our routines. Why not make this a habit so that we will always follow this important habit.
  2. Daily goal Setting – We all know how important goals are. These goals lead our life in the direction we want. All most all of us set goals at some point. But the problem is we tend to forget our goals. We need to continuously review it and adjust these goals. Lot of people review their goals yearly, quarterly or monthly. The more we remember about our goals the more close we are achieving them. Our subconscious do wonders if we constantly remember our goals. Our subconscious knowing our goals will make decisions (without our intent) which will put us in right direction. What is the best way to remember our goals? Review them daily. Every morning take a paper or computer and write down your top 10 goals. This hardly takes 5 minutes. Doing in the morning help you think and plan your day on how to achieve your goals
  3. Daily Learning – The world is constantly changing and it is going at a rapid pace. It is very hard to keep up with it. Imagine how we can keep this rapid pace without knowing what’s happening in the field we belong  or what’s happening around us. So we must make learning as a part of our daily routine. Every day we need to strive to learn something new. Plan for a routine where you will learn every day. For example while driving to work listen to the podcasts or audio books. Or spend some time every morning reading stuff in your area of expertise.
  4. Daily Time management – Without proper time management we cannot accomplish all the tasks or goals we want. As you know there is a saying that “Only busy man can find the time”. As the busy man plans and executes his work properly, he can always find time for important tasks. So we all should strive to plan our work every day and execute them as planned. I use the Muhurtam time management technique for my daily planning. I split my tasks on an hourly basis and follow this technique. Sometimes I just follow this technique to get focus and work for a stretch of time uninterrupted. Further doing the time management keeps us motivated as it gives us the satisfaction of doing more in a day.
  5. Daily Reflection – At the end of the day we need to reflect on how we completed our day and what we accomplished today. The best way is to maintain a journal and write down what I accomplished today towards my goals. This helps us to see where we spent most of our day and accordingly plan it for next day. Sometimes it is better to do the daily time management routine after the daily reflection routine.
Above are some of the daily routines or habits that help us to keep ourselves focused and go a track we laid out. These daily habits along with our good habits make us to reach or go beyond our goals.



Wednesday, September 24, 2014

Muhurtham Time Management for developers

As per Hindu clock, a Muhurtham means 48 minutes. Similar to hour clock, Hinduism uses Muhurtham clock. 24 hours in a day will transpose to 30 muhurthams in a day.

As you know, now-a-days agile is getting very popular and is being used in most software application development. One of the important techniques of this agile development is time boxing. This enables the team to focus on a set of tasks for a short duration without any distractions.

As a software developer you know how importance is flow. When our flow while coding is interrupted we need lot of time to come back to this flow. Because of this we tend to work late nights so that we can focus without interruptions. Wouldn’t it be good we can have our focus while coding and also don’t do the late nights. We can achieve this.

The scrum methodology teaches us to timebox tasks so that we can focus. Let’s extend the same for our coding. Let’s time box our coding time into smaller chunks so that we can focus. This timeboxing should not be too short and not to be too long. I feel that close to one hour should give us enough time to focus on a single task without any distraction.

Hindu Muhurtham (48 minutes) seemed to be an idle time boxing for a developer. This should provide enough time we can avoid or postpone distractions. After this Muhurtham we can take a break and perform all the items we postponed.

Here is a scenario where I use this Muhurtham time management. Let’s say I am working on a code module. First I carve out a small task out of this module which I can complete with in a muhurtham. Before the start of the muhurtham I will ensure that I will not be distracted by completing or planning all the possible distractions. During the muhurtham I will not check emails, try avoiding phone calls, avoid social sites etc. I will put full focus on the task at hand and get into the flow and be in that flow till the end of the muhurtham. Once I complete the muhurtham, I take a break during where I attend all the items, such as checking emails etc, I put off during the muhurtham. After that I embark on another muhurtham.

This time management improves our productivity by getting maximum out of the available time and reduces the need to work late hours. This also enables us to get into the flow. As the duration is short enough we will be motivated to stay focus in a particular muhurtam. In this technique we will be rewarded by a break after the muhurtham.  Finally this Muhurtham time management is an extension of Pomodoro Technique which is a popular technique for time management.

Following the Muhurtham time management improved my productivity and believe it will help every developer to complete their tasks on time.

Monday, September 22, 2014

Typical AngularJS routing

Here is the typical routing I use for my AngularJS apps.

$routeProvider
    .when("/app/customer/:customerid/:departmentid", {
        templateUrl: "/app/customer/customer.html",
        controller: "customer",
        controllerAs: "vm",
        caseInsensitiveMatch: true,
        resolve: ['customerService', function (customerService) {
            return customerService.resolve();
        }]

    })

As you see in addition to the regular routing attributes, I also used additional attributes such as controllerAs, resolve etc. Here is the step by step dissection of my routing configuration
    .when("/app/customer/:customerid/:departmentid", {
As all of you know, with the above statement I am defining a routing which takes customerid and departmentid as query parameters
        templateUrl: "/app/customer/customer.html",
        controller: "customer",
With these above two statements I am defining the templateUrl and controller for my routing.
        controllerAs: "vm",
I like the controllerAs feature. It eliminates the need of using $scope in my code and make my code clean.
        caseInsensitiveMatch: true,
As the name suggests, Angular performs a case insensitive matching while looking at the url for routing. This is important if are using a combination of server (like asp.net) and client routing
        resolve: ['customerService', function (customerService) {
            return customerService.resolve();
        }]
This is one of the important features of my routing. I don’t want to burden my compiler with fetching the data from server and activities other than rendering. As these are model or domain specific, I create a service for each controller to handle these activities. As you know in most scenarios you need to fetch data from the server before rendering the page, “resolve” is designed for that activity. Until resolve returns (fetches the data or any other activity) Angular waits and will not render the page. Resolve option also helps avoiding the FOUC. Please see my blog on this for further details

As you see with my routing configuration, I am able to handle the preprocessing and also reduce the dependency of global $scope variable.