[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.html), and then parametrise the URLs so there is a separate page for each city.
app.js, and one example view and controller,
And here’s some notes on each one.
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.