birmingham.io

BrumIT - like Reddit, but for Birmingham

OK, so this isn’t actually a real thing, but rather the result of a tutorial on using Angular and Firebase to build a real time Reddit clone:

https://brumit.firebaseapp.com/

There is absolutely no deviation from the tutorial here (apart from a couple of minor fixes to bugs in the source), and is somewhat feature poor, but the basics are here and they work. If you wanted to submit some of your own links (you’ll need to register first) feel free, but I doubt anything will happen with them.

For any that are interested, here is my source code.

EDIT: and now it’s not working :frowning:.

The error I’m getting (which you can see at the above URL in the console) is Error: [$injector:unpr] Unknown provider: aProvider <- a, which I think has something to do with the minification, but I don’t know. Anyone got any ideas?

EDIT 2: I’ve literally changed nothing, built it another time and deployed it, and now it’s working again. :confounded:

Doesn’t seem to work for me, on Ubuntu/Firefox:

Error: [$injector:unpr] Unknown provider: aProvider <- a
http://errors.angularjs.org/1.2.16/$injector/unpr?p0=aProvider%20%3C-%20a
d/<@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:3:20905
Ia/s.$injector<@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:4:5042
c@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:4:4307
Ia/w.$injector<@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:4:5135
c@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:4:4307
d@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:4:4592
m/</<@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:7:18470
f@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:3:21338
m/<@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:7:18416
Bb/h/g.promise.then/k@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:5:6118
Bb/h/g.promise.then/k@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:5:6118
Bb/i/<.then/<@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:5:6804
Db/this.$get</k.prototype.$eval@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:5:11867
Db/this.$get</k.prototype.$digest@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:5:10393
Db/this.$get</k.prototype.$apply@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:5:12188
qb/this.$get</<@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:5:565
_.event.dispatch@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:2:14488
_.event.add/q.handle@https://brumit.firebaseapp.com/scripts/vendor.a648cbed.js:2:11298

I really do need to learn a frontend JS framework. Unfortunately it has to get in the queue after Laravel, Node, Docker, Ansible and PHP generators (and probably a bunch of things I can’t remember). Bah!

The error’s because you minified your code.

In your source code, you probably had this:

function something(someDependency) {}

but minified, that’s

function something(a) {}

and angular doesn’t know what a is.

Instead, use the minification-friendly notation and wrap that function in an array like so:

['someDependency', function (someDependency) {}]

This way when it’s compiled, the param name will still be a but angular will know what the dependency is from the string.

You can pass that array anywhere angular expects a function with Dependency Injection.

3 Likes

Was about to say: minifying angular code breaks dependency injection, but Jack has explained it excellently. Use the minifying-friendly declarations. Also, don’t minify unless you actually need to, and if you need to, provide source maps. :slight_smile:

2 Likes

I’m so very new at this JavaScript framework gig that I’m pretty reliant upon whatever various tutorials tell me, and this one just doesn’t cover things like source maps and the like. I suppose this is my opportunity to go off and learn about them myself.

What I’d be really interested in are some tutorials which cover TDD in JavaScript.

I advise not minifying, unless real world usage shows that you’ll get a large benefit from doing so which outweighs the harm you do to the commons. Which isn’t the case for a tutorial :slight_smile:

https://nicolas.perriault.net/code/2013/testing-frontend-javascript-code-using-mocha-chai-and-sinon/ looks to summarise mocha (which is what I use) quite well.

1 Like

I’ve returned to this because I want to make some improvements and try to use it as a launchpad to teach myself some of the more advanced features of Angular by seeing if I’m able to complete the optional tasks in the tutorial.

So the first thing I did was try fixing the dependency injection minification thing described by @jackweirdy - which you can see here - only I thinking I did something wrong as I’ve still got the same error as before.

Taking a deeper look, the homepage seems to work fine, but as soon as you enter either the Login or Register pages, it falls over, so whatever the problem is, it’s related to this in some way, but I can’t figure out what.

Can anyone take a look and help me out please? Thanks.

PS, again, this works fine unminimised. I know I could probably keep it unminimised, as has been suggested, but minification seems to be something which a lot of people do, so it’s worth arming myself against problems like this in the future by learning how to solve these problems now.

UPDATE: I’ve fixed it thanks to this little hack. I’ve also made this change, which didn’t break it, but I’m not sure if it’s required or not.

Proudly sponsored by Bytemark