C# Web API 2 and AngularJS

angularIt has been almost a year that I have not posted anything to the blog so thanks to those life coach blog articles about “how to overcome laziness”! I have read bunch of them and then decided to write this out finally.

Anyway lets talk about web api 2, first of all this project was a weekend project and It is a very good example in order to learn web api 2 and basics of angular.

What does that project do? Basically I tried to create a micro accounting app has an stock support where the app user can perform Create/Read/Update/Delete (CRUD) operations for suppliers, products and link products to suppliers. After suppliers and products are created, app user can perform CRUD operations for purchase orders and link it with the suppliers but on the other hand there are customers which the app user can create sales orders  for them. So stock will be the difference of those purchase and sales orders for the products.

On the back-end since it is a .net MVC project;
My models are

  • Supplier
  • Product
  • PurchaseOrder
  • PurchaseOrderLine
  • User
  • SalesOrder
  • SalesOrderLine

I think the name of models are very clear. After creating the models I also tried to implement Repository Pattern for this project so I will not need to deal with different database types. There is good explanation at MSDN about the repository pattern :

” For example, if a client calls a catalog repository to retrieve some product data, it only needs to use the catalog repository interface. For example, the client does not need to know if the product information is retrieved with SQL queries to a database or Collaborative Application Markup Language (CAML) queries to a SharePoint list. Isolating these types of dependencies provides flexibility to evolve implementations. “

I did not want to engage with database in this project so I used List data type for seeding some test data into my project. You can see them in the TestDataHelper.cs file.

For the Repository pattern first of all I have created an interface that describes what my SupplierRepository class will do:

And then I implemented that Repository interface in the actual SupplierRepository class. As you will see below I load the table content in the constructor and do all the dirty stuff here for the data layer.

After doing so it comes to the controller. Under the controller folder there is only HomeController which extends the actual Controller class because I used that homecontroller for only calling appropriate view in the front-end but of course that could have done with a better way with separating each controller on its own.

The other controllers are only extends the APIController which lets us handle HTTP calls and create the logic. On the controller layer we have nothing left to do with domain model layer. It is time to create our app’s logic. Controllers initialize a SupplierRepository instance as a private variable in order to has the abilities of its repository class.

Well I think it is enough for the back-end lets talk about how things go on the front-end.

I used Bootstrap for the designing the interface and AngularJs 1.5.5 for performing CRUD operations on the API. It is easy to install these packages with nuGet. You can install them with

As I mentioned above in the HomeController I send all the actions to related view. So you can see my View files under the ~/Views/Home directory.  On the index you will see some buttons with the api’s endpoints you can reach the raw json data from here. I did not setup any authentication method because this is test project but you can reach a good tutorial of securing the web api from here you can also find a lot of tutorial on the google about securing the web api.

So lets continue with the angularJS you can see my angularJS controllers under ~/scripts/app folder. I have created the module, controller and the factory to use http service in angular. As you can see below we must initialize the Angular on the page with ng-app and then we need to specify our angular controller in the ng-controller attribute and then we can use angular freely in that code blocks.

AngularJS is very easy to write and understand. Its modular structure makes you write good code. Let’s see some example for the suppliers page controller for example.

On the controller side $scope represents our view’s attached page. We can add functions into scope to use for the actions. On the factory layer we isolated the api call’s from the logic. It uses the $http service of AngularJS in order to making calls to api back-end. You can find detailed AngularJS service here.

Screen shot of web api front-end

Screen shot of web api front-end

If you want to check out the code and run the application then you can find the code here on github. Feel free to contribute.
https://github.com/unicod3/WebApiExcercise

I also deployed the project on the free tier of azure server. I do not know how long it will last but the link to reach the project is below :
http://webapiexcercise.azurewebsites.net/

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *