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.