Troubleshooting blank pages and render failures in AngularJS.

An odd thing happened this weekend when I was tinkering with some code while pointedly ignoring my daughter and parenting responsibilities generally.

The Task

Put in a new directive to implement a reusable panel to display error information. Not ground breaking stuff by any means. The html is simple enough

Very bootstrappy as usual. Reference the directive on the view thus

Happy days – a lovely reusable error panel.

The Problem

Sadly it isn’t to be. The previously functional page becomes entirely blank after the directive.

Badly formed directive

Unhelpfully there is no errors in the console and viewing the HTML source does nothing for us since it is a single page application.

The Solution

The problem is the use of self closing tags when referencing the directive. Referencing the directive with an explicit closed tag resolves the issue. Example – use this markup

And the page springs back to life

Well formed directive

Relief all round. Fortunately I found the solution pretty quickly (though I still continued to ignore the daughter). It’s the sort of error that can wasted hours if it hits on a Friday afternoon when you are feeling generally depleted.

Actually the use of self closing tags isn’t that helpful in HTML5. I’ve got into the habit of using them but looking into it more deeply it’s actually a bad habit. They are valid but optional in HTML5 for void elements but invalid for non-void elements. Since they are either optional or invalid its best to avoid them and write out the tag – particularly as it causes obscure issues like this.

Useful Links
Good discussion of Stack Overflow about HTML5 and self closing tags.
The official documentation for AngularJS directives if more information is required.



T-SQL Random Data Generator

I’ve often had the need to populate database tables with chunks of random data for testing and so forth and this random data generator stored procedure does the trick for me. I’ve had it knocking round in my sock draw for quite a while so I’ve dusted it off and updated it. It actually does a bit more than I remembered. I’ve used it on SQL Server 2005 and 2008 and the INFORMATION_SCHEMA use should make it forwardly compatible.



This procedure actually does the heavy lifting and generates the insert statements.


It’s very easy to create a wrapper stored procedure to get multiple statements. One row of random data isn’t that much use – 1000 might be.


To get an insert for one line of data

To get multiple insert statements call the wrapper function

Notes and disclaimers

What it does

  • It outputs an insert T-SQL statement for any named table in the database.
  • Detects foreign keys and inserts and makes a random but valid link to the child table (this was the hard part)
  • Detect different data types and does the necessary SQL formatting
  • Accounts for max character length in string type fields
  • Accounts for identity columns
  • Detects nullable columns and leaves them null

What it doesn’t do

  • Doesn’t account for unique indexes
  • There are omitted datatypes (cursor, timestamp, binary, varbinary, image) that I’m not really interested in right now.

Hacks and shortcuts

Where the foreign key links are linked to a child table via a unique index rather than a primary key it assumes a foreign key of 1. The INFORMATION_SCHEMA views don’t include index information. So this would necessitate delving into the sys.index table. Not impossible but the proc was complicated enough as it was. I didn’t need it so I didn’t do it.


  1. Foreign keys are of a numeric type i.e. int, float et. al.
  2. Foreign key constraints exist on the database. It isn’t magic – it can’t work out the relationships if they don’t exist.

Room for improvement

Here’s some extensions that may be useful for individual projects

  1. Implement missing datatypes.
  2. Create custom inserts for known field names to give more realistic data for your application
  3. Randomise the character data properly.

So that’s it. Live it, love it and fiddle about with it a bit.

Useful links

The official documentation for the INFORMATION_SCHEMA used in this procedure is here

As ever the source code is on GitHub. There is nothing more than what is here but my WordPress code formatting plugin hasn’t made a great job of formatting the SQL code so the GitHub link might give clearer view of the SQL. Also, it seemed cruel not to give it a home on my demo repository with the rest of my code samples.



Free Book: JavaScript Best Practice

getting MEANA quick one. Most web developers can write JavaScript and I suspect it’s on most developer’s CVs somewhere. But it’s easy to write bad JavaScript and not so easy to write the good stuff. I guess it’s because JavaScript itself is so free and easy. It isn’t opinionated.

So I thought this JavaScript best practice primer was an excellent read and it’s freely available. It’s an online bonus appendix to Simon Holme’s Getting MEAN book. The book itself is really good and worth a read if you are interested in the MEAN stack. The appendix though is like multi vitamins – it’s good for everyone.

Even though I’ve been writing JavaScript on and off for years it still showed me a thing or two. It covers things like

  1. Variable hoisting
  2. Block and global scope
  3. Callbacks
  4. Comparison operators
  5. Object orientated coding including IIFE
  6. And more ….

Only takes half an hour or so to read and I’m a slow reader. One to recommend to family and friends. It’s certainly what my Mum is getting next Christmas.

Simple Debug Panel for AngularJS

I am aware that there are many many other ways to get debug information from an AngularJS application but that’s not stopped me implementing another one. I do actually find a customised output of JSON objects useful particularly when working with deep object graphs. The implementation also is useful as a worked example of a couple of AngularJS principles.

The Demo Application

The demo application is a bookshelf application that searches the google book API and enables the user to add books to their own library. This is my ‘go to’ demo application that I’ve implemented a couple of times in different frameworks. This one is using the MEAN stack and the source code can be found here.

The Problem

When I search the google API I get a very large complex JSON object as the output. I want to know what is in there as I’m saving bits of it in my own database and might be interested in other bits. I want it displayed but easy to toggle on and off. I’m ultimately going to read something from the query string to do this as it is easy to toggle with minimal fuss.

