FW Apps Tutorial - Routes and Routing

Routes and Routing is a short unit to teach you about the final aspect of Ember before wrapping it all together in our final unit.

Introduce It!

The Ember Router and Routes are used to navigate from the url in the address to the specific page within the app. Routes are also responsible for preloading the data in the page into the model variable. By now, you have used the model variable and it is always set up to the data you need, but whenever you make a new page, you set this model in the routes.

Please refresh yourself on the brief overview on routes and the router given above at this time. They can be found at Conceptual Introduction - Client - Router and Conceptual Introduction - Client - Routes.

Learn It!

For routing and routes, it is very important that you understand both routes and the router. To get a comprehensive understanding of how these two work together, check out the Ember Guides on Routing. The first three sections of that link are the bread and butter of typical Informatics FW development. The other sections are important, but are used much more infrequently. So if you come across issues dealing with some of the more advanced routing, it may help you to remember where the guides are located. For additional reading, check out Ember API Docs on the Router, and Ember API Docs on Routes.

Feel free to check back at all the above documentation as you move through the assignments to help bring home what you learned about each of the items.

Bring It Home!

Since the routes have all been set up for you already, there is not a lot for you to do this unit. We will have you fix a couple of small things, but your understanding of routes and how they function will be necessary for the Server & More Unit, as this will teach you about serverside and depend on all of your clientside knowledge. So pay attention as you go through these issues, and try to learn as much as you can about Ember routing while you are at it! Because the extent of your knowledge will be tested in the final challenge, this unit will not have a specific challenge, you will just be able to start that final unit sooner!

  1. Issue #1: You know, the books page should really be an admin only page. Admin are the only ones who can edit, add, or delete a book anyway, so the base user should only see the checkout page. This means in the menu bar, “Books” should only appear if the current user is an admin, and the route should only allow someone with an admin role to view the page.

    • Hint: look carefully at the Conceptual Introduction if you don’t know how to do this, it may help you…
    • Hint 2: has-role helper documentation might also help.
    • For testing, you should make sure you have a user with “admin” rights and with “base” rights. Make sure base cannot see or access the Books page

  2. Issue #2: Notice that when the book page is loaded, the “Books” is bolded, showing me which page I am on. It should also do this for the Checkouts page.

  3. Issue #3: Finally, in the help dropdown, there should be a Permissions page, which allows users to see what the levels of permission there is for each role that is defined in Group Control. This should be a subroute of "help" since it is in the help dropdown. Some helpful links will be the Knowledgebase entry on how to design the Permissions Page and also the API docs for the fw-cell-permission-icon.

    • Hint: As you are making the list of Actions think of the different things that users can do for Checkouts and for Books. Logging in as different users with the different roles will help aid you in determining what each role level has access to.

Check It!

Now that you have learned about and practiced with Routes and Routing, please let one of the developer admins know. They will fork the training-developer-routing-fork, so you can see the answers for this unit. Please compare your code and anywhere your code differs more substantially than a variable name, note the differences and understand why that code was written in that way by the lead developer. While yours may not necessarily be “wrong” there may be a better or more “Informatics” way of doing it. Feel free to ask whatever questions you desire about this to any of the Informatics Admin.

After you have sufficiently checked your code, make sure you have pushed all your changes to bitbucket (on the old repository), and then please delete your trad folder, and complete the Install App For Development for the new repository with the answer code. After you have sufficiently downloaded and installed this app, you are ready to continue to the next Unit when you get the go ahead from the developer admin.