This is a series where I will be talking about building a flexible layout with angularjs and ui-router.
In this first part, I will be giving some back-story, basics of ui-router and planning the layout.
building an interactive UI
I decided to take the dive and pick up Angular.js.
After rebuilding the API and setting up some controllers and views, I wanted nested views. The reason being that I wanted to show a list of items alongside a detail view of the item side by side. Natan found ui-router.
planning the layout
The layout I wanted was a top navbar, sidebar, announcements pane, main pane, and details pane.
To understand this layout, there are a few situations to know about and what they would show. The navbar would always we shown and the sidebar would almost always be shown.
- the dashboard: navbar, sidebar, announcements and the main pane. The details pane would be shown when clicking on something in the main pane and also hide the announcements pane.
- listing page: show a table in the main pane, announcements and details would not be shown. When clicking on a row in the table, the details pane would be shown.
brief intro to ui-router
UI-Router is a routing framework and uses
$stateProvider as an alternative to using
$routeProvider to map urls to controllers and templates. Instead of routes, ui-router uses states which are identified by a state name.
Here is a simple example of using ui-router.
You can see that it defines things very similar to
In your main html template you would put
<div ui-view></div> and when visiting
/dashboard, the DashboardCtrl will execute and render
dashboard.html inside of the ui-view.
Based on this simple example, you might be wondering how this is an advantage. The real power of ui-router comes from its ability to allow for child states. Here is an example of how a child state is used:
then inside of the
dashboard.html template you would put a link to this state using the
ui-sref attribute and make sure there is a
ui-view inside also, since that is where the child view will be rendered!
The full path for the
dashboard.child state becomes
/dashboard/child since it inherits the prefix path from its parent, the
Now when you visit
/dashboard and click
show the child view, the url will change to
/dashboard/child and render the
dashboard.child.html inside of
Read more about ui-view nested states from the ui-router wiki.
thinking about implementation
Thinking about ui-router and the layout I desired, I had a hard time trying to figure out a way to represent this in a reusable way for multiple states and how to manage the states of each of the panes. In the next part I will go through some of the methods I tried and what I ended up settling on.
Leave any comments or suggestions about what you would like to know more about below