When it’s finished it’s going to look like this…

debug panel
Google Bool API results displayed in debug panel

I’m going to use bootstrap for styling throughout as I’m not hugely concerned about how it looks – it’s just got to be reasonably neat. So its bootstrap classes throughout I’m afraid.

The Solution

The solution is going to demonstrate the following

  1. The use of directives in AngularJS
  2. Using global values and config
  3. Setting globally accessible values from the query string.

    Step 1: Implement a debug panel

    The initial implementation is directly on the search page. When I do a search I want to see the following debug output

    Debug panel displayed on book search page

Before I do a search I don’t want to see anything.

The implementation is

The scope has a property SearchResults with a giant json object direct from the GoogleAPI. I want to show this. I use the json filter to prettify the result and it’s wrapped in pre tags so it displays like code. The ng-show attribute hides it if the searchResults is null or generally falsy which is what I want. That’s pretty good and works for me.

Step 2: Make it a directive so it can be reused

Now I want this on every page and I want it to display anything I want not just the searchResults. I want it to be generally useful. To achieve this I’m going to use directives which allow me to include fragments of HTML across different parts of my site. I now want it on the book details page as well.

The first job is to extract out the debug panel into a separate html file and to remove the dependency on searchResults. The debug panel html is extracted and saved into its own file at

And it looks like

This is the contents of the entire file now. I’ve removed the binding to searchResults and I have now got a property called ‘display’. This is any JSON object I want to display in my results panel.

Next job is to tell my angular application about my new directive. So I create a new JavaScript file and put this in

This does a few things. It tells angular where to find the html fragment for display via the templateUrl property. More interesting it also uses scope isolation to feed in the JSON object I want to display.

The scope property is the link between the page and the directive. I can insert my parent page scope into an attribute called display and this becomes available to the directive. It breaks the hardcoded dependency on the parent scope and makes it all more flexible. The ‘=’ in ‘=display’ tells angular it is an attribute.

That’s probably not hugely clear but finishing the example should help us. The last step is to reference the directive on the book details page. I need to remember to include the script

Then the directive is referenced as markup which looks quite neat

So the display attribute is bound to the book property which is then fed through to the debug panel and displayed. I can put anything into it not just searchResults as before.

debug panel on book details
Debug panel displayed on book details page

I can now go back to the search page and implement the directive in the same way.

And that will display my search results in prettified json which I quite like. It’s even better now and I am mentally slapping myself on the back. However I’m not finished. I don’t always want to see the debug panel. Sometimes I just want to see the page as it will be when it goes live with no debug information at all. I want to be able to toggle it on and off with ease.

Step 3: Using a global setting to toggle the debug panel

I have ambitions for my BookShelf demo site to be truly huge; a site which will make eBay look small. To that end I don’t want to have to turn my debug panel on and off manually everywhere it is used. I want one point of control.

I’m going to set up a DebugOn flag when the application initialises. For this I could use a global constant like so

However (spoiler alert) I’m going to want to amend them later on so a global value is more the way to go. I’m setting this when the app initialises so it will be

I can use the built in dependency injection to access the global variable in any service, filter etc.. so I’m going to use that to grab it in the directive script …

The directive has become a bit more complex but it’s not too terrifying. I’m taking the DebugOn value as a DI injected parameter – very standard Angular stuff. I want to hide the debug panel if it is set to 0. In essence I want to change the DOM if the DebugOn variable is 1 and the link property enables us to do that.

The elem parameter is a collection of all the directive element outputs in the app at that time. For the debug panel it will be one but I will be good and iterate through it anyway – we just obliterate the innerText and thus hide them from the user.

Now we have done this turning the debugging panel off becomes a simple matter of amending the value of DebugOn variable in one place and restarting the application.

Just what I wanted.

Step 4: Using the query string to toggle the debug panel

But it’s not enough. It never is. I’m not satisfied with amending the application – I want to just pop something on the query string, have my application pop into debug mode and have my debug panels spring into life like desert flowers in the rain. I want it and I can have it.

Should turn on the debugger but as I’m navigating around my single page application my querystring is going to disappear. I could maintain it but I don’t want to – it seems like hard work. So I’m just going fall back to some good old fashioned JavaScript. The full url is available in

So I’m going to use a couple of functions to grab the value and put it in the global variable

And the setting of the debug variable becomes

And done. I done even need to change my app to get the debug panels on. A quick fiddle with my querystring and there they are. Lovely.

Further Development

As much as I like the query string idea I wouldn’t want to see it in production. As an immediate project I would want to disable this in prod environments. It’s not hard but needs to be done. I’ve got other ideas around multiple panels, debug levels and improved display but I’ll leave those for another day.

That’s it – end of post other than notes. Happy New Year everyone for 2017.

Full Script

There is a bunch of code here so to aid the discerning coder – this is the all code needed for the debug panels





Note about Immediately Invoked Function Expressions

I haven’t wrapped all my examples in an IIFE. This is just to save space and reduce nesting in the examples. Just mentally put them back in if they are absent i.e.

Useful Links

AngularJS directives

Scope isolation

AngularJS Constants and variables

Quick explanation about IIFE

The getParameterByName function is from the incredibly highly upvoted answer on Stack Overflow

Google Books API as referenced throughout demo code