Angular.js & Firebase

I was trying to build a little one page app to be able to manage releases in my company. The idea is just to have an app where you can request a release and then the request is queued and all release request are displayed as a list. When you are at the top of the list you do the release and afterwards you can mark your release as done and it will be moved to a second list where it is displayed as done. The decision was to use angular.js as Javascript framework, firebase as data store and AngularFire as library to connect both. In the beginning it was quite hard because the tutorials out there normally do the binding to firebase directly in the controller and I wanted to have it as a model in a firebase service. Additionally updating subelements in a list and having on the other side two lists really was challenging. The third main thing was updating elements when they are moved on top of the list was quite hard. Anyway finally I made it working and of course I want to show some code snippets to you to make it perhaps easier for you to use this cool stuff. Of course I tried to shorten the code a bit to make the example readable. If there are any questions do not hesitate to ask. The service

The controller

The template

 

GD Star Rating
loading...

Testing with angular, Karma and Webstorm

So, probably my last post for this year. I’m back to Javascript and agular. 😉 Any book about angular.js tells that testing is super easy. And of course I also believe in the tale of TDD or at least in writing some tests 😉

So I tried to set up an working test environment within my IDE: Webstorm 7.

So a good points to start are a blog article about karma testing in webstorm 7 and of course the jetbrains confluence page.

My main problem was to set up a working karma config file and get the right order of includes to be able to test my application even with angular from CDN.

So my karma.conf.js finally looked like this.

Next step is to right a test for your angular app. This should give you a little impression how it might work. For me it was not that easy understandable how to load modules and how to inject the stuff.

For me next steps are to test controllers and do testing with more dependent components. But at least my service layer can be tested in such manner easily.

So finally I wish everbody a happy new year!

GD Star Rating
loading...

Angularjs – controller, services & promises

As promised this time I will write something about the usage of controllers together with services and of course also promises.

Sources are available here: angular-example – 01

Generally spoken it’s quite easy. The only thing that has to be kept in mind that all service calls are asynchronous. So imho the best way is to have very simple services that return the result and let the controller handle both events (see P1Controller).

Service method:

Controller:

Additionally I would like to introduce to utilities I really like: the semaphore and the status object (both are found in utility module).

I use the semaphore to check if there is already a service call running at the moment:

Normally also a controller has a status. Mostly this is some undefined status, success and error. Therefore I built an object called status.

This makes it really easy in the frontend partial to control and display stuff like error or success messages:

I experienced very often that there is a need of e.g. doing filtering of the data so that a controller doesn’t need all the data that a service is returning or some calculation or enrichment of the data has to be done. Then in my experience it is very good to do the transformation in the service and return a promise/future to the controller (as in P2Controller).

Service method:

Controller:

So, I hope that clarifies some things.

Next time I will turn to directives and how to use them for form field validation. But this will take some time because I’m on holiday. Anyway have a nice weekend!

GD Star Rating
loading...