How to use Angular 2 with ASP.NET 4.5+ / ASP.NET MVC 5

I got the following question in my ng-sydney AngularJS usergroup:

How to setup ng2 with Vs2015 for like mvc/web API?

While many blog posts answer the question for ASP .NET Core, very few answered it for ASP.NET 4.5 / ASP.NET MVC 5. So, here’s what I tried, and seemed to work.

Create a new project in Visual Studio

I found this online project template template Angular2 Mvc5 sample application, and it worked pretty well.

File -- New Project

Run the sample you get to see the output working.

Also, read the template page for workaround to potential issues with Node.

Upgrade the outcome

Unfortunately, the template only gives you Angular 2 RC1 work, with the deprecated router.

Luckily, it’s not too hard to upgrade it!


If you go to the official Angular quickstart, which you can reach by going to, and clicking “Get started”), you can find the package versions you need in 2 ways:

  1. Clicking “live example”, which takes you to the Plunker example page, you can get the latest versions of Angular 2 packages in the system.config.js file.
  2. Scrolling to Step 1 – b, which shows a package.json file you can just copy the dependencies section from.

Once you figure out the version numbers, you need to apply these to the package.json file in the root of the web project, here’s what the dependencies piece looks like for me, for Angular 2 RC 4:

Try running NPM from a command prompt, or go to Visual Studio output window and change “Show output from” to “bower/npm”. If you see errores complaining about a version not existing of some package, the message will tell you what versions are available, and then you can just pick the highest.

For example, I’m excluding replacing the deprecated router from this exercise. So I kept it, and it didn’t have a package for rc4. The error message about that told me that the max version available is rc2, and that seemed to work fine.

The new router also has its own version. You should be able to see that version in the config file like the other Angular files though.

Angular Forms

After that, since Angular forms became a separate module in RC3, this module was not included.

So, first you need to add it, it has a separate version as well. The plunker systemJS file will tell you what. And it’s shown in the above sample.

Then, you also need to add it into your own systemJS config file systemjs.config.js. Just add it to the packageNames definition. It should then look like:

And that’s it. Run the application again. You should still see the demo Todo-list with routing working.

Look at the browser devtools console. You should see a warning that you are using the deprecated forms module (what is available by default), and shows you a link of how to override it.

This means the project is working well with Angular 2 RC4, and the deprecated forms and router.


Next, you should be able to start deleting the sample components to leave for your own application components.

Before you do that, you might want to see how the project template works, including the serverside ASP.NET MVC bits. This will give you some guidance on how to structure your own.

Once you are done, you can remove the deprecated router from application bootstrapping file and from NPM dependencies. Then start using the new router, which we already included in the previous steps.

You should also be good to disable the deprecated forms (those are not a separate NPM module, so that stays the same), by modifying the application bootstrapping code as the link in the browser console tells you.

Good luck :)

How To Include AbcPDF XULRunner Folder As Linked Item In Visual Studio?

I was working on some PDF generation for a customer that used AbcPDF in their ASP.NET MVC website.

The work was to move from basic MVC views written especially for PDF rendering, to reusing the same MVC views we send to the HTML browsers.

With more sophisticated markup, came more CSS styling. The default IE engine seemed to lack a few CSS features we used a lot (example, the :not() CSS selector). So, we decided to use the Gecko engine.

The rendering was much better, with a single exception, that the option to choose media type (screen, print) could not be switched. It had to always be print. I guess a few other browser settings were not applicable as well.


All I needed to do, to add Gecko, was to install the ABCpdf.ABCGecko NuGet package. Something like:

It took quite a while, and at the end, it showed me a message, saying that I need to manually (hate that word) copy a folder called XULRunner21_0 to the MVC project’s bin folder.

The Firefox / Gecko XULRunner Folder

The folder is needed for AbcPDF to connect to Firefox 21 (what’s used in v9, I guess it’s 38 in v10).

The folder, which has so many files and subfolders, was present in the root of my ASP.NET MVC project.

I didn’t want to have to commit this ~40 MB folder to our source control. The customer used NuGet package restore and didn’t want to keep binary files in source.

I know different people and different projects handle dependencies differently, and it can get interesting, but in my case, it was not wanted.

So, I modified the web project .csproj file, and added the following after a PostBuild <Task> in the file:

