Angular2 Browser Support Announced For IE9, Android 4.1, And iOS 7.1

While Angular 2 promised a lot of cool things, it also came with a big disappointment for some developers. It was browser support.

Angular’s future centric approach made it target only evergreen browsers on the desktop. That meant that the only Internet Explorer version it was going to support is IE 11, which meant that developers targeting IE 9 or IE 10 are out of luck.

It also raised the question about mobile browsers. The only builtin evergreen browser rendering engine on mobile is Chrome in some Android 4+ devices. The team didn’t originally provide a mobile strategy.

Luckily for all of us, this has just got changed :)

Today Brad Green from the AngularJS team announced the browser versions Angular 2 is going to support, on both desktop and mobile:.

Can you see it? YES, that’s IE 9 in there!

I couldn’t believe it that I went on to confirm from Brad:

The mobile support is also awesome, as you can see, going all the way back to Android 4.1 and iOS 7!

How To Track

As per the exact announcement:

You’ll be able to track Angular 2 support and progress vs current browsers by looking at the status page of the browser testing build, available at:

The results are shown in a little widget image in the Angular 2 repository homepage, as Brad notes. Which is of course

Do not panic if you see some red instead of green in there by the way, as Angular 2 is obviously still work in progress.

Using `bindToController` & `controllerAs` Together In The Same Angular 1.4+ Directive

When I looked for articles about how to use bindToController in directives, I saw a lot of code samples that look like:

What Doesn’t Work?

With that, I should be able to use the directive in the following way:
(not using a directive template here, maybe that’s what others tested!)

