5 ms·

Anyone got a post on how to structure big angular apps ? i've been struggling a bit with menu bars : it seems to me that you can't prevent copy/pasting the men

by bsaul 13y ago

Anyone got a post on how to structure big angular apps ? i've been struggling a bit with menu bars : it seems to me that you can't prevent copy/pasting the menu bars on each of your screens if you want to keep meaningfull URLs (as the routing component only maps a url to a single controller).

davej 13y ago
It's difficult to know for sure without seeing exactly what you're trying to do but perhaps a directive is what you want? If you're looking for general app structure tips then the Angular generator for Yeoman is a good place to start.
diggan 13y ago
Use common sense. First step, having the files in one folder. Everything mixed up. You move into a structure of seperating services from directives, controllers from filters and so on. But the way most people seems to be doing it (the Angular way™) when it comes to the bigger applications is by splitting it up by functionality/modules. So you have a forum and therefore probably at least 3 different modules, "thread", "user" and "forum" or something similar. Just follow the MVC pattern with whatever filestructure that works with you and your team. Copy/pasting the menu bars? For that, I would have a directive which controls the display of the menu and acting accordingly. Only when declaration is needed and it's reusable. I don't understand your point about meaningful urls though, they are as meaningful as you make them.
- bsaul 13y ago
  well using a directive means you still have to put it everywhere ( in all your views). i'm more used to something like a master template with global menus and a content div. but for that you would need multiple ng-views or something similar, since my menu bars also need to be linked to the context.
  - deleted 13y ago
    [deleted]
  - dchuk 13y ago
    UI Router solves this problem pretty handily
kops 13y ago
I used this http://stackoverflow.com/questions/12592472/how-to-highlight-a-current-menu-item-in-angularjs http://stackoverflow.com/questions/12592472/how-to-highlight... Works fine, as long as your URL scheme structured enough. Toss me your email, and I can give you the controller and the tmeplate code with link to the live site. I would have copy-pasted here but don't want to turn HN into stackoverflow.
- aram 13y ago
  Do you mind creating a gist? It would help anyone reading this and you could just post a link.
  - kops 13y ago
    https://gist.github.com/kapilpandit/6404978 https://gist.github.com/kapilpandit/6404978 Disclaimer: I am no frontend/javascript developer. Just getting by.
chrisrhoden 13y ago
You can listen for the $routeChangeSuccess event from outside of your ng-view. You can attach arbitrary key=> value pairs to your routes to annotate them in ways that are particular to your app. Hope this helps, let me know if it is unclear.
kops 13y ago
As for the structure, I tried Yeoman but quickly gave up due to learning curve and lack of time. I settled on a simple folder structure with minimal grunt file which uglifies and minifies my code. If minification/uglification wasn't a concern then I would have ditched grunt too. Not because I have issues with these cool tools, but purely because I just don't have time to understand them thoroughly. AngularJS itself helped fix my jQuery spaghetti wonderfully though.
mbell 13y ago
Put your menu bar code in your 'master' template (wherever you're defining the location for your ng-view). Use a separate Nav controller for the menu bar. It seems like your biggest issue is just data sharing, e.g. each page needs different menu items or something. Just create an Angular service that provides the backing data for the menu bar and exposes an API to other controllers to change things in the menu bar or get the value of a search field in the menu bar, etc. This type of thing is exactly what angular services are for.
polyfractal 13y ago
Here is one of my angular projects: https://github.com/polyfractal/elasticsearch-inquisitor https://github.com/polyfractal/elasticsearch-inquisitor I'm not sure I would classify this as a "big" app, but it has four tabs and is slowly growing in functionality. The menu bar (and highlighting) is a very simple controller and service. Obligatory disclaimer: I'm by no means an angular expert.
sararob 13y ago
If you want to add a backend to your Angular app, check out AngularFire. Here's the quickstart guide and tutorial: http://angularfire.com/quickstart.html http://angularfire.com/quickstart.html
lifeisstillgood 13y ago
The oreilly book is geared heavily towards best practise for just such apps.

by bsaul 13y ago

davej 13y ago

It's difficult to know for sure without seeing exactly what you're trying to do but perhaps a directive is what you want? If you're looking for general app structure tips then the Angular generator for Yeoman is a good place to start.

diggan 13y ago

Use common sense. First step, having the files in one folder. Everything mixed up. You move into a structure of seperating services from directives, controllers from filters and so on. But the way most people seems to be doing it (the Angular way™) when it comes to the bigger applications is by splitting it up by functionality/modules. So you have a forum and therefore probably at least 3 different modules, "thread", "user" and "forum" or something similar. Just follow the MVC pattern with whatever filestructure that works with you and your team. Copy/pasting the menu bars? For that, I would have a directive which controls the display of the menu and acting accordingly. Only when declaration is needed and it's reusable. I don't understand your point about meaningful urls though, they are as meaningful as you make them.

bsaul 13y ago
well using a directive means you still have to put it everywhere ( in all your views). i'm more used to something like a master template with global menus and a content div. but for that you would need multiple ng-views or something similar, since my menu bars also need to be linked to the context.
- deleted 13y ago
  [deleted]
- dchuk 13y ago
  UI Router solves this problem pretty handily

kops 13y ago

I used this http://stackoverflow.com/questions/12592472/how-to-highlight-a-current-menu-item-in-angularjs http://stackoverflow.com/questions/12592472/how-to-highlight... Works fine, as long as your URL scheme structured enough. Toss me your email, and I can give you the controller and the tmeplate code with link to the live site. I would have copy-pasted here but don't want to turn HN into stackoverflow.

aram 13y ago
Do you mind creating a gist? It would help anyone reading this and you could just post a link.
- kops 13y ago
  https://gist.github.com/kapilpandit/6404978 https://gist.github.com/kapilpandit/6404978 Disclaimer: I am no frontend/javascript developer. Just getting by.

chrisrhoden 13y ago

You can listen for the $routeChangeSuccess event from outside of your ng-view. You can attach arbitrary key=> value pairs to your routes to annotate them in ways that are particular to your app. Hope this helps, let me know if it is unclear.

kops 13y ago

As for the structure, I tried Yeoman but quickly gave up due to learning curve and lack of time. I settled on a simple folder structure with minimal grunt file which uglifies and minifies my code. If minification/uglification wasn't a concern then I would have ditched grunt too. Not because I have issues with these cool tools, but purely because I just don't have time to understand them thoroughly. AngularJS itself helped fix my jQuery spaghetti wonderfully though.

mbell 13y ago

Put your menu bar code in your 'master' template (wherever you're defining the location for your ng-view). Use a separate Nav controller for the menu bar. It seems like your biggest issue is just data sharing, e.g. each page needs different menu items or something. Just create an Angular service that provides the backing data for the menu bar and exposes an API to other controllers to change things in the menu bar or get the value of a search field in the menu bar, etc. This type of thing is exactly what angular services are for.

polyfractal 13y ago

Here is one of my angular projects: https://github.com/polyfractal/elasticsearch-inquisitor https://github.com/polyfractal/elasticsearch-inquisitor I'm not sure I would classify this as a "big" app, but it has four tabs and is slowly growing in functionality. The menu bar (and highlighting) is a very simple controller and service. Obligatory disclaimer: I'm by no means an angular expert.

sararob 13y ago

If you want to add a backend to your Angular app, check out AngularFire. Here's the quickstart guide and tutorial: http://angularfire.com/quickstart.html http://angularfire.com/quickstart.html

lifeisstillgood 13y ago

The oreilly book is geared heavily towards best practise for just such apps.