Angular 2 for Angular 1 Developers — Full Video of My DDD Sydney 2016 Talk

Whether you have been to my talk at DDD Sydney 2016, or we never met before, here’s the entire recording as I captured it on my machine.

I decided to just upload the raw file with minimum or no video editing, so that I can get it up as soon as possible.

Let me know what you think, and what you’d like me to talk about in future videos.

You can tweet at me — @Meligy, and I’ll reply back as soon as I see it.

Meligy’s AngularJS and Web Dev Goodies – Issue 3

Hey there,
Welcome to Issue 3 of the newsletter. If you want to check the previous editions, you can go to You can access a particular issue like, for Issue 2 you go to

This time I have played a bit with the schedule and the order of sections. The idea is to experience different ways and hear your feedback on what works better. either on twitter or by email (simply replying to this message).

SEO — News

Video: Google will render JavaScript by end of the year
During AngularJS NYC usrgroup for September 2014, Brad Green, a Google engineering manager working on Angular.JS among other things said that Google crawler will render all JavaScript by the end of this year, and their should be tooling for checking that in Google Webmaster Tools as well – Discuss on reddit.

Angular.JS — Libraries

bind once for Angular.JS < 1.3
A set of directives that allow you to bind values to the UI only once instead of watching for model changes to update the UI. This is particularly useful when you have a long readonly list inside ng-repeat where most properties are unlikely to change until the entire list changes (and then the whole template will be re-rendered).
The concept is now native in Angular.JS 1.3, and there are other libraries that try to enhance it, like angular-watch-require and angular-watch-when.

If you use require.js and want to have lazy-loaded modules with it, there are several tries out there that get that sort of thing done. If all you want though is just lazy loaded modules that are loaded and bootstrapped on the fly when a certain route tree is matched (like areas in ASP​.NET MVC Areas or Rails Namespaces). Might be good for large Angular.JS apps. It also has been mentioned on the Adventures in Angular podcast.

JavaScript — MVC Frameworks

MVC Architecture
A very nice article about how we don’t exactly implement MVC as 3 parts, Model, View, and Controller. We usually had other parts too. I think the closest way to how I implement MVC is the last picture in the article.

Why I Don’t Want Your JavaScript Framework but I Love You
If you are in the mood of reading about what homework you may want to do before you actually go ahead and use a JavaScript framework, this could be a good read.

JavaScript — Ember.JS

I have a few links for Ember.JS this time that it will feel like I’m moving to it, although I’m not, I still find its innovation very inspiring as you’ll see below.

Mistakes I Made in My First Ember Project
If you have been following the newsletter for a bit, you know I value knowing how other SPA/MVC/MV* frameworks solve the same problems that Angular.JS solves. I think this knowledge is beneficial regardless of the framework because many of the issues have equivalent in every framework, and thinking about different approaches can really help you get the most out of whatever framework you use.

Event Delegation in Ember.JS – StackOverflow
When you use ng-click inside ng-repeat in Angular.JS, it doesn’t usually set one event handler for the parent of the element and use event bubbling to set it, although you can do it yourself via a directive. It was interesting to find out randomly via StackOverflow that event bubbling is how Ember.JS works by default!

Building rich single-page application with Ember.js
Historically, one of the things that stopped many people from learning Ember.JS was how hard it was to get to understand its pieces. This is now changing a lot (or may I say changed?) with better documentation and more great guides, like this one, which was very simple and lovely to browse.

JavaScript — ES6

