Zyring Day 11 – UI controls for my pages

[Note: These are more in-depth (read: tedious) write-ups of my experience with each section of the Zyring project, leading on from my intro post on Zyring. This is mostly for my own benefit but could conceivably be of use to someone doing the project.]

Add a pager UI elements

Oddly phrased title, but this tutorial involves adding some UI controls for the pagination I did in the last tutorial – the usual “Previous | 1 | 2 | 3 | Next” type stuff. This can be done through an external library, Angular UI Bootstrap, which I install through bower.

That goes ok, but then I forget to add the dependency to my app.js file and don’t figure out what the problem is for ages… I can see this becoming a theme. Even after this I get some errors, and discover I’ve loaded the wrong version of the library through bower: I need to install ‘angular-bootstrap’ rather than ui.bootstrap.

Once again, Stack Overflow comes to the rescue. After this, I have a nice bar of page numbers to click on:

UI element for changing pages

UI element for changing pages

Of course, it doesn’t actually do anything, yet, but it looks like that’ll be the next tutorial…


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s