title: Display the side menu in ionic using different pages
body: <p>I am trying to display the side menu in ionic, I wrote the code for side menu.  </p>
  
  <p>If I write all the code in a single page, it is displaying the side menu and drag is also working. </p>
  
  <p>Same way, I am trying to display the side menu proving route <code>$stateProvider</code>, here the root is working and also it is going to home page without any problem. But in home page, it is displaying empty, I mean white page and I tried just wrote text using <code>h1</code> tag at that time also it is displaying white page. </p>
  
  <p>My requirement is, if I click or drag the menu in home page it should open the side menu and also must be code in different files.</p>
  
  <h3>INDEX.HTML</h3>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="ionicApp"&gt;
  
  &lt;head&gt;
      &lt;title&gt;IonicSideMenu Example&lt;/title&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
      &lt;link href="http://code.ionicframework.com/1.0.0-rc.4/css/ionic.min.css" rel="stylesheet"&gt;
      &lt;script src="http://code.ionicframework.com/1.0.0-rc.4/js/ionic.bundle.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="Module.js"&gt;&lt;/script&gt;
      &lt;script src="config.js"&gt;&lt;/script&gt;
      &lt;script src="AppCtrl.js"&gt;&lt;/script&gt;
      &lt;script src="MenuController.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="AppCtrl"&gt;
      &lt;ion-nav-view animation="slide-left-right"&gt;&lt;/ion-nav-view&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;           
  </code></pre>
  
  <p><strong>MODULE.JS</strong></p>
  
  <pre><code>var ionicInfoApp = angular.module('ionicApp', ['ionic']);
  </code></pre>
  
  <h3>CONFIG.JS</h3>
  
  <pre><code>ionicInfoApp.config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
          .state('/Home', {
              templateUrl: 'Home.html',
              controller: "MenuController"
          })
          .state('/Item1', {
              templateUrl: 'item1.html'
                  // controller : "MenuController"
          })
          .state('/Item2', {
              templateUrl: 'item2.html'
                  //controller : "MenuController"
          })
      $urlRouterProvider.otherwise('/Home');
  });
  </code></pre>
  
  <h3>AppCtrl</h3>
  
  <pre><code>ionicInfoApp.controller('AppCtrl', function($scope, $ionicSideMenuDelegate) {
  
      ionic.Platform.ready(function() {
  
      });
  
  });
  </code></pre>
  
  <h3>MenuController</h3>
  
  <pre><code>ionicInfoApp.controller('MenuController', function($scope, $ionicSideMenuDelegate) {
      $scope.toggleLeft = function() {
          $ionicSideMenuDelegate.toggleLeft();
      }
  });
  </code></pre>
  
  <p><strong>HOME.html</strong></p>
  
  <pre><code>&lt;div ng-controller="MenuController"&gt;
      &lt;ion-side-menus&gt;
          &lt;ion-side-menu-content&gt;
              &lt;ion-header-bar class="bar-dark"&gt;
                  &lt;button class="button button-icon icon ion-navicon" ng-click="toggleLeft()"&gt;&lt;/button&gt;
                  &lt;h1 class="title"&gt;App&lt;/h1&gt;
              &lt;/ion-header-bar&gt;
              &lt;ion-content&gt;
              &lt;/ion-content&gt;
          &lt;/ion-side-menu-content&gt;
          &lt;ion-side-menu side="left"&gt;
              &lt;ion-header-bar class="bar-dark"&gt;
                  &lt;h1 class="title"&gt;Projects&lt;/h1&gt;
              &lt;/ion-header-bar&gt;
              &lt;ion-content&gt;
                  &lt;ul&gt;
                      &lt;li&gt;Item1&lt;/li&gt;
                      &lt;li&gt;Item2&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/ion-content&gt;
          &lt;/ion-side-menu&gt;
      &lt;/ion-side-menus&gt;
  &lt;/div&gt;
  </code></pre>