Zyring Day 4 – fun with routing

[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.]

Today’s tutorial successfully unconfused me on a variety of things. It took me ages to figure out, but I was happy when I got there and finally started to understand some basic things about Angular. The key for me was the ‘How do views get displayed in Angular?’ part of the help documentation, which gives more of a high-level overview of what’s going on.

The idea for this tutorial is to be able to click on each city and go to someĀ information for it. However, AngularJS is a single page application framework which loads a single HTML page once. So when we navigate to, say, the Seattle page, instead of loading a completely new page we just swap to another view. Also, there’s no need to have a separate view and controller for each city – we want to make generic ones (which I called cities.js and cities.html), and then parametrise the URLs so there is a separate page for each city.

At this point I was starting to lose track of how all these javascript and html files related to other, so I decided to draw some pictures. Here’s the file tree with all the bits I’ve been using so far included. There’s index.html, app.js, and one example view and controller, example.html and example.js.

File tree with an example view and controller.

File tree with an example view and controller.

And here’s some notes on each one.

File tree again with notes on each file added

File tree again with notes on each file added

I haven’t added anything on parametrising URLs yet, may put up a further picture at some point when I understand it better.

Now I had the diagrams, it was easier to keep in my head what was what. First I had to edit app.js to route to the page for each city using the parametrised URLs. My next task was to retrieve the city name stored in $routeParams and display it in the HTML view as the title for the page (instead of my previous standby, ‘BANANAS!!!’). This caused me a load more confusion but I got there in the end.

At this point I found this tutorial on routing helpful (the one linked to in the Zyring documentation was a video tutorial, which I never get on with, and also required you to sign up to something).

After I succeeded with all this I was feeling pretty pleased with myself given my complete lack of familiarity with Angular.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s