Building a flexible layout using AngularJS and UI-Router: Part 1

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

An app that I have been working on called Fit Entry has been using minimal javascript to create user interactions on the client-side. It started off as simple jquery snippets and then brought in backbone.js which provided a Models and Collections which were useful in interacting with the API. This worked great with the initial simple interactions, but I wanted to build better workflows and nicer interactions for users and backbone really didn’t allow the ease to develop such interactions.

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 $routeProvider.

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 dashboard state.

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 dashboard.html's ui-view.

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

PDX

Hello, everybody.

I am now a resident (and homeowner) in Portland, OR!

Tagged: life portland
Nickel City Ruby Conference →

Ruby Conference in Buffalo

Come on over to Buffalo, NY for our first Western New York ruby conference!

I have been working with several others in the WNY Ruby community to bring this conference together and it’s finally coming!

We have several great keynoters: Jeff Casimir, Sara Chipps, Zach Holman and Neal Sales-Griffin and a range of interesting speakers and topics!

There are also two events surrounding the conference.

Ignite Buffalo

"Ignite Buffalo is a rousing evening of food, drink and 5 minute lightning talks"

http://ignitebuffalo.com/

Code Retreat

There is also a Code Retreat (you’ll learn a lot from this, I know from attending one a year ago) workshop that will have you pairing and doing code katas. You will learn lots from working under different constraints. This is definitely for all levels.

NYC Bus

There is a bus specially arranged by Ruby Central from NYC to Buffalo, NY.

Help others attend

If you want to sponsor a student to attend, contact nickelctyruby@gmail.com.

Info

Find more information about the conference, speakers, events and register on the website nickelcityruby.com.

Rails Workshop Reflection

It’s been a week now since leading my first workshop Introduction to Ruby on Rails with Girl Develop It Buffalo and I have had some time to reflect on it.

workshop preperations

Install fest went well. I had students install vritualbox and use Vagrant to boot a ubuntu vm I had already set up. I wanted all students to work under the exact same environments. I had some issues with getting it all set up on windows, but besides that I think it went well.

It worked well for the class, but it might have been useful to have a dev environment outside of a vm ready on their computers for after the class.

8-hours is not a lot of time

When putting together the curriculum I was nervous, wondering if I had enough material to fill the time.

As someone who has been working with a technology, it is easy to forget many aspects. Steps become embedded as habits and fade out of the foreground.

Scaffolds

While experienced rails developers cringe at the thought of using the scaffold generator, it’s a huge time saver when teaching. Generating a model, migration, views, controller and actions with basic CRUD is super useful.

Once the first scaffold is generated, it also makes a great way to explain the process of a request coming into a rails app without breaking the explanation while building the different parts.

Explain, Show, Do.

During the class, I would explain one topic such as adding a route, had each person follow along, then having them do the same with a different resource.

I like this process, but I would probably have split things up differently. I think it might have been better to:

  1. explain and show - Go through the topic while students them, then show it in use
  2. do - after a few related topics have gone through explain & show, have students use what they learned collectively. This would raise signals in what topics needed more attention

I enjoyed teaching the workshop and hope the students got something useful from it. I enjoy enabling others. Maybe I’ll do something simlar in the future.

Introduction to Ruby on Rails Workshop in Buffalo

In preparation for Nickel City Ruby Conference, I will be teaching a workshop with Girl Deveop It Buffalo. The workshop will be an Introduction to Ruby on Rails.

What to expect

This workshop will be hands-on walkthrough on getting started with web development using Ruby on Rails.

You will learn:

  • the Ruby on Rails framework
  • development workflow with Rails
  • working with third-party libraries (rubygems)
  • building an application with users
  • basics of deploying an application

Who can attend? Do I need to know how to program?

While the event is held under Girl Develop It, anyone can attend!

You don’t need to know how to program, you just need to be motivated to learn. This is about building something.

You will learn through doing and learn how to use the many resources to effectively learn more.

Install Fest

We will be holding an Install Fest the night before the workshop ( Friday, August 23rd, 2013 – 6:00pm-9:00pm) at the Buffalo Engine Yard office to help get a development environment set up so that everything is ready for the workshop.

Schedule

The workshop is split into two sessions.

Both sessions will be at Engine Yard’s Buffalo office.

  • Friday, August 23rd, 2013 6:00pm - 9:00pm
  • Saturday and Sunday August 24-25, 2013 12pm - 4pm

Register

Register at the Meetup page.

Cost

The workshop is $80 for two 4-hour sessions

Girl Develop It has a great article on How to ask your employer for reimbursement

Hope to see you there and don’t forget to register for Nickel City Ruby conference!