OK, to the client part. This is going to be a long post…
Word of advice – install Web Essentials extension in Visual Studio – this compiles a typescript (.ts) file into a js on save, and opens a 2nd windows so that you can see right away the generated js code.. it helps.
To get a static typing for angular (and sugar.js) I’ve used type definitions taken from here. There are others available, but these work pretty well, and have decent documentation (even though they need some fixin.. but more on this later).
This is how the result looks.
Done with Twitter Bootstrap. Didn’t really bother making it pretty, that’s not the point.
I have an index file, serving as a container, and 3 views – for products, categories, and stores.
So here we have a list of products, a list of categories, a set of buttons, 2 filters, and a popup message. Pretty basic.
Categories tab looks pretty much the same.
On this screen I want to be able to do the whole CRUD, I want the buttons to be disabled until it makes sense to enable them (that is user entered proper data), and I want the popup message, telling me if operation succeeded or failed.
So on the client side I have an interface for angular $scope, controller, service, and a product model. I’m also using category model, and a directive to display the operation result messages.
Scope interface.
This is basically just a definition of properties/methods I will have there.. well, it’s an interface. This serves no other purpose but to have static checking – that is this interface itself is not reflected in resulted JS file in any way.
The actual implementation will happen in controller.
Ugh, that’s a long listing.
So here I’m setting up a scope variables and methods, adding a watch to change a Create/Update button’s text, and otherwise it’s mostly calls to the service.
Things to keep in mind:
1. This is big. TypeScript compiles to JavaScript. The static typing is compile-time only, it is not enforced at run time. This is not a C#. Even if you’re saying that your function takes a parameter with type of MyClass, it will not be enforced at run time – your function can be called with no parameters, or wrong parameters.. Well, usual JS stuff.
2. For reason above the naming conventions of angular are still applied – don’t expect to set a scope variable to ng.IScope, and expect it to work – it still have to be named $scope.
OK, I think I’ll make another post here, it’s getting too long.