So, after a bit of indecisiveness (and a friendly prompt), late last year I decided to give it a crack. I am also writing another post that deals with the guts of converting an AngularJS site to AngularDart, but first I would like to document what I found when getting started with Dart and ServiceStack/ASP.NET server.
A great starting point for getting into to AngularDart is a post 'AngularDart for AngularJS developers' by Victor Savkin.
Dart new comersIn this brief tutorial I'm not going to go over how to setup a Dart application, if you are only just getting into Dart, here is a list of some great resources to get you started.
Angular new comers
If you are new to AngularX, but interested in this workflow and with AngularDart, this StackOverflow answer is a great resource.
There are quite a number of ways of setting this up for a Dart client and a .NET server but all of them involve introducing an additional IDE. My personal choice is WebStorm by Jetbrains if you are running everything with dart2js. WebStorm has some awesome features and is worth trying out. Although, since Webstorm is commercial and not free, I will be using the Dart editor for this example.
First, lets get Visual Studio and our web application ready.
Note: Hopefully in the future, they might include a way to both compile and debug Dart code in Visual Studio, but I wouldn't hold your breath. (At the time of writing, I couldn't find a way to debug Dart code in Visual Studio even though, Dart produces a js.map file, please ping me if you find a way!)
Setting up Visual Studio
This might not be the most ideal setup for everyone, but I've focused on the need to be able to quickly iterate on both the server side (ServiceStack) as well as the client. Thankfully the Dart editor only cares about folder structure, so to make things simple and to let IIS local or express deal with the hosting of all files, we are going to share the folder workspace between Dart and Visual Studio.
One problem you will notice if you are debugging in Dartium, is that '.dart' files are getting 404 errors. You will need to do two things to fix this.
- Add all the .dart files you are using to your Visual Studio project. This means when you publish or go to debug, they are copied along with the rest of the application. For good measure, also set 'Copy Always' on the file.
- Get IIS to recognise the MIME type of the '.dart' files to allow them to be accessed via the web server. Here is some config which should do the trick.
Setting up Dart EditorNow that your Dart client files are shared with Visual Studio, you are going to want to test them in Dartium.
You'll need to add the directory of your ASP.NET project as a Dart project in the Dart Editor.
You'll then want to add a 'Launch' configuration from the Dart Editor which points at the local URL of your ASP.NET services. Also, the source location should match your correct Dart project for the client you want.
Now, we have VS debugging and we run our new Dart Runtime configuration and...
Awesome, debugging native Dart with a ASP.NET backing! This technique should also work for any ASP.NET hosted data source, Web API, SignalR, WCF (Please no), but if you are working with .NET and building web services I highly recommend checking out ServiceStack.
Now, there is obviously a lot more detail into getting an existing AngularJS website ported across to AngularDart. It is also worth noting that AnuglarDart is under heavy development (which is awesome), so some things might be missing or changing. I will be continuing to learn more of AngularDart and Dart in general as so far I am loving the development community and tools they building. If you haven't already, go grab their tools and get started! :)