javascriptangularjsangularjs-scopejavascriptmvc

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

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.

Solution

  • 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

    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.