In my recent post I presented few form templates which was full of duplicate codes. In this post, I will show you how to harness the power of AngularJS Directives to create small reusable code snippets that share common behaviors and avoid duplication. AngularJS Directives probably the most complicated thing in the whole angular framework, there are quite a few things that you need to understand like compiling, linking, nested scoping, transclusion etc.. in order to master it. But in the case, we are going to create few basic directives which does not require an angular expert to understand it. But before it, lets see the original version of the markup where it was full of duplication:
In the last post, we have completed the category management, in this post I will show you how account list is implemented. The account management will be typical CRUD screens, where the accounts will be shown in a html table and each row will have links to edit and delete individual account, there will be separate screens to edit and create account. Lets list the features in a bit more details:
Lately I started to dig around AngularJS framework, one of the thing that I often found helpful is to port an existing codebase to the new thing that I am trying to learn, so I decided to create an AngularJS version of my Backbone.js StarterKit. I have been working with Backbone/Spine for more than a year and I am well familiar with the basic building blocks of these client side mv-* frameworks, but there are certain features of AngularJS that I really like, to name few the composition over inheritance (no need to inherit from special framework class), dependency injection and testability. The other important feature is creating extension of html vocabulary known as
directive, I am still investigating the Angular source to fully understand it, so it is too early for me to comment on this, but having worked with many years in asp.net webforms which as well abstracts the html generation, I can say there are obviously some concerns. Nevertheless, AngularJS is a powerful framework for building rich client side applications and does worth looking into it.
In the previous post, we have seen the UIs and its functionalities, in this post we will see how the category list is implemented. Typically CRUD UIs are presented in html tables to list the records and separate screens for adding and editing individual record, but in this case the category has only two attributes the title and the type(expense or income) so instead of creating multiple screens we will be using the same list view to add, edit and delete the categories. Lets recap the functionalities of category list:
This is a first part of a multi-part series article where I will show you how to create a relatively simple CRUD Application with Backbone.js. The Application is a personal finance application where the user will be able to create multi-currency accounts and should be able to track expenses and incomes. The application is created with the Backbone.js Starter Kit of my previous post and the full source code is hosted on GitHub.
In the last post, we have used Html5 local storage for persistence, in this post we are going to integrate it with ASP.NET MVC. Before moving forward, let me tell you that frameworks like backbone.js and spine.js expects your server endpoints are RESTful and do utilize the http verbs, for example the same endpoint can perform different things based upon the http verb. Unlike Rails, the default Controller and routes that ASP.NET MVC generates does not have those features. So we need to tweak the ASP.NET MVC to improve its “RESTful-ness”. In case, if you are wondering about the url structures, here is the list of defaults of ASP.NET MVC: