nagivationService

Simple nav service

by jank0003

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-touch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui-ieshiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<div ng-include="'menu.html'"></div>
<div ui-view="main"></div>

<script type="text/ng-template" id="menu.html">
    <nav class="navbar navbar-default" ng-controller="menuCtrl as mn">
      <div class="container-fluid">
        <div class="navbar-header">
            <span class="navbar-brand">Our Menu</span>
        </div>
        <div>
          <ul class="nav navbar-nav">
              <li ng-repeat="m in mn.menuItems track by $index" ng-class="{'active': m && m.active}">
                  <a ng-href="{{ mn.getRouteSref(m) }}" ng-bind="m.heading" />
                </li>
          </ul>
        </div>
     ...

CSS

.modal-dialog {
    margin-top: 20px;
}

JavaScript

(function () {
    angular.module('myApp.services', ['ngResource', 'ngAnimate']);
    angular.module('myApp.controllers', []);

    var myApp = angular.module('myApp', [
        'myApp.services',
        'myApp.controllers',
        'ngSanitize',
        'ui.bootstrap',
        'ui.router',
        'ui'
    ]);

    var menuService = function ($rootScope) {
        var menuItems = [
                { name: 'state1', heading: "State1", route: "app.state1", active: false },
                { name: 'state2', heading: "State2", route: "app.state2", active: false },
                { name: 'state3', heading: "State3", route: "app.state3", active: false }
            ];
        var
            currentMenuItem,
            resetMenuItem = function (menuItem) {
                menuItem.active = false;
            },
            resetMenuItems = function () {
                for (var i = 0; i < menuItems.length; i++) {
                    resetMenuItem(menuItems[i]);
                }
            },
            findMenuItem = function (routeName) {
                var criteriaFunction = function (c) {
                    return c.route === routeName || routeName.indexOf(c.route) != -1;
                };
                return menuItems.filter(criteriaFunction)[0];
            };

        $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
            currentMenuItem = findMenuItem(toState.name, toParams);
        });

        $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
            if (currentMenuItem) {
                currentMenuItem.active = true;
                prevMenuItem = findMenuItem(fromState.name);
                if (prevMenuItem && prevMenuItem.name !== currentMenuItem.name) {
                    prevMenuItem.active = false;
                }
            } else {
                for (var i = 0; i < currentMenuItem.length; i++) {
                    currentMenuItem[i].active =...