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

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. 

Tuesday, September 2, 2014

Book review of Kendo UI Cookbook

Last week I did a review of the Kendo UI Cookbook and here are my review comments:



Urlhttps://www.packtpub.com/web-development/kendo-ui-cookbook

Rating: 4 / 5

Review comments:

If you go over to the Kendo UI site, you can see their awesome demos. But if you want to implement those controls in your project, then there is little help on the Kendo site. They just dump the code with no explanation and you need to be an expert to understand their documentation. There is a huge gap on the Kendo site. This book nicely address that gap. Actually you get more benefit if you use this book in tandem with KendoUI.com. In addition this book goes beyond the typical demos on the Kendo site and provides much more information. It alerts the common gotchas and goes in depth. I believe that the goal of this book is to provide easy to use recipes for complex controls. If this is correct then it did a good justification. 
The good:
  • This book provides wealthy of details for each receipe with its "How to do it" and "How it works" sections
  • This book even goes one step ahead and provides advance use of the controls with the "There's more" section. Some of these tips are not found on the Kendo site
  • This book is a must read if you are building mobile web applications.

  
Nice to Have:
  • I would have liked this book more if they used the same demos as on the Kendo site. This helps reader to get a feel of the controls while reading the recipes.
  • As AngularJS is gaining popularity, this book should have provide some recipes using Kendo's angular directives

 The bad:
  • In my opinion this book fell short of covering the most widely used KendoUI form controls such as DatePickers, textboxes etc.
  • This book starts with the complex framework chapter which may scare beginners. If you a beginner, just skip the first chapter
  • Sometimes I feel that this book is not properly organized. It does not provide me a story. I believe this is due to the book's goal to cover the complex controls

 Bottom line:
  • If you are a UI developer or designer who wants to build web sites with awesome Kendo controls then this book is for you.
  • If you are a backend developer and looking to use Kendo form controls then look elsewhere.