And that should display success, right? It doesn`t!

Things I tried:

  • Defining the controller separately via angular.controller(...), vs making it a function in the directive definition object (DDO) as above

  • In the scope, changing the property name to be different from the directive name.

What Works? The solution

Simply, swap the values of bindToController and scope!

Like this:

I already read that in Angular 1.4 you can use the bindToController property similar to how you use the scope property, meaning you use it to define what properties are created in the new scope.

I still thought I need scope: {} though to make that new scope magic work. But it turned out that this was actually ruining it. All I needed was to set it to true to have a separate scope.

Complete Sample

I have kept it stupid simple so that the main point is not lost.

See the Pen bindToController Sample by Meligy, Mohamed (@Meligy) on CodePen.

Here’s what AngularJS Team Recommended Developers Do In AngularU Keynote

From watching the AngularU conference keynote and Q & A session, I noted some of their hints and answers into a list of recommendations

  • Use the latest stable 1.x version of Angular, at the moment 1.4
    No surprise, ha?!

  • Use the latest stable TypeScript.

    • Use the official Angular type definition file when using TypeScript.
    • Note that TypeScript 1.5 beta mainly gives you decorators/annotations, which are only relevant for Angular 2 anyway.
    • Alternatively, at least move to ES6, using Babel or Traceur
      • Both babel and tracer support annotations.
  • SystemJS seems like package manager of attention today, as it allows you to load libraries regardless of where they are packaged
    Obviously they are also checking all popular packaging options.

  • Follow John Papa’s Angular styledguide.
    That was a BIG endorsement IMHO, coming from the official team, even that it was kind-of in passing.

  • 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.

AngularU, NPM 3, & Hosting Recommendations — Issue12 — Meligy’s AngularJS & Web Dev Goodies


For the new ones around here, this is @Meligy writing this issue of GuruStop.NET Newsletter for JavaScript developers, especially those working with AngularJS.

I’ll mix in a few quick links with the ones I describe, for a change.

Please reply back and tell me whether you think this is a good idea.

Let’s jump to today’s picks:


AngularU Videos

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.

Angular 2

Contribute to Angular 2 [“community-help” Github Label]

In an up-for-grabs way, Angular 2 repository issues now has a special label for issues that the team expects external contributors from the community might be able to work on easily.

Check the list. You might find something that you can do!

React Native and NativeScript Integration [Article]

A narration from the “AngularJS 2 Roadmap” in AngularU that gets you the news pieces directly. It also links to the Angular 2 Rendering Architecture document.

Styling Angular 2 components [Article]

Angular 1.x

gulp.js starter for AngularJS SPAs

A scaffold starter kit for Angular applications that uses gulp and bower and tries to set a few more things than folder structure (which seems nice) like fonts, etc.

Similarly, here’s another one that uses NG6: ES6 + JSPM (or Webpack).

Angular Formly [Library]

This one seems to be getting A LOT of attention. I see several people sharing it, and I hear about it in the Angular Air podcast.

Give it a look, or check this article about how to use it.

New features in AngularJS 1.4, AngularJS Meetup South London [Article]

Using Angular 1.x With ES6 and Webpack [Article]

More traps, anti-patterns and tips about AngularJS promises [Article]

Directives (Angular 1.x)

A Guide To Transclusion in AngularJS [Article]

Very good explanation of templates and, obviously, transclusion.

Using NgModelController with Custom Directives [Article]

From GuruStop.NET

Using track by correctly with Angular 1.4 select ng-options

This is a one year follow up of the most read post ever in my blog, about select element quirks in AngularJS, How to set the initial selected value of a select element.

AngularJS is not working at all, & angular.bootstrap() throws weird errors

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.


Nvigating the React Ecosystem [Article]

We know React is just a template / view library. What other tools and libraries are there that make building whole apps with it possible?

The pursuit of high performing, easily maintainable React apps [Article]



Useful Javascript debugging tips you didn’t know [Article]

Being able to monitor function calls in the console is nice. Also, if you didn’t know about, black boxing library scripts is VERY nice for debugging jQuery / Angular / Polymer / etc. apps.

ES2015 / ES6

In case you don’t know, the committee that releases the JavaScript standard (EcmaScript standard) decided to have version names after the year of release.

So, the official name for EcmaScript 6 is actually EcmaScript 2015.

Announcing “Exploring ES6” [New Book] [Freebie]

The book is free for online reading, and you are encouraged to buy downloadable formats to support the author.

It’s high on my reading list. This guy’s blog is a very good resource for JavaScript info.

Code School learning website has aquired the domain and put some nice free learning materials in there for starters.

5min ES6 Intro (With Babel) [Video]

Setting up an ES6 Project Using Babel and Browserify [Article]


NPM 3.0 [News]

BPM v3 is released with label “latest” and actual description “beta”. It’s going to be side by side with future v2 releases, but at least it should fix several common issues with v3.


Getting started with gulp [Article]

Good article that was updated a lot to keep up with Gulp.

Web Design

Improving Web Fonts Performance [Slides]

Bootstrap Sass Installation and Customization [Article]

Designing User Interfaces for Your Mother [Article]

Text Editors / IDEs

Visual Studio

JavaScript Editor Improvements in Visual Studio 2015 [News]

There’s some about AngularJS & requireJS support, but my most favourite is integrating JsDoc into intellisense (autocompolete).

JsDoc fairly common in documenting JS libraries, so, a lot of them will benefit greatly from it.

@Ch9 Connect(“On Demand”); [Videos]

Channel 9 has a nice new series of various length videos about Visual Studio 2015, and other related .NET, Azure, and programming language topics.

I watched a few and liked them a lot.

Visual Studio Tools for Apache Cordova – Samples and Docs [Code Samples]


Github’s Atom free / open-source text editor.

Facebook open-sources its Nuclide IDE based on GitHub’s Atom text editor [News]

Github Atom 1.0 released (And very cool video)

Let’s see how long it will take other editors based on Atom to be in sync with it!

Software Design

Martin Fowler: Monolithic apps first, microservices later [Article]

In his own words “Almost all the successful microservice stories have started with a monolith that got too big and was broken up”.

The introduction to Reactive Programming you’ve been missing [Article]

Web Hosting

Where should I host my blog (WordPress or other), if I want my own server / VPS?

One of the blog posts I wanted to write for long time actually. In short, for Windows, use SoftSys Hosting, for Linux, use DigitalOcean, and maybe check BlueHost.

I got a comment in email saying why WordPress instead of static file based blog, but that might be a topic for another post!

Misc / Fun

DebConf14: QA with Linus Torvalds (August 2014)

One of these random Youtube autoplay videos, but I found it interesting, not having heard a lot from Linus before.

What happens when you type and press enter? [Article]

How deep do you wnat to take the answer to? Send a Pull Request, it’s a Github repo :)

There’s also other variations on Quora and on StackOVerflow.

Community Casts [Videos]

A video collection website that seems to have around 100 AngularJS videos, and similar number or general JavaScript videos and for C#.

Seems like there are some people actively adding videos to it as several videos are added just hours before I checked it.

If you liked this newsletter


You might consider buying me a coffee, or two ;)

You can donate to the newsletter via Paypal.

But most importantly

You can reply to me and make this newsletter better:

  • Is the current monthly frequency OK, or should it be closer to weekly or bi-weekly?

  • Do you like the content? Do you want more AngularJS content? Or less? More JavaScript? C# / .MET?

  • If uou find a good article, video, library / tool, or anything else that can fit into this newsletter, why not reply and share the love? Thanks :) :)

Apart from that…

See you next one :)

@Meligy –– GuruStop.NET

Solution for when AngularJS is not working at all, & angular.bootstrap() throws weird errors

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

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:

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

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

Sharing this here to save someone else the confusion I had!