AngularJS: Correct place for global menu provider, service or rootScope?

Question

I'm new to AngularJS, and - since it is quite complex and the approach is new for me, I'm a bit confused.

I'm from "classic" background (server-side template languages [like Yii, django, Smarty] + some jQuery to make things a bit dynamic).

Let's say I have a menu bar (Bootstrap NavBar, or anything else) - an element which lives outside of the main page content, like this:

<body>
  <div id="menubar">
    ... <!-- menu content -->
  </div>
  <div class="container">
    <div ng-view></div>
  </div>
</body>

Now I'd like to make the menu a bit dynamic, i.e add or remove some menu items inside of the controller. Using the server side frameworks & their templating systems, for example Yii - I'd simply have a BaseController class with $menuItems variable, and render it each time in the menuBar, while all the controllers would inherit from BaseController so they could modify items.

Also, I need a function which handles the searchForm located inside menu bar. Where should it live?

What is Angular way for something like this? So far I've been thinking of creating custom service or extending $rootScope.

Have you seen example app ? https://github.com/IgorMinar/foodme — vittore, Jun 03 '13 at 07:51
@vittore thank you, I didn't knew this one. I wasn't aware I can use ng-controller along with ng-view :) Combining it with some shared service should do a trick. Make it a reply instead of comment and I'll mark it as the answer. — migajek, Jun 03 '13 at 09:51
possible duplicate of [global communication in angular module: event bus or mediator pattern/service](http://stackoverflow.com/questions/27356299/global-communication-in-angular-module-event-bus-or-mediator-pattern-service) — Paul Sweatte, May 30 '15 at 03:52

vittore · Accepted Answer · 2015-07-24T14:22:00.530

UPDATE: I would encourage you to take a look at John Papa's ng-demoes and style-guide as say second step in adopting angular.js.

Check out examples angular.js team posted recently, to show full application.

Pay attention to the following features angular gives you

ngView, ngInclude directives
templateUrl property of directive
'=', '&','@' scope bindings in directives

I belive it is going be a good approach to have combination of a service and a directive for rendering menu the way you described it.

AngularJS: Correct place for global menu provider, service or rootScope?

1 Answers1