Traceur is Awesome! … but still a little Painful
Don’t be turned off by the title. Traceur is a nice tool from Google to compile ES6 code to ES5 code that can run in any ES5 browser (most browsers, and even older ones can be polyfilled). This post describes what the experience is like when using it (.NET people might find using TypeScript a better option for its VS integration though, although it’s not not exactly ES6, you can sometimes go even crazier with some F# mix).

JavaScript — Debugging / Performance

Video: Advanced Debugging Techniques with Chrome
A must see video of what goodies exist in Google Chrome dev tools (including some of the relatively new features like new enhancements to emulation), this is probably a must-watch video for you. I have been using the tools for years and found quite a few things I didn’t know before.

JS Parse and Execution Time
When you use a framework (quite often you should), there’s only so much you can control in terms of performance. This article examines the time it takes to parse and execute jQuery on so many browsers and devices. It has some interesting observations, like how the total times vary like crazy between different devices, and how device hardware is still the major determinator is hardware rather than software (OS or browser).

Security – HTTPS

I think we are in the (very?) early days that will lead to all websites running HTTPS by default. Apart from privacy concerns, SCARY attacks, there’s also industry leaders push and relative ease of implementation. But it’s not something that everyone needs to worry about just yet.

SSL and SEO: Don’t Panic
There are a few messages that I want to send from sharing this:
1. Google announced they will consider SSL as one of its many ranking factors
2. This doesn’t mean you should freak out if you are not using SSL (the point of the link above)
3. But SSL is worth it anyway, as in most recent hardware and software (including IIS 8 and maybe 7.5) it’s already fast (the traditional old concern about SSL, apart from cost for tiny websites).

Slides: Is TLS fast yet?
If you are thinking about implementing HTTPS and worried about CPU performance, your server documentation documentation should tell you whether there are significant performance overhead (I checked some common ones and they were all saying nothing to worry about). This presentation helps assure the same idea.

Cloudflare – Introducing Universal SSL
The well known CDN provider Cloudflare announces availability of SSL services for all their plans, including their free plan. They serve files in HTTPS, and can be configured to pull assets (as source files to publish on the CDN) from HTTPS URLs as well. Here’s a basic write up of how to use it.

Security — General

Waxing Poetic with SwiftOnSecurity
I didn’t plan to make this newsletter mostly about security as it ended up being, but this story that reminds us of how some users can be so vulnerable in a way we can’t blame them for, is quite a good read.

Microsoft — Windows 10

Video: Windows 10: Enterprise Features & Core Experience for Businesses
You must have seen a ton of Windows 10 videos already, for me, this was pretty much the deepest one of them that related to me as a developer and showed the philosophy of the product.
One fun moment in the beginning of the video was giving a reason for the name, Windows 10 (instead of Windows 9), apart from considering Windows 8.1 as 9 (if you want) which the video didn’t suggest, it said that the main idea was calling it Windows One, similar to Xbox One and One Drive, etc. Windows One was taken as Windows 1, so they went for Windows 10! (if this is silly still – I think it was meant to be more funny than true-, I promise the rest of the video isn’t).

Video: Scott Hanselman Detailed Windows 10 Tour in just 8 Minutes
Scott is very well known in the ASP​.NET developer community as his work at Microsoft is mainly around that community and ASP​.NET MVPs, etc. He is a great person and speaker. His Windows videos are not something that he does for work, which makes them even greater and more realistic.

Windows 10 Insider Program / Preview
Just in case you missed the URL to get the technical preview! I have heard a few positive comments from some of those who played with it, especially on a Surface laptop (of course).

Apple / IPhone / iOS — Quick Links

iPhone 6 Screens Demystified
Also check their iPhone resolutions guide

iOS 8, thoroughly reviewed
Very long / detailed review

Video: Steve Jobs introduces WiFi to the masses with a hula hoop!

JavaScript — Quick Links

Promises in the Google APIs JavaScript Client Library
Google’s JavaScript SDK now return promises, for easier integration into promises-all-the-things!

Bye Bye Javascript Promises!
async/await like code in JS?

A JavaScript library to generate responsive stylesheets.

Explorations In Automatically Fixing JavaScript Linting-errors
By Addy Osmani from Google

Calculating Standard Deviation with and Array.reduce, In JavaScript
A bit of a different challenge

More from @Meligy / GuruStop

Thanks a lot for making it that far. If you like what I brought you, let’s connect in even more ways!

Follow me on twitter — @Meligy

Check The Newsletter Archive —

Get friends to receive the newsletter —

Remember that you can just reply to this email or mention me on twitter to tell me what you feel needs to change in next issue.

Until then,

Angular JS 1.3.0-beta.1 Available – Removes Support for IE 8

AngularJS vs IE8

I was checking the last version of AngularJS now and noticed a new version, 1.3 beta 1 is now available. The last 1.2.x release is 1.2.14.

Interestingly, beta 1 doesn’t seem to have any big fixes or features. The changes presented only include a fix for using <tfoot> tag as a top-level parent of Angular template, and being able to use <style> tags in your Angular templates.

The features only include supporting new <input> types, in particular date, time, datetime-local, month, and week.

A Quiet Release

One interesting thing about this release is that there is no official blog post about it. Actually all the other minor versions (1.2.x) didn’t have special blog announcements, and the team said they’ll only do it for big releases. I’d still have thought the first Angular.JS 1.3 public release to be considered big though!

The only mention in the release notes goes to an old post dated in December last year, that informs about the removal of version 8 of Internet Explorer.

The Big Change: Bye bye IE 8

The obvious and only breaking change in the first beta of AngularJS 1.3 is removing support of Internet Explorer 8. The so-called-breaking change doesn’t remove IE8 specific behaviors or workarounds. It only removes IE8 from test configurations, but you probably expect more breaking changes to follow.

Is removing IE8 support a real problem?

I think it is. Well, removing it is not news, but it still is a tough step at least on the short term.

According to the new stats published by TheNextWeb (originally from NetMarketShare), Internet Explorer 8 is the world’s most popular browser version at the moment, and it’s increasing in popularity (even if only by a fraction percent):

IE8 unfortunately regained 0.48 percentage points, and it’s still the world’s most popular browser at 21.73 percent

Compared to Chrome:

At 16.84 percent, Chrome continues to slowly recover its losses in 2013, and is getting close to finally passing Firefox. Chrome 33 only managed to grab 3.70 percentage points, which would have been higher if it was available for a full month. Chrome 32 grew to 3.07 percentage points to 9.86 percent, while all other versions were down: Chrome 31, Chrome 30, and Chrome 39 fell a combined 5.91 points.

Yes, things are better if you ignore browser versions:

Nevertheless, for February 2014, StatCounter listed Chrome as first with 43.89 percent market share, IE in second with 22.49 percent, Firefox in third with 19.21 percent, Safari with 9.74 percent, and Opera with 1.34 percent. The only part everyone agrees on is that Safari and Opera are not in the top three.

But still, obviously browser versions are still a thing even for ever-green (automatically updating) browsers` stats, so, it’s even more important for non-automatically updating browsers.

Bonus Note: Following Up With Angular.JS Releases

The best way to know whether there is a new version of Angular.JS, and get a detailed list of all changes that can help you decide whether to upgrade to it is the official ChangeLog file on Github:

Every now and then I check this file and learn about new releases. That’s how I knew about the new beta.

How to set the initial selected value of a select element using Angular.JS ng-options & track by

I have been doing Angular.JS in production projects for months, that it did surprise me recently how I haven’t used drop-downs in it. Well, I mean how I haven’t used them enough to get into several problems I had in my current project, and other friends at the same office had in their project as well.

To save you the pain I went through, I’ll list some problems and solutions here, and then give you a video that shows going through all of them ans the thought process that led to the solutions.

Initial selection

Assuming someObject in the model has the same properties and values as someObject in the objectList, it will still not be selected.

It’ll only be selected if someObject was actually one of the objects in objectList, like objectList[0] or whatever. Otherwise, Angular.JS will insert an empty option tag with no value or text and select that.

Root Cause

Angular.JS uses native JavaScript comparison for comparing the objects. In JavaScript, unrelated to Angular.JS or anything, comparing objects (object literals) is “by reference”, so it doesn’t factor the similarity of the objects. Only checks if the two references compared point to the same object in memory or not.


An un-documented (AFAIK) feature in ng-options is that you can use some bits from the ng-repeat directive with it, like track by. This allows us to choose some property as the comparison key.

If the key property is a simple type, like Number or string, JavaScript will consider it equal to any other object that has the same value, so we don’t have to use the same objects.

Invalid Value Sent On Server-Side Submit

When Angular.JS writes the <option> tags from an ng-options directive pointing to an array, the value of the option is always the index of the element it maps to in the array. This is not important if you process the selection on client side because you only deal with the result of ng-model anyway, you can use this later to create an AJAX request or whatever.

However, if you intend to submit the form using a normal server submission, and only use Angular.JS for say validation or managing complex form interaction (client-side tables containing sub-items with add/remove/sort for example), this may be a road blocker to using Angular.

Root Cause

By default Angular.JS uses the index of the array to track which object maps to which <option> element.


Similar to the previous problem, use the track by syntax. Angular.JS will use the track by property value as the <option>‘s value. Most of the time your tracked property is the key property you want to send to the server anyway, so, this should be good enough.

Simple Properties Scenario When Combined With Server-Side Submit

Let’s say you want something as simple as this:

This syntax will work very well, if you only use this value from JavaScript, you are all set. But if you plan to send it directly to the server (a normal non-AJAX form submit), you’ll want to consider using the track by syntax, like track by

However, if you do this, you’ll notice that the select is no longer usable. No initial selection, and changing selection although updates the model, it does not show the new selected value.

Root Cause

The track by syntax expects an object, with the property you use to track. It does not honor the key part used in the key as text syntax (which in our example is as g.text), so, it wants the ng-model to point to an object with the tracked property, it cannot be the key itself directly.


I didn’t call this a solution, because it’s pretty much a hack.

We created a new property (which I liked to prefix with _ to show it doesn’t normally belong to the model object), initialized it to a new object that contains only our key property id set to the original simple value genderId, and then used that as the model (as in ng-model).

We created and assigned the property in ng-init, then synchronized the changes to the simple property via ng-change. This allows the code everywhere else in the application (like the controller, or other parts of the markup) to only interact with the property we want (genderId in this example), without knowing about our hack. This makes things a bit cleaner, although it still remains a hack rather than a solution.

You can view an example of using this hack here.

Adding extra selection items to the dropdown

One thing you notice if you are affected by the “initial selection” problem, is that the empty <option> tag that Angular.JS adds when it can’t match the ng-model to the array from ng-options disappears when the use changes their selection. We have gone through how to avoid showing the empty option by mistake already.

But if you do want to have that option, it’s easy, just, um, add it!


If you are using Angular 1.4+, check the much smaller 2nd part of this article, about how to use track by correctly.
Using track by correctly with Angular 1.4 select ng-options – Why can’t I select this option?

The Video

If you want to dig these problems really deep and see what they look like in action, and what was the thought process for solving them like and in some cases other possible solutions, I have put all this in a (rather long) video here:

Serializing A PagedList Using JSON.NET In ASP.NET MVC – Gotcha And Workaround

Recently I discovered that there’s no one standard way for AJAX-driven server-side paging in ASP.NET MVC (in Web API, you can expose an IQueryable). For the case in hand, I decided to use PagedList for the server bit of the game.


The PagedList interface looks a bit like this (for demonstration only, real code is a bit different, check its source code for the real stuff):

It provides nice properties for paging, and exposes itself as enumerable and has an indexer. Apart from this snippet, the library also provides an extension method ToPagedList() to apply to any enumerable and allow it to populate the properties from it (by enumerating on it, and by calling the Count() method).

We were also using JSON.NET for JavaScript serialization, which is pretty much defacto standard nowadays.

The JSON.NET Serialization Problem

JSON.NET has a nice implementation, if you serialize a class that implements IEnumerable<T>, and you don’t have a special treatment rule for it (via what JSON.NET calls “Converter” classes), when you serialize an instance of the class to JavaScript, it will be serialized as a JavaScript array, where the enumerated objects are the contents of this array. Makes lots of sense right?

Well, yes, except when you have a custom collection like PagedList, and you want to treat it as an object that has several properties, not as an array. JSON.NET does provide a solution for this actually, all you need to do is apply the [JsonObject] attribute to your class.

Unless you don’t own the source code of this class.

In this case, you need to inherit from it. By doing this, I lose the nice ToPagedList() extention method (because it creates an object of the PagedList class directly), but luckily it does nothing but calling new PagedList() with the parameters we give it, so, we don’t lose much.

Here’s how my implementation looks like:

Apart from having to copy the constructors to pass parameters to the base ones, have you noticed the extra Items property in there?

That’s because the Subset member it includes is actually a field, not a property, and JSON.NET won’t serialize that by default, I could override it somewhere else, but since I’m fiddling with this here, it made sense to just stick a property to the class.

Bonus: A Bit More On Implementation

In my actual code, I have added the Dynamic Linq NuGet package, and assumed a single property for sorting (which was fair for the situations where I intend to use this), so, I complemented the code above with another class that looks like this:

This allows the controller to instantiate an instance of the SerializablePagedList class, pass it all the way to whatever repository method I have.

The repository method will take it as a parameter, work out what IQueryable it needs, and instead of passing it to UI, it calls CreatePagedListFromQueryable(), which returns an innocent-looking PagedList object (because SerializablePagedList inherits PagedList) that the repository can pass back to the controller, which can serialize it to JavaScript without a problem, then the rest is all JavaScript code to work out how create the paging parameters, and how to use the returned paging hints.

Even more, now that I think about it, maybe I should change the return type to SerializablePagedList, to make the Items property visible to the developer (because they’d think it’s magic, and in coding, magic is BAD). I’ll leave this as an exercise for you :)

Final Words / Disclaimer

The motivation behind this post is that I found the problem of serializing PagedList using JSON.NET a challenge and I wanted to help others work it out faster than I did. Is this how I’d recommend doing paging? Well, I don’t know, but if it’s what you choose, I hope that I have saved you some time.

And more importantly, is it good enough to be the defacto standard I mentioned I was after in the beginning of the post? Not really. I think it’s not bad, but definitely not the best. I’d love to see less clever (read: hacky), and more simpler solutions.

A Video of Aaron Powell Presenting IE 11 At Sydney JavaScript UG

I haven’t been able to attend ALT.NET Sydney or SydJS last month,
as I had to follow up some family issues in Egypt on daily basis.
However, Aaron Powell ( @slace) presented at SydJS last month, and was kind enough to
record his talk on his laptop as a screencast and put it online.

The talk is about dev tools in Internet Explorer 11.
Well, yeah, I know, IE! No matter what I or you think about this browser,
we all often have to test against IE and even worse, against older versions of it too.

With compatibility modes and all, I think it’s great if newer IE versions can make
this must-have experience easier, and can prevent IE from being a source of headache.

Watch Aaron showing us how this applies to IE 11

Videos from ALT.NET Sydney Usergroup, 30 July 2013

Continuing my experiments of recording the few events I attend in Sydney using a simple Galaxy S4 phone, this time I’m posting videos from Sydney ALT.NET usergroup gathering in July.

Of course if you are interested in all the videos I put online, including a few tutorials I have created myself instead of just recording, check out my channel on YouTube.

Now to the videos…

Applications of the Reactive Extensions framework

By Niall Connaughton, @nconnaughton on twitter

Moving to HTTPS

By James Crisp, @jtcrisp on twitter

Final Note

Please let me know if you find these videos useful. I may not be able to do much about the quality in the short term, so, it’s worth knowing if the videos as-is are helping, or I need to pause until I get better tooling than just my phone camera and a simple webcam.

So, check out all the videos on YouTube, leave comments ion them, and let me know the topics that interest you, which may in the future turn into tutorials I create myself, or suggestions to ask usergroup leaders to look for presenters to talk about.

Videos from Sydney JavaScript UG, 17 July 2013

Last month I started a new habit, recording SydJS usergroup videos. Although there are not so many views of these on YouTube, I got a call from a friend who can’t make it to the gathering and thinks the video are useful, so, I’m continuing with them…

Here are the videos for this month’s gathering. Pro-tip: Make sure to switch video quality to 720p for best experience. The video quality button is one of the left buttons next to full-screen button.

Ben Schwarz – Built an application, and will show you what he learnt

On responsive design and other real-world implementations

Don Nguyen – Server Side JavaScript building a game right before your eyes

A Node.JS session by the author of the “Jump Start Node.js” book

John Allsopp – Building an HTML5 security camera LIVE in under 15 minutes

Been amazed by the capabilities available on so many regular laptops today

Maintaining your personal brand online with @TathamOddie – New Video

My new video featuring @TathamOddie on maintaining your personal brand both online and offline is now up…

Tatham Oddie is a well known public figure in Microsoft world as he speaks in so many .NET conferences around the world and is an active contributor to several high profile open source projects like WebFormsMVP.

In this video Mohamed Meligy interviews Tatham on online personal branding and ow you can makes the best out of people you meet in social media and offline groups. Tatham shares his experience on how to make it easy for people to recognize you and communicate with you for both social and business benefits.