Here I'm using SocketStream, AngularJS, Jade, and Twitter Bootstrap. I'm also using ss-angular here, but I'm not doing anything with it (yet) -- although I think it may help in the angular bootstrap process.
Technically, this example is really about composite views / routing with Angular - the other stuff is in there b/c that's what I'm using, but you could rip it out and use something completely different.
This example was based off this blog
SocketStream adheres to the single-page-app manifesto. There are ways to get around it, but it goes against the grain of what the framework wants to be. So, let's say you want to build in navigation, and you want to use Angular (why wouldn't you?). Navigation is a little tricky. You could use client-side partials/templates, and use ng-include directive to swap in a new ngView when your route changes (see $route).
AngularJS only allows one view per module, so the view is all or nothing. What if you want complex composite views. Let's say for example, you want a top level navbar, and then some views in the main pane are split - with the left side providing a submenu. Here's how that can be accomplished...
Here's what the navbar looks like with on the home link http://host/home
Here's the devices link http://host/devices, note that this is a split pane view. The left side is another submenu navigation list.
Here's the tracking link http://host/tracking, not that this is also a split pane view. The left side shares the same submenu list as the devices link.
Finally, here's the alerts linke http://host/alerts, which is similar to the home link in that it takes up the whole content pane.
Note, that you can now add query params to the URL. For example, if you have a list of items in the sidebar, and you select one, that can be tacked onto the url as a query param, and you fire off a request to grab the data for that item. Exercise left for reader...
Hey, github didn't ping me at all about your comments, so I didn't see them until now. I saw John Lindquist's youtube vids. He split them into two videos, one for basic routing with templates, and another that uses
resolve. His solution is similar to many others -- use partials to fill in an area with a template. You can do it withoutngView, and you can do it with server-side templates, or client-side templates -- the latter being more appropriate for a single-page app.The
resolvestuff is just adding async behavior to it to avoid partial blank loads -- I have to say, I don't care for that at all. I'd prefer to load my whole page as fast as possible, and avoid writing code, just to insert a "loading..." progress bar. But either way -- with or without theresolvestuff, the solution is the same: using templates / partials.I still think I prefer this method -- I'm going to spend more time on it today and build out more stuff in my real app. I think this method is a tad more flexible and cleaner from a code organization standpoint -- since I don't have to have these tiny files all over the place with pieces of the view -- I still have one main
app.jadethat shows me everything...and I'm just controlling the hide/show behavior. If you have any other questions -- or if you come across any epiphanies / good ideas, let me know.