Use ui-router until the new Angular router (I think now Component Router) is ready. This was a very subtle recommendation, probably just due to the new router not being ready, and lack of other equivalent options. At least they said they looked at it for the new router, which wasn’t the case when I checked in March!

Disclaimer: The list is my personal interpretation – You can watch the full video and judge the correctness / accuracy.

AngularJS

You probably heard about AngularU, another big Angular event like ng-europe, with speakers from within and outside the Angular team.

There is a ton about Angular 2 (roadmap, server rendering, forms, TypeScript), but also several topics about Angular 1.x for both coding techniques and libraries, and even integration with different backends.

I was getting ready for another post, bootstrapping my demo angular module manually, and I just couldn’t get Angular to work. After a bit of frustration, turned out I needed to run this after DOMContentLoaded was fired.

I was working on a small AngularJS demo today, when I found the following is not working:

1

2

3

4

5

angular.module("demo",[]).controller("testController",function(){

});

angular.bootstrap(document,['demo']);

As you can see that’s just an empty Angular app. I was trying in Plunker, I tried JSBin and same. I was very anxious.

Looking at the console, I saw an “undefined is not a function” error, deep in some AngularJS code, and a few other quirky errors as well about minified code (although my version of Angular wasn’t minified).

I couldn’t tell what was going on, till I did some googling, and found something worth sharing here.

Turns out the bootstrap call needed to be after the DOM content has been fully loaded, this is the “ready” jQuery event if you use it, or the “DOMContentLoaded” event in plain JavaScript.

So, to make this line work, all I needed to do is write the following:

1

2

3

4

document.addEventListener("DOMContentLoaded",function(){

angular.bootstrap(document,['demo']);

});

If you are using jQuery, you could also alternatively write:

1

2

3

4

$(function(){

angular.bootstrap(document,['demo']);

});

Just passing a function to jQuery will be equal to $(document).on("ready", myFunction).

The VPS Recommendations:

Windows VPS

This is THE Windows VPS hosting for me. Good performance, several locations (I host in West US as I get visitors from US and Australia), SSD VPS as an option (which I used as soon as it was announced), and great support and price.

Everyone I recommended it to thanked me afterwards.

Linux VPS

I haven’t done much in the Linux space, but these two are the big players used AND trusted by the people I follow and trust.

The both have tools to get you started and create the WordPress setup for you:

Classic VPS hosting, even shared hosting:

Blue Host Blue Host is considered a budget hosting but some people used it for big stuff successfully.

There is a change in the way AngularJS tracks each option of the select element that was released as part of Angular 1.4.

Instead of using the index of each item in your list when you don’t use track by and using the value pased to track by when you use it, it will use an object hash of the item or track by property.

If you are using track by with ng-options, and using it correctly, this change will not affect you. Otherwise, you may get some interesting side effects. Let’s see what this means.

Let’s assume the following model:

1

2

3

4

5

6

$scope.list=[

{key:1,text:"One"},

{key:{id:2},text:"Two"},

{key:{id:3},text:"Three"}

];

You notice that the first element has a simple key of number type. The others have different objects as their keys.

What would be the effect of that in Angular 1.4?

Without track by

Given the HTML:

1

2

3

4

<selectng-model="sample"

ng-options="item.text for item in list">

</select>

Angular Will generate:

1

2

3

4

5

6

7

8

9

<selectng-model="sample"

ng-options="item.text for item in list"

class="ng-pristine ng-valid ng-touched">

<optionvalue="?"selected="selected"></option>

<optionvalue="object:3"label="One">One</option>

<optionvalue="object:4"label="Two">Two</option>

<optionvalue="object:5"label="Three">Three</option>

</select>

(I have tabified the results for easy read – The actual code doesn’t have all these tabs)

Angular uses the a hash of the object as its key. For items in the list used without track by we get the useless object bit, followed by a number that seems unique, but isn’t the index of the element for example.

Of course we also get the empty element added as we didn’t select an initial value. I talked about this before in detail here.

With track by

If we change our HTML to:

1

2

3

4

<selectng-model="sample"

ng-options="item.text for item in list track by item.key">

</select>

Where we tell Angular to differentiate between the items in the list by their key property, we get the following HTML generated in runtime:

1

2

3

4

5

6

7

8

9

<selectng-model="sample"

ng-options="item.text for item in list track by item.key"

class="ng-pristine ng-valid ng-touched">

<optionvalue="?"selected="selected"></option>

<optionvalue="1"label="One">One</option>

<optionvalue="[object Object]"label="Two">Two</option>

<optionvalue="[object Object]"label="Three">Three</option>

</select>

Ignoring the first item and tabs and form classes again, and only looking at the value attribute of each option tag, we notice the following:

The generated hash code for the simple number value (key: 1), was the value itself, 1.

The generated has code for the objects, was just what you’d get if you write the object in an old browser console log, a silly useless [object Object].

Why does this matter?

Try to select item “Two” from this example (in Chrome, for example):

You can’t.

Because both item 2 and item 3 have the same value string [object Object].