This made the folder show up in the project web project root in Visual Studio, and get copied to the bin folder, but the actual files were pulled from the package folder, not left in the website root itself.

The approach in general is very useful for adding an entire folder as a linked item in Visual Studio. I hope that little trick has helped!

Should Angular 2 Be Renamed Like ASP​.NET 5 » ASP​.NET Core?

TL;DR: No. It’s not exactly the same situation.

A friend asked in the Egyptian Geeks Facebook group in Arabic:

Is Angular 2 a suitable name, or does it need a new name? Or am I just not getting the big picture?

Because when I learned about it, I found a lot of different, removed, and new pieces.

As ASP.NET 5 became ASP.NET Core 1, is it a good idea to pick a new name to show the big difference from Angular 1?
Or is this just my problem and the difference isn’t that big?

I thought that it is a logical question. Here is my take on it, as a non Angular team official or affiliate…

My Answer

First, the question has a good point.

The “Core” naming came from Microsoft’s plans to make everything in the new ecosystem “Dot Net Core”-first.

Microsoft always tried to make the point for people that ASP.NET 5 is a “Version 1” product, that is neither neither as version-complete or as mature as ASP.NET 5.
This is way before the rename to ASP.NET Core 1.

Maturity And Meaning Of Upgrade

The Angular team has a different vision. They have confidence that they transferred all their lessons developing Angular 1 into the development of Angular 2. Which is why they really feel it is an upgrade.

They want people to move to Angular 2 automatically, not to feel that they are back into the “framework selection” process again.

I bet the Angular 2’s ideal world is one where they can stop Angular 1 support as soon as they release Angular 2. Except they definitely won’t, so that they don’t let they users down.

Naming Is Hard

As the ASP.NET team themselves always said, naming is a Marketing issue rather than a technical issue. It’s not simple. Everyone have different considerations when naming things.

Another example is Aurelia. Aurelia couldn’t be just “Durandal Next”, because the name “Durandal” has been related to failure in people’s minds (after a failed kickstarter).

It is the opposite situation in the Angular case. It’s hard for it to be called anything else (even something that has the word “Angular” in it), because it needs to be interpreted as an upgrade.

This is, again, not what Microsoft wanted to communicate. They wanted the new name to convey their message that the new ASP.NET framework is NOT an upgrade.

It does not the experience of 15 years of work on the existing ASP.NET framework and add to it in a newer version. It’s a different, modern, lean framework, that is still in year 1.

You can see the contrast clearly.

The Standard Answer

A few others have also pointed out that as per Semantic Versioning, a major version number is acceptable for breaking changes.

I see that there is a difference between “Breaking Changes”, and a “new API surface”.

But there is no standard that tells you what to do in that case, so, the use of major version number (which is technically correct) is still sort-of reasonable.

There are many many patterns in versioning software, as Wikipedia explains.

What do you think?

Let me know in a comment below, or in an email, or tweet.

Meligy’s AngularJS & Web Dev Goodies — Issue8: Birthday Edition :)

Hey maties!
It’s been a while since last issue, but it’s my birthday today. What could be a better execuse to take a day off from work, sit in a nice cafe, and compile some of the drafts I have into a new issue!

I originally had a longer opening, talking about how this list has grown to include over 290 real people, and how one of my goals is to reach 1,000 before next year. I planned to ask for help spreading the word.

But we are over this now already, aren’t we? Let’s keep it short and get into content.


Angular 2.0

An Angular2 Todo App: First look at App Development in Angular2

Before this video, everything most people knew about AngularJS 2.0 dated back to the teasers in ng-Europe last October. People had to go through Github commits and issues or meeting/design documents (which are publicly available and I linked to some earlier in this newsletter) even just to get a feel of what is going on.

The video (from a usergroup meetup) has a code demo, which shows the new HTML templates as well as the directive (or component) definition syntax, with the C#-attribute like AtScript sugar.

It also has a good Q & A session on the progress, and how it relates to other areas like, obviously, Angular 1.x, and how Angular 2.0 will remove 2-way data-binding!!

ng-conf 2015 | The AngularJS Conference

The next Angular conference is already around the corner, coming March 5-6. Keep an open eye on it!

I intended to put this in here because I was like “Sure there will be Angular 2.0 stuff in there”, even though the schedule only mentions it in a single talk!

It’s also mentioned in the above video that the team has more to say about it in ng-conf.

