current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote -1 down vote favorite

I decided to use angular-ui-router as opposed to ng-route, due to the stateful routing support.

However, I'm a little puzzled on how to lay out and store my application components in a way that makes sense. Any ideas or examples that may help me out?

Note: I'm using a component-based approach for my structure now. Which means, I've got e.g. "./components/ObjectSidebar". But I'm also very interested in imposing an 'overall application structure' consisting of 'HeaderController', 'MainPageController, FooterController, etc. Would I just include these components all within the same page? How would I structure my application in order to modularize all of the components under 'MainPageController' (which could then include my other components, such as 'ObjectSidebar', so on so forth.

share|improve this question
    
What have you tried and what resources have you found? – Chuck Vose Feb 26 '15 at 3:19
    
Thanks for the response. I'm currently grouping the controllers in a component-based fashion. E.g. ObjectSidebar or ObjectEditView or whatever. But I'm kind of torn, because I also want to have a higher-level controller structure, that would resemble high-level page components, so that I could create a dynamic header, footer, etc. With that said, I'm not particularly sure how to lay out folders/namespaces in a modular, practical fashion – NewToMS Feb 27 '15 at 19:47
up vote 2 down vote accepted

Here's something I wrote a while back that may make a good starting point (or a good conversation starter) around how you could layout a UI Router app with permissions: https://gist.github.com/bvaughn/90343c06467e9bcb8d27

If you'd like to chat further (or have questions about the Gist) feel free to reply. :)

share|improve this answer
    
Thanks. That stuff looks very helpful and is well-detailed. Where would I put the $rootScope code which guards against manual URL entry? Would that just be in my application module? Also, I just replied to the guy above if you want to see more of what I'm confused about – NewToMS Feb 27 '15 at 19:50
    
No probelm. I hope it helps you. :) I'd probably put the $rootScope snippet in the main run block for your module. You may actually want to check out some of Todd Motto's Angular best-practices guides if you're asking more high-level questions. github.com/toddmotto/angularjs-styleguide – brianvaughn Feb 27 '15 at 19:58
    
Does it make practical sense to have high-level page modularization? E.g. for a chat app: 'home' 'chats' 'settings' where each page loads a general controller that contains the overlaying structure for the pieces inside? – NewToMS Feb 28 '15 at 18:25
    
I think that sort of thing is case-by-case. I can imagine an application where that would make sense. – brianvaughn Feb 28 '15 at 18:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.