Untitled

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/0.9.19/css/ionic.css">
  
    <script src="http://code.ionicframework.com/nightly/js/ionic.js"></script>
    <script src="http://code.ionicframework.com/nightly/js/angular/angular.min.js"></script>
    <script src="http://code.ionicframework.com/nightly/js/angular/angular-animate.min.js"></script>
    <script src="http://code.ionicframework.com/nightly/js/angular/angular-sanitize.min.js"></script>
    <script src="http://code.ionicframework.com/nightly/js/angular-ui/angular-ui-router.min.js"></script>
    <script src="http://code.ionicframework.com/nightly/js/ionic-angular.js"></script>
    
    <script src="app.js"></script>
    <script src="controller.js"></script>
    <script src="services.js"></script>
  </head>

  <body ng-app="ftdMobile">

    <div ng-controller="NavMenu">
      <side-menus>
  
        <!-- Center content -->
        <pane side-menu-content drag-content="true" id="nav-menu-pane">
          <nav-bar animation="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="ion-arrow-left-c"></nav-bar>
  
        <!-- subheader? -->
        <header ng-if="subTitle" class="bar bar-subheader">
          <h2 class="title">{{subTitle}}</h2>
        </header>
        
          <nav-view animation="slide-left-right"></nav-view>
        </pane>
  
        <!-- Left menu -->
        <side-menu side="left">
          <header class="bar bar-header bar-dark">
            <h1 class="title">Cory Dorning</h1>
          </header>
  
          <content has-header="true"  class="content">
            <header class="section-header">
              <h1>{{items.header}}</h1>
            </header>
  
            <list>
              <item ng-repeat="item in items.links" ng-click="goto('{{item.href}}')">
                <i class="icon {{item.icon}} mar-r-divide"></i>
                {{item.title}}
              </item>
            </list>
          </content>
  
        </side-menu>
  
      </side-menus>
    </div><!-- ng NavMenu -->
  </body>

</html>

/*
 * Authored by: Cory Dorning
 *
 * Dependencies: Angular JS 1.2.8, Ionic 0.9.20
 *
 * Last modified by: Cory Dorning
 * Last modified on: 1/23/14
 *
 * Description: Angular JS Modules
 *
 */

 'use strict';

angular.module('ftdMobile', [
  'ionic',
  'ftdMobile.services',
  'ftdMobile.controllers'
])
  .config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

      $stateProvider
        .state('overview', {
          url: '/overview',
          templateUrl: 'overview.html',
          controller: 'OverviewController'
        })

        .state('administration', {
          url: '/administration',
          templateUrl: 'administration.html',
          controller: 'AdminController'
        })

        .state('reports', {
          url: '/reports',
          templateUrl: 'reports.html',
          controller: 'ReportsController'
        });

      $urlRouterProvider.otherwise('/overview');

    }
  ]);

/*
 * Authored by: Cory Dorning
 *
 * Dependencies: Angular JS 1.2.8, Ionic 0.9.20
 *
 * Last modified by: Cory Dorning
 * Last modified on: 1/23/14
 *
 * Description: Angular JS Controllers
 *
 */

'use strict';

var appHelpers = {
  navMenu: function($scope) {
    // left buttons
    $scope.leftButtons = [{
      type: 'button-icon icon ion-navicon',
      tap: function(e) {
        $scope.sideMenuController.toggleLeft();
      }
    }];

    // right buttons
    $scope.rightButtons = [];
    
    // chainability
    return this;
  },

  disableNavMenu: function($scope) {
    // disable nav from being draggable
    $scope.$parent.dragContent = false;
    
    // chainability
    return this;
  },

  enableNavMenu: function($scope) {
    // disable nav from being draggable
    $scope.$parent.dragContent = false;

    // chainability
    return this;
  }

};


/* Side Nav Menu */
angular.module('ftdMobile.controllers', [])
  .controller('NavMenu', function($scope, $location, SiteNavService) {
    $scope.toggle = function() {
      $scope.sideMenuController.toggleLeft();
    };

    $scope.goto = function(page) {
      // close nav
      $scope.toggle();

      // update location
      $location.url(page);
    };

    $scope.items = SiteNavService.all();
    
    $scope.subTitle = null;

  })

  .controller('OverviewController', ['$scope', '$location',
    function($scope, $location) {
      $scope.navTitle = 'Overview';

      // update nav menu
      appHelpers.navMenu($scope).enableNavMenu($scope);
    }
  ])

  .controller('AdminController', ['$rootScope', '$scope', '$location',
    function($rootScope, $scope, $location) {
      $scope.navTitle = 'Administration';
console.log($rootScope, $scope);
      // update nav menu
      appHelpers.disableNavMenu($scope);
    }
  ])

  .controller('ReportsController', ['$scope', '$location',
    function($scope, $location) {
      $scope.navTitle = 'Reports & Statements';
      $scope.subTitle = 'My Reports';

      // update nav menu
      appHelpers.navMenu($scope).enableNavMenu($scope);
    }
  ]);

'use strict';

angular.module('ftdMobile.services', [])
  .factory('SiteNavService', function() {
    // Might use a resource here that returns a JSON array

    // Some fake testing data
    var items = {
      header: 'Navigation',
      links: [
        { href: '/overview', icon: 'ion-ios7-eye', title: 'Overview'},
        { href: '/administration', icon: 'ion-settings', title: 'Administration'},
        { href: '/reports', icon: 'ion-pie-graph', title: 'Reports & Statements'}
    ]};

    return {
      all: function() {
        return items;
      }
    };
  });

<view title="navTitle" hide-back-button="true" left-buttons="leftButtons">
  <content has-header="true" padding="true" scroll="true">

    <h1>Overview Page</h1>

  </content>
</view>

<view title="navTitle" left-buttons="leftButtons">
  <content has-header="true" padding="true" scroll="true">

    <h1>Administration Page</h1>

  </content>
</view>

<view title="navTitle" hide-back-button="true" left-buttons="leftButtons">
  <content has-header="true" padding="true" scroll="true">

    <h1>Reports Page</h1>

  </content>
</view>