Note that Angular 1.4 will be announced in ng-conf as well. That’s already in beta 4 stage (as 1.3.x is now at 1.3.13). If you follow the newsletter for long, you know the best place to keep up to date with versions, the changelog.


Karma and Mocha for AngularJS testing

If you are like me, you are probably tired of so many names that come to mnind around testing, especially when it comes to AngularJS. This post helps a bit.

It picks a chain of tools, tells you what the choices it made are and what they do, and help wire them all into a usable workflow.

Visual Regression Testing For Angular Applications

Implementing responside design involves a whole lot of CSS breakpoints and JavaScript interactions etc. With all that going in the page, it can be quite hard to test these interactions beyond testing in so many devices.

The article presents a relatively simple approach that you can use on the long run to make sure new UI components are not breaking the existing UI. The approach feels useful even beyond responsive design, although I haven’t played with it (yet).


Unobfuscated: Angular.js Accessibility

Nice collection of blog posts about accessibility when using AngularJS (read the old ones first). Also has good work around improving the accessibility aspects of the TodoMVC sample AngularJS app.


Yes, Microsoft has found that React‘s popularity is not to be missed, and similar to catching up with Gulp support in soon-to-be-released Visual Studio 2015, they decided to support reactJS as well.


Aurelia is new JavaScript framework similar to AngularJS, EmberJS, and DurandalJS. Actually, it replaces DurandalJS, as it is from the same author.

Introducing Aurelia
Remember Rob Eisenberg, the guy behind DurandalJS? He joined AngularJS team working on the new pre-release Angular 1.x/2.0 router, he wrote the “All about Angular 2.0” post, then he left the team hinting to go work on Durandal NextGen.

Just in case you missed hte news last month. It seems he created yet another framework instead, Aurelia. In this post there’s a video that shows so many similarities with what Angular 2.0 is supposedly going to look like, except his bits are actually available for using today, and he doesn’t go too far to create something like AtScript.

The framework is really interesting, and people -of course- have already started writing about ditching Angular for Aurelia, as usual with every other new framework out there ;)



The new version of Javascript, which introduces interesting features features like classes anad modules, and scope variables (vs. function-level variables).

It’s not yet supported in most browsers, but there are tools to translate it to Ecmascript 5, the currently supported JS we know.

Getting Started with ES6 – Transpiling ES6 to ES5

A very simple tutorial on using 6To5 and gulp task runner to start writing code in ES6 today and translate it to ES5 for browsers. I here link to the entire (tiny) ES6 category in the blog for more about ES6.

Dan also has a nice Github repository of samples he links to in the post, which is very helpful for getting to know the new ES6 feature.

Dan Wahlin is a popular video course author and more, and the guy who made ths Angular in 60-ish minutes video I always recommend to devs new to AngularJS.

ES6 Language Specification Draft from Mozilla

Yes, it’s true. ES6 is not final yet, although most of it is pretty stable, so it’s not something to be worried about.

Learning a language by reading its specification is a very interesting way, and (sometimes) is not that crazy. This is the PDF standard rendered as HTML instead of PDF, with links to the official PDF and Word documents.

Give it a look (note that this is the entire language specification, not just what’s new in v6).


ASP​.NET 5 Updates and other improvements for Web Developers in VS 2015 CTP 6

Visual Studio 2015 CTP 6 came out yesterday. There’s a great official announcement, and the release page shows a (very) good summary of new features in all areas, but this link above is the detailed coverage of what’s new in ASP​.NET 5 (also known as ASP​.NET vNext).

General Web Dev

Some of you remember I made this list to remember the cool links I neeed ot check or come back to. These up are a few!


HTTP/2, the first major change to HTTP in 16 years, has been finalized

It will take a while to be the norm of course, but HTTP 2 can be a real big deal. It promises a lot of speed enhancements, and one interesting enhancement is being able make multiple resource requests in one go. This alone can be very inspiring.

Let’s wait (quite a bit) and see what comes out of this. Again, it should be big!

– HTTP2 Book – Mozilla (PDF)

If you really want to dig into the protocol, this is a good read. It’s by a Mozilla guy who works on the protocol itself.

And it’s not even a specification (so don’t freak out), it started off a presentation he delivered last year. Check it out, it shouldn’t be too bad ;)

[Issue Bonus] Free Web Development Videos

