Friday Links 0.0.18 - Angular 2

This is based on an email I send my .NET team at work

Happy Friday,

I’ve been playing with angular 2 this week and I think I like it. Angular 2 apps are structured a good bit differently than Angular 1.x, but I’m finding it to be pretty flexible and easy to use once you get it up and running.

Typescript

Typescript is a huge improvement over plain javascript. The typescript compiler catches all my typos and warns me when I try to access properties that don’t exist, or if I forget to copy a property to a DTO. With Visual Studio Code, I get red squiggles under my errors instead of “undefined is not a function” in my console.

Error Messages

The new error messages are incredible. In angular 1.x if you typoed a directive name in the template, it would just silently not work. Angular 2 throws an enormous red block into the console saying stuff like, “couldn’t understand the foo directive. Make sure you declare it in the module”. This really helped me get over the beginners learning curve.

Simpler Concepts

I’m finding most of its concepts to be less confusing. In 1.x I never knew if I should use a factory, or a service, or what the cryptic annotations were for directives. These concepts are more consistent and straightforward in Angular 2. Factories don’t appear to even be a thing, and you write all your components, services, etc as typescript classes. It feels very natural for a C# developer.

Tour of Heroes Tutorial

https://angular.io/docs/ts/latest/tutorial/

This is the official tutorial for angular 2. It’s a nice introduction to most of the concepts you would need in a typical app. It walks you through setting up the initial project structure, how to use components, services, routing, and HTTP. If you’re looking for a quick introduction to angular 2, a few hours spent here would be beneficial.

Rewrite Rules for SPA Apps

http://stackoverflow.com/a/26152011/50038

Technically this was written for angular 1.x, but it applies equally to angular 2 or react or ember or any other front end framework you might use. If that framework uses client side routing, when users navigate through the app, the framework uses the browser history api to change the URL without causing a full page refresh. So they might navigate from /products/ to /product/123 and never contact the server except for some JSON data.

But if the user then bookmarks the URL or sends the link to a friend, the server will need to know that since the app is using client side routing, it needs to return the same standard HTML shell for all pages, and let the client side router handle loading the right page.

This can be accomplished in IIS with a server side URL rewrite to the main index page. You basically intercept all requests and just pretend they were really for / instead of /products/ or whatever.

There’s some edge cases, though. You don’t want to rewrite requests for files on disk like CSS and JS assets, and if you have a AJAX API, you don’t want to rewrite that.

This StackOverflow answer has the magic web.config incantation to accomplish that feat.