Wednesday, 27 January 2016

Are Angular 2 Services Singletons?


No.
Like in Angular 1, a "Service" service news up the function we use to define it.

If they were singletons, this approach would work.

JS Bin on jsbin.com

That jsbin sets up a service that holds a list, and injects it into two different components.  One displays the list, the other adds items to it.
As we can see, it doesn't work.
As we can also see in the console, the constructor is called twice, once for each component Demo1Service is injected to.

This is how we have to do it for it to work:

JS Bin on jsbin.com
Now the list is outside the class and each instance of that service will have a reference to the same array.

Let's see if I'm getting something wrong, and it's all coming from my using ES5 or something.

How about JScript  TypeScript?

It still news up the class twice, so it doesn't work properly with the array as a member of the class: http://plnkr.co/edit/UwZ0d6g2X5NAV5J5j7rS?p=preview

And it works fine with the list outside, of course: http://plnkr.co/edit/78eXH0oJIwqS9WocyjGn?p=preview

Then why can't I find anywhere on the internet anybody that says the same thing?

This post appears to me to be saying the exact opposite of this.  That all services are Singletons: http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html

That is right now being linked to from the official Angular 2 docs.  It doesn't bode well.

Tuesday, 12 January 2016

Chrome on Android may resize the window when you least expect it.

What are we talking about?

In Chrome on Android, the location bar is hidden automatically in some cases, to increase the useful screen area.

The page needs to be long enough to make it scroll, and not just a bit, but more than a certain amount (How many pixels exactly?  I don't know.)

That's all well and good.

And if you use https and a self-signed or otherwise invalid certificate, Chrome will never hide the bar.

Which is very good too, for security reasons.  Make people see they are in a potentially dodgy website!

What is the problem then?

That it is very common to use self-signed certificates during development and/or testing, and use a proper certificate in production.

Now your production and testing environments are different.  Uh-oh.

Some things that may go in an unexpected way:

  • Did you measure the size of the window and use it in some media query? The actual size may change.
  • Do you react to resize events for anything? Like, trying to detect screen orientation change?  Did you take into consideration that there may be resize events unrelated to orientation changes?

Let's have a look at it

I have a couple of test pages here, go open them in your phone:
That last one may or may not be a real shop with the wrong certificate.  I found it here: https://onlinessl.netlock.hu/en/test-center/self-signed-ssl-certificate.html 
It works for our purposes for now...

In the first test page you'll see the background color flash red whenever there's a resize event.

In the first test page, scroll down and you should see the location bar (and the tab bar too, when in a tablet) retreat to the top of the screen.  Then you'll see the screen flash red, showing that a resize event was fired.

Open the second link, though, and no matter how much you scroll up and down the location bar never goes away.

So what do we do?

Not much you can do, except being aware of it and code your site properly.  This is the browser behaving as it should.

Does it work for your device? It doesn't? Any feedback is appreciated.