Level Up Tutorials

I’m very surprised this site is not popular. It’s like, a big library of free videos with some premium content. Except the videos cover a really wide range of topics.

It had a series about Web Components & Polymer Project that I found very useful for getting up to speed with it, but it also very wide range of topics like: SASS, CoffeeScript, Grunt, Gulp, WordPress and other topics, like Android dev and basic Mac command line.

Toptal Videos (AngularJS, JavaScript, UnderscoreJS)

This is a freelancing company that tries to market itself as a place for top developers. I don’t know who they are but I’m also not in the market for that need anyway. What I know is that they have very good articles and videos.

One thing I wish they did was provide some sort of tagging or categorization. I saw their AngularJS stuff and was nice. They also have some JS & UnderscoreJS-specific stuff. Should be worth skimming the list.

Microsoft Virtual Academy
Not many people know that Microsoft have some great online courses on C#, Mobile Development, BI and even the prerelease ASP.NET 5. Yes, another unpopular gem!
Not really something that would “teach” you, but think about it. live coding sessions streamed + recorded, on Reddit. Could it get any better?! Could it get any worse?!

In closing…

Send me good resources, please!

You probably didn’t know that Toptal contacted me explicitly last month to include their videos in the newsletter. No affiliation of any kind was there.

I didn’t get anything directly or indirectly from linking to them. I just checked their videos, loved them, and decided that I should have found them on my own earlier! So, I included them in this issue.

If you find any good links (created by others or even by yourself), just email me.

I’ll check them out, and if I find them good for me, they’ll hopefully be useful for other readers of this newsletter as well. So, I’ll include them, and (unless you tell me not to) thank you for sharing awesomeness.

Spread the word, Please, please, PLEASE!

If you did like this newsletter, there are a few things you can show the love. Having an idea that can make even more awesome and emailing it to me is one thing I can’t thank you enough for (same for things that could make it suck less).

Another way to show love is to tell just one friend or colleague about it. Maybe in person, in email, on twitter, or whatever really. The more people reading this, the more responsible I feel about NOT making it suck.

Thank you!

Meligy | |

Meligy’s AngularJS & Web Dev Goodies — Issue7: Goodbye 2014!

Here we go, it’s the last day of the year!

Hi, it’s Meligy from GuruStop.NET, and this is another issue of the AngularJS and web development newsletter.

I wrote this intro several times this month to fit the success of the first ng-sydney usergroup meeting, a company presentation I put online about Angular 2, Christmas holidays and gifts and all, my own dramas with the first MacbookPro I owned ever, and now, well, here it comes, on the last day of the year!

According to my records, there’re 60+ new subscribers to this newsletter since the last issue. Thanks a lot if you shared it with your friends, and if you are one of the new friends, make sure to check the previous issues at

If you are not, this is always your go-to reference in addition to searching your mailbox. And thanks for always being here at this end of the newsletter :)

It has been a few weeks since last issue, so, I’m making it up for you. This issue is going to be long. Let’s jump in quick:


Angular 2.0

Video: My Take on Angular 1.3+ (1.x) and Angular 2.0
In this ~17mins video I share a few ideas about the misconceptions people seem to have about Angular 2.0, and where Angular 1.x is going. You probably read a few of them in previous issues of the newsletter.

