Recently, I had to design an AngularJS application that would be highly modular. The idea was to let each module to create its own menu items and its own routes.
The final application should look like this:
The menu on the left should be generated on-the-fly, based on the requirements of individual modules.
It turned out it’s quite easy to do so using AngularJS
Wait a minute. What is AngularJS provider? Well, there is nice article in documentation.
For the sake of this article, provider is just a service, which is configured at application startup. And application startup is perfect time to build the menu. So let’s do it.
First of all let us create a module called
app.core. containing the
Menu service provider which holds application menu items:
$get() function. It is used by AngularJS at runtime to get an instance of
add() method can be called only at bootstrap (
config method) by other modules to add its own menu items.
MenuCtrl is a controller which uses the menu service to get an instance of menu and render it.
Let’s define another module and add a menu item:
app.settings module dependents on
app.core and during application bootstrap (
config() method) it adds menu item and respective routes.
Also note, that we are now dealing with
MenuProvider, not the
Menu service itself. We will use the service later in
Now let’s define another module with two more menu items:
Menu rendering depends on the frontend framework you are using, so here is just a simple version for Twitter’s Bootstrap:
Of course you can add icons to achieve extra fanciness. Check this demo to learn about icons.
Putting it all together
Finally, we need to link all the individual modules into one root application and add a Home menu item. It’s basically just a list of submodule dependencies and default route handler:
The only issue in the example is that Home menu always appears on the last position because of module loading order. Fix it as your homework :)