WingNews logo WingNews GitHub [2]
top | item 6429010

A post-mortem on my first AngularJS project

81 points| JohnMunsch | 12 years ago |johnmunsch.com

If you're tired of To-Do lists and Twitter feed examples for AngularJS I can offer a variation. This is a project I did for a t-shirt site and it does quotes using a variety of variables in real time as the user interacts with the UI. I also show how I went back to the existing project to learn how to add unit testing with Karma and Jasmine and a unit testing coverage report with Istanbul. Spoiler: It was pretty easy.

20 comments

order
[+] jarnix|12 years ago|reply
Post mortem means that your project is dead...
[+] JohnMunsch|12 years ago|reply
That project is finished. The other fellow has some PHP work to do to wire up my work, but I will probably not return to it myself unless he needs something else.
[+] crusso|12 years ago|reply
Only if you didn't understand conventional use of the term. Since no one really speaks Latin anymore, the conventional use of the term is all that matters.

If a speaker uses a term and the audience understands it, whipping out your Latin dictionary is pointlessly pedantic.

[+] envex|12 years ago|reply
Couldn't it also be an explanation after something has happened?
[+] mdkess|12 years ago|reply
Nice writeup, I especially appreciate the focus on testing. End product looks really slick. You might want to add a screenshot and a link to the blog post in the GitHub repo that you posted.

One thing that I think could be improved is the layout of your code. Right now you have a single controller that handles everything. For example, selecting a shirt color should be a directive, and so should the quantity picker. Then use the $scope.$emit and $scope.$on to hook events together. This way, if I make a better color picker (although yours is pretty stylish), I can swap out yours for mine so long as I emit the same events as yours.

This would also make it easier to add new directives - for example, maybe I could choose a decal on the front and back of shirts, or jersey numbers or something. So I think that the controllers in this case should be pretty minimal, and just provide a scope to tie the various directives together.

Anyway, just a thought. Thanks for sharing this and the included GitHub repo.

[+] JohnMunsch|12 years ago|reply
You bring up two really good points there. I will add a screenshot to the Github repo and there is an opportunity to use a directive for the color picker.

I'm not sure about the quantity picker though, what's that going to look like in the HTML? One element in the code gives you all of the quantity fields?

My use of directives to date has been rather limited so I look forward to exploring that more in some upcoming work.

[+] welder|12 years ago|reply
I was hoping this would cover:

1. Angular.js vs Backbone.js from experience of their differences

2. Angular.js with Require.js (I already know about Backbone.js AMD architecture)

Has anyone done a large project in both Backbone.js and Angular.js?

[+] JohnMunsch|12 years ago|reply
I have done a large Backbone.js project for my last employer. I was on that for about 18 months. I have not done a project with both Backbone.js and AngularJS in the same project. I know some people do that but I truly cannot think of anything Backbone.js brings to that party.

As for Backbone.js by itself... It's OK, I liked it but we had a large project with as many has half a dozen people working on it at its peak and the problem we got into was all of the huge gaps in Backbone.js that you typically fill with other software (two-way binding, validation, templating, AMD, etc.) and if you don't figure out your solutions for all of those gaps before you start every developer in the group ends up filling it his or her own way. Especially if you're under a time crunch and writing really fast.

We ended up with a working project at the end and it was way faster than their old solution but it was a chimera. Every part of it appeared to be a different animal. With AngularJS a lot more of those parts are part of the framework itself and there's less room for that kind of problem. I'm using it for large project work now and liking it a great deal more.

[+] contingencies|12 years ago|reply
No, but I'm also interested in this. I've been looking at Ember.js / Backbone.js / Angular.js for a new cross-platform mobile project and leaning towards Angular.