AngularJS 2.0 Status and Preview
A pretty nice writeup on the current status of Angular 2`.0 with code. It’s a bit long that the post offers a table of contents!

Angular 1.4

Video: AngularJS 1.4 Planning Meeting

If you are interested in knowing what’s likely to make it to Angular 1.4 and 1.5. 1.4 is likely to make it to ng-conf in late January 2015 BTW! InfoQ wrote an article closely related to this video focusing on what to expect beyond 1.4 for the 1.x in 2015.

Official Angular Blog: Planning Angular 1.4
The team also put a summary of the meeting in this blog post. One thing you want to look at is the “Progress” and “Design Doc” links in there for the real meat of what’s going on.

A couple interesting things about 1.4 are:

  • The router looks like it’ll have an appearance in this release. I personally doubt it’ll be good enough!
  • There’s another round of forms improvements. These are always welcome :)

Learning Angular 1.x Cheat Sheets is the best place for short videos teaching AngularJS. The creator of the site now has posted some cheat sheets targeting some very interesting areas of Angular:

  • AngularJS Core Services (PDF)
  • AngularJS Directive Definition Object (PDF)
  • AngularJS ui-router (PDF)

Creating Custom AngularJS Directives – 7 Part Article
A very detailed primer on creating directives from Dan Wahlin. Dan has popular courses on AngularJS, and more importantly he is the creator of the Angular in 60 minutes video, which I still consider the best intro video for developers new to AngularJS.

Getting Started with Angular and Accessibility
A good introduction to accessibility in AngularjS and the ngAria official AngularJS module.

Videos: “AngularJS Fan” YouTube channel
A very good collection of videos with nifty tips & tricks, They are all very short also like the awesome videos. I found this channel by accident via a video about Isolate-Scope Attribute Expressions Use Dependency-Injection In AngularJS.


An Introduction To Unit Testing In AngularJS Applications
This article takes a good angle at unit testing your application with both theory and code.

3rd Party Modules & Tools

A replacement for default cookies service in AngularJS to take away the limitations of the default cookie implementation.

A good tool whether you need to support custom languages or just add proper pluralization. It takes care of the obvious details like lazy loading and flexibility to replace parts of the library.

A collection of directives and services that seem interesting. You can check their table directive with support for serverside paging/sorting, their range filter for when you need to repeat on a range of numbers not really a list of objects. I saw it mentioned a few times but haven’t played with the code myself yet.

If you ever needed to create something like a constants.js file that had some values that don’t change in the life of the application but change per dev environment (local, test, stage, prod), you might find this useful (provided you use gulp too I guess).

Code To Read – The Web-based Markdown Editor
A very good Markdown editor built with AngularJS on the front and NodeJS ExpressJS on the backend. It offers offline storage support and integration with many cloud storage options (Dropbox, Google Drive, One Drive, Github). You can play with it at but I thought you might be more interested in checking the code ;)

John Papa AngularJS Styleguide
John Papa is another great speaker who is now focusing on AngularJS among other things. He created a very nice styleguide that is worth looking at and deciding for yourself what to agree and what to disagree with.
If you are into validating your coding style, you should also learn about the official angular-hint module.


Should I be learning ES6?
I think the answer is yes. ES 6 is still effectively JavaScript vNext, but it’s good to learn one of the trasncompilers to ES 5 (current JavaScript). However, this link is not about what I think, but what reddit thinks.

CSS And Preprocessors

Introducing Sass-Compatibility
SASS was created on top of Ruby. There are a few popular versions of it out there and there’s a C implementation as well that other platform implementations rely on. The Sass-Compatibility site helps you tell what features are incompatible with what implementation. I haven’t really fallen into this problem before, but I’m very aware it exists and it might be just a matter of time.

The 5 Most Popular Frontend Frameworks of 2014 Compared
I looked here to see if I missed anything, but, TBH it just felt like Bootstrap is the king of this area still, arguably of course.

HTML5 & Web Components

Web components allow you to create independent UI widget that can have their own HTML/CSS/JS includes and have some JS-rich behaviors. While browser support is still poor for web components, the Polymer project provides a great polyfill for current browsers.

Video Playlist: Polymer Tutorial
I was looking for some Polymer tutorials and found this playlist which has several videos with good introductions to the Polymer concepts

Video: Web Components and the Future of CSS
Another introduction video focusing on shadow DOM (DOM that has its own isolated CSS and DOM selection).

No more JS frameworks
The post talks about what feature are making it to standard / native technologies that we have always had to get a JavaScript framework to have, like async loaded HTML templates, JS promises, etc.

The State of HTML5 Gaming
An interesting comparison of the big JavaScript game engines out there.


Node.js Best Practices
It’s not very common to see good best-practices guidance in the NodeJS world, especially for those who don’t write a lot of NodeJS code, so this one is a good gem.

A book about one of the most important and often confusing topics of NodeJS. It’s written as a Markdown file on Github with a build tool to view in browser, a nice way!

Functional Programming

Video: Functional programming design patterns by Scott Wlaschin
My friend @JorgeFioranelli suggested this video as a great one for those interested in the topic in general (He is my go-to person on it).

Having further look I noticed the entire site is a collection of NDC videos. NDC is one of the best in-depth developer conferences I know of, so, you better browse the video listing for topics that may interest you.

Microsoft Technologies


Using AngularJS, ASP.NET MVC, WebAPI and EntityFramework to build NLayered SPA
A detailed code sample that features an interesting boilerplate template builder


Yeoman generators for ASP.NET 5
With official production support for Mac OS & Linux in next version, we get to see crazy things like yo aspnet! Not just that, it has sub-generators that correspond to Visual Studio’s Add-New-Item dialog feature as well: Adding New Items to Your ASP.NET 5 Project with Yeoman Subgenerators.

Video: ASP.NET 5 – What do you need to know
A good introduction to the upcoming version of ASP​.NET, from ALT​.NET Sydney usergroup.

Building future .NET projects is quite pleasant
While several resources focus on development experience in ASP​.NET 5, this article talks about how nice the CI build story is as well (using TeamCity as the build runner as well).

Internet Explorer

It’s still no Chrome for sure, but there’re good things happening with the automatically updating (AKA: ever-green) IE 11. Here’s one:


How To Migrate To HTTPS
Addy Osmani from Chrome team shared this guide for “gradually” migrating to HTTPS. It’s currently an 8 pages WIP document. Definitely worth checking.


Pakt Publishing $5 Ebooks Bazonga
Pakt are having a $5 sale on all their ebooks and videos. It will end very soon so use it quick if you will.

Principles of Distributed Computing (lecture collection)
Looking at what algorithms fit more in a distributed world.

JavaScript Books

Eloquent JavaScript And Other Books
A post on reddit about how good the book Eloquent JavaScript triggered a good discussion of other good JavaScript.

Programming JavaScript Applications
Another good JavaScript book available for read onlineASP​.NET


How to Be an Expert in a Changing World
To quote “When experts are wrong, it’s often because they’re experts on an earlier version of the world”.

How to Send Email Like a Startup
This is more for the engineers who sometimes have to write marketing emails, ones that maintain customer relationship not normal ones like this email or you internal company email. I find it a very good sill to learn these for everyone though.


This is a one off section that will not make a frequent appearance in this newsletter.

In the last newsletter I talked about the new ng-sydney usergroup for AngularJS developers in Sydney. I promised to share a picture from the first meetup. So here it is:

There were about 35+ people attending. We had an open talk session that I was worried could go wrong but people actually loved it that it went beyond time. It was a great night.


A quick mention of the actions I’d love you to do NOW before closing this message (before the end of the year):

  • Send me feedback about YOUR thoughts of the newsletter and how to improve it (just email me or reply to this email) – I promise I’ll take action!

  • And tweet the newsletter to your friends if you are on twitter (or share on Facebook, LinkedIn, G+, you have one of these, don’t you?)


Have a great 2015 everyone :)

What is the significance of ASP​.NET vNext? (Quick 6 points)

The Question:

This is a question I found recently on Quora:

What is the significance of ASP.NET vNext?

I do not have much info on the topic more than watching some relevant TechEd videos, etc, but I managed to provide an answer and thought it might be good material for a quick blog post:

The Answer

Several things:

  • Real cross OS support. Microsoft is testing it even under Mono on Mac OS.

  • Much lighter framework, meaning it’s faster, and can handle more requests per second using the same hardware

  • Highly imporved compilation speed and workflow. Speed is due to compiling in memory not to disk), this ends a real slow productivity killer in large projects, the workflow improves as developers just save a file, refresh the browser and get the changes just like in JavaScript, CSS, etc

  • New codebase, meaning less need to know which defaults you need to change to get the behavior of a version that fixes a bug in a previous version, more testing-friendly APIs, etc

  • Better Node.JS integration, allows ASP .NET developers to easily get access to JS tools available at Bower package manager for example

  • New and clean replacement of MSBUILD (for ASP .NET only), allowing developers to easily write tasks similar to grunt, etc instead of complex and limiting MSBUILD tasks.

More Info

The best resource for ASP.NET vNext is simply – you can also check this video linked from that page:

Visual Studio 14 To Support Grunt, Bower, AND Gulp – Bundling Removed In ASP.NET vNext

Update 3:

Update 2:

Scott Hanselman announced it as well

It also looks like Grunt and Bower are not as far as ASP.NET vNext is, they’re coming quite soon!

Update 1:

Turns out the original bit about supporting Grunt is not breaking news (video). The video is definitely worth watching. It suggests Visual Studio will have special tooling written just for Angular.JS for example, and increase Bootstrap tooling as well.

So, I saw a nice tweet from Mads Kristense (creator of Web Essentials and one of the team working on Visual Studio tooling):

It was about Visual Studio tooling for Node’s packages.json file.

Side Note

If you are interested in the particular plugin in the previous video:


So, I was like:

But then guess what? I got this reply!



I retweeted the tweet, and a smart colleague of mine asked:

The answer was that it’s coming, just after Grunt, as in:

So, yeah, as my friend and colleague Joshua McKinney said:

Then later, as shown in Update 3 of this post:

Thanks a lot, Mads and Microsoft.

Allow Me To Share My Toolset Choices for Developing On .NET

There was a question in a tech facebook group I co-manage about what tools you’d use if starting a new project today.


I don’t know for sure. It depends -of course- is the expected answer. For example, there’s some idea I had I mind I considered using MongoDB or CouchDB for, while still using .NET, and then I wasn’t sure if I go extra mile in DB I’d go for Node or Rails as well or would prefer .NET for my personal productivity. I also often use Node/Bower when checking libraries with many dependencies.

So, for this question, I thought what tools I might use in a company project. Thinking back, I found that most tools I use now are good enough for what they do. So, I thought I’d list these.

These tools are my personal experience though. While some of them are widely adopted in Readify, some others may have been specific to some clients or Readify teams I worked with. Every team is free to choose the tools that work best for them and make it easier to deliver high quality deliverables in sensible time, so, even if you are at Readify, your mileage may vary…

The Tools

Server Side Web


  • SQL Server (or SQL Azure, although I don’t like SQL Azure, because it’s not compatible with some scripts generated from SSMS, which I sometimes use to generate migration scripts)

  • DbUp for DB migrations (there are some other nice options now)

  • Special SQL views + Web API OData + MS Excel for reporting

Client Side Web

  • Angular.JS on the client when I have the choice, Knockout.JS and jQuery UI (being deprecated now) at some big client I keep going back to every few gigs

  • LESS for CSS, or SASS (SCSS) when the CSS is handled by one of our favourite design agencies

  • Chrome devtools for web debugging (obviously), unless it’s IE issue of course.


  • Phonegap (most just the open source part of it, Cordova) and Ratchet CSS framework (considering alternatives, like TopCoat) for mobile development, with Angular.JS

  • Considering Xamarin as their work seems to be VERY cool, and I recently get access to their stuff via my company (OT: Also considering Neo4j DB for similar reasons).

IDEs and Text Editors



Internal Communication

  • Several kinds of wikis used by different clients, often with OneNote

  • HipChat for team communication, sometimes Skype and/or Lync as well

  • AnswerHub (Stackoverflow clone) for internal questions forum where I can safely quote client sensitive information in my question

  • Yammer for internal company social network

How about you?

What tools do you you use when developing?

Let me know in the comments, via email, or on twitter!

Enforcing ASP.NET MVC Conventions With Unit Tests, Or Solving The AJAX HTML Redirect To Login Page Problem

This blog post is about an ASP.NET MVC workaround we implemented in a previous project. We solved the problem by enforcing using a class that extends one of ASP.NET MVC classes, which in itself created another problem, as new developers joining the project may always use the old class. The solution to this problem was not something that I invented, but it’s also not a very common practice.

So, if you are interested, here’s the entire story…

Detecting Session Timeout In AJAX Requests

We wanted to solve a problem where in an AJAX heavy ASP.NET MVC application, if the user triggers an AJAX action after staying inactive for longer than our application timeout, the call to the controller action, which normally gets a JSON response, would instead get the HTML of the login page.

This is a known issue in ASP.NET (particularly System.Web). A feature that’s on by default is returning a redirect to the login page instead of a HTTP Unauthorized Status code (401). After the redirect the response returned is a successful (HTTP Status Code 200) load of the login page. That means even our Angular.JS error interceptors (or jQuery handlers, etc.) don’t notice there was an error.

A fix for this was turning this feature off. We inherited the Authorize attribute as below:

SuppressFormsAuthenticationRedirect is the property that disables the login redirect. Microsoft set it to false by default so that it’s backwards compatible.

ASP.NET MVC doesn’t recognize AJAX requests through Request.IsAjaxRequest() via Accept header or so. It does via checking X-Requested-With header. Most AJAX-capable frameworks like jQuery and others offer a way to intercept all requests and add extra headers, for example, in that app, we configure Angular.JS to include the header with some code similar to this:

Enforcing The Convention

The obvious problem with the previous solution is that we are ignoring The Power Of Defaults. Any other developer who may join the project needs to know that using Authorize is a no-no, and even for old devs (myself included),
it’s very easy to just forget and use Authorize not AuthorizeRedirect just out of habit.

Solving this problem was quite easy though, we added the following test to our Unit Tests project:

I hope the code is self explanatory. We check the web project assembly for all ASP.NET MVC Controllers, then we check the Controllers and all their Action methods for existence of the AuthorizeAttribute. We filter those that use the correct attribute (AuthorizeRedirectAttribute), and we Assert that there are no the no Controllers or action remaining, otherwise, we tell the developer which Controller or Action needs to be fixed, and how to fix it as well.

Room For Improvement

The drawback of this is that our Unit Test project had to reference the ASP.NET MVC assemblies and gets more stuff than most tests should need. We can overcome this by moving our “convention” tests into another project completely, but for this project the conventions were very few and it seemed fine.

Of course the same method can be applied to any other convention you enforce in your project. One obvious example is ensuring all Controllers inherit from a custom base Controller class instead of the ASP.NET MVC class directly. I know people who already do this, as I mentioned in the opening the technique is not new by any means, but it’s worth even more popularity.

Speaking of improvement, the code for this test class was optimized a bit while writing this blog post, there is always room for improvement :)


In case you were reading the code carefully, the IsNullOrEmpty() method I used in assertions is a custom extension method we had in the project, a very simple one as you may expect:

And That’s it!

I hope you found the technique useful if you haven’t used it before, or found the post a good place to reference it to those who didn’t.

What is my opinion about Knockout vs. Angular ?

My Angular.JS video is getting way more traction than I thought, with over 2K views and a lot of comments on Youtube and Facebook. One of the comments on Facebook came today was:

What is your opinion about Knockout VS Angular what is the best !! and thanks for the Good tutorial Mr Mohamed

An interesting question. There is an easy answer that is both technically and politically correct, that goes like: There is no “best”, each has pros and cons. For which one to use, “it depends”.

But I bet this is not good enough for anyone interested in the question, so, I’ll expand a bit here…

A Personal Opinion

“A personal opinion you ask, a personal opinion you get, so, treat it like one, no more”

Mohamed Meligy

Angular.JS does more than binding DOM to JS objects, like routing and enforcing code organization, and connecting to REST server APIs, etc., so, the more accurate comparison is against Durandal.JS, which uses Knockout for DOM binding, Sammy.JS for routing, Breeze.JS for REST data interaction (can be used with Angular), etc.

Knockout is old, and very mature. It was designed to be very easy to plug it into any jQuery plugin or jQuery UI widget. It was also designed to work with all browsers down to IE6. With Durandal.JS you also get the other parts that Knockout itself does not cover. If you are writing an app that depends on very complex “existing” jQuery components that you didn’t write yourself, it may be a better option.

Angular.JS is relatively new. It doesn’t feel like new when you see so many tutorials around and very enthusiast community around it, but it does feel so when you look at things like how the official UI components are in complete refactor/reorganization mode for quite a while. Mind you, they still work nicely though.

Angular.JS does not care as much about legacy browsers. The lowest they support is IE8 and only with DOM/EcmaScript5/JSON shims, and when things don’t work in IE, the whole thing fails with no particular error line to start with.

Having said that, “for me” Angular is the future. I’m not saying that KnockoutJS will die or whatever, it’ll be stupid of me to think so. Angular.JS is very functional as it is now and I used it to save us time in a current project (yes, even with IE support), and along with time and very passionate community (just like Knockout started), it’s expected to get better.

Does this answer the question?

Maybe, and maybe not. I have done quite a bit with KnockoutJS, but not much Durandal.JS, hence this should be taken with a grain of salt. There are several comparisons on the web that go into more detail. I just wanted to write my personal take here so that I can refer to it later when people ask.

Of course, like many opinions, my opinion itself may change as I learn more or as both libraries evolve more.

So, yeah, I highly encourage you. Go ahead and make your own conclusion. Needless to mention, those two libraries are not the only two in their category too ;)