Click here to Skip to main content
15,559,455 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I just started a new app with ionic. my other views are working well but after creating new views since i jump into routing i just see a blank page and i don't get my mistake.

this is my index.html

What I have tried:

<pre lang="HTML">
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
     <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/vtabs.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <script src="js/ng-map.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>

    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="lib/ngstorage/ngStorage.js"></script>

    <script src="js/geocode.js"></script>

    <script src="js/vtabs.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/directives.js"></script>
    <script src="js/services.js"></script>

    <script src="js/angular-local-storage.js"></script>
    <script src="js/angular-local-storage.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-messages.min.js"></script>  

  <!--  <script type="text/javascript">
         var pictureSource;   // picture source
         var destinationType; // sets the format of returned value

         // Wait for device API libraries to load
         //
         document.addEventListener("deviceready",onDeviceReady,false);

         // device APIs are available
         //
         function onDeviceReady() { 
          // alert("device");
            pictureSource=navigator.camera.PictureSourceType;
            destinationType=navigator.camera.DestinationType;
         }

         // Called when a photo is successfully retrieved
         //
           function onPhotoDataSuccess(imageData) {
            alert("image"+imageData);
            // Uncomment to view the base64-encoded image data
           // console.log(imageData);
            alert("photoData");
           // Get image handle
           // //
           var smallImage = document.getElementById('smallImage');


           // Unhide image elements
           //
           smallImage.style.display = 'block';

           // Show the captured photo
           // The in-line CSS rules are used to resize the image
           //
           smallImage.src = "data:image/jpeg;base64," + imageData;
           // alert(smallImage);
           // alert(smallImage.src);
           // return smallImage.src;
         }

         // Called when a photo is successfully retrieved
         //
           function  onPhotoURISuccess(imageURI) {
            alert("Photo uri");
              // Uncomment to view the image file URI
              // console.log(imageURI);

              // Get image handle
              // //
              var largeImage = document.getElementById('largeImage');

              // Unhide image elements
              //
              largeImage.style.display = 'block';

              // Show the captured photo
              // The in-line CSS rules are used to resize the image
              //
              largeImage.src = imageURI;
          }

          // A button will call this function
          //
            function capturePhoto() {
              alert("Capture Photo");
              // Take picture using device camera and retrieve image as base64-encoded string
              navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,

              destinationType: destinationType.DATA_URL });
          }

          // A button will call this function
          //
            function capturePhotoEdit()  {

              alert("Capture Edit");
            // Take picture using device camera, allow edit, and retrieve image as base64-encoded string
            navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
              destinationType: destinationType.DATA_URL });
          }

          // A button will call this function
          //
         function getPhoto(source) {
          alert(source);
          alert("get Phot");
            // Retrieve image file location from specified source
            navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
              destinationType: destinationType.FILE_URI,
              sourceType: source });
          }

          // Called if something bad happens.
          //
            function onFail(message) {
            alert('Failed because: ' + message);
          }
    </script>  -->
  </head>
  <body ng-app="ionicApp">

    <!--
      The nav bar that will be updated as we navigate between views.
    -->
  <!--   <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar> -->
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->

    <ion-nav-view animation="slide-left-right"></ion-nav-view> 
    <!-- <ion-nav-view></ion-nav-view> -->
  </body>
</html>

This is ma app.js file:

       <pre lang="Javascript"> // Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('ionicApp', ['ionic', 'ionicApp.controllers','ionicApp.directives', 'ionicApp.services','LocalStorageModule','ngAnimate', 'vTabs','ngCordova','ngMap','geolocate','ngStorage'])


.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider,localStorageServiceProvider) {

  $stateProvider

    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/menu.html",
      controller: 'AppCtrl'
    })

  .state('registration', {
      url: '/registration',
      templateUrl: "templates/registration.html",
      controller: 'RegisterCtrl'
    })

  .state('login', {
      url: "/login",
      templateUrl: "templates/login.html",
      controller: 'LoginCtrl'
    })
  .state('setting', {
      parent: 'app',
      url: '^/setting',
      views: {
        'menuContent': {
      templateUrl: "templates/setting.html",
      controller: 'SettingCtrl'
         }
       }
    })

    .state('app.tasks', {
      url: '/tasks',
      views: {
        'menuContent': {
          templateUrl: 'templates/tasks.html',
          controller: 'TasksCtrl'
        }

      }
    })

    .state('app.task', {
      url: '/task/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/task.html',
          controller: 'TaskCtrl'
        }
      }

      // views: {
      // 'menuContent': {
      //   templateUrl: 'templates/task.html',
      //   controller: 'TaskCtrl'
      // },
      // 'detail': {
      //   templateUrl: 'report-table.html',
      //   controller: function($scope){ console.log("... controller stuff just for detail view ..."); }
      // },
      // 'note': {
      //   templateUrl: 'report-graph.html',
      //   controller: function($scope){ console.log("... controller stuff just for note view ..."); }
      // }
    // }

    })

    .state('app.newtask',{
      url:'/newtask',
      views: {

          templateUrl: 'templates/newTask.html',
          controller: 'newTaskCtrl'
      }
    })
    .state('app.project', {
      url: '/project',
      views: {
        'menuContent': {
          templateUrl: 'templates/project.html',
          controller: 'projectCtrl'
        }

      }
    })
    .state('app.saleOrder',{
      url:'/saleOrder',
      views:{
        templateUrl:'templates/saleOrder.html',
        controller:'saleOrderCtrl'
      }
    })

     .state('app.maps', {
      url: '/maps',
      views: {
        'menuContent': {
          templateUrl: 'templates/maps.html',
          controller: 'MapsCtrl'
        }
      }
    })

     .state('app.map', {
      url: '/map/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/maps.html',
          controller: 'MapsCtrl'
        }
      }
    })

    .state('app.direction', {
      url: '/direction/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/directions.html',
          controller: 'NavigationCtrl'
        }
      }
    }) 

     .state('app.customers', {
      url: '/customers',
      views: {
        'menuContent': {
          templateUrl: 'templates/customers.html',
          controller: 'CustomersCtrl'
        }
      }
    })

      .state('app.customer', {
      url: '/customer/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/customer.html',
          controller: 'CustomerCtrl'
        }
      }
    })

    .state('app.quotations', {
      url: '/quotations',
      views: {
        'menuContent': {
          templateUrl: 'templates/quotations.html',
          controller: 'QuotationsCtrl'
        }
      }
    })

    .state('app.quotation', {
      url: '/quotation/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/quotation.html',
          controller: 'QuotationCtrl'
        }
      }
    })

     .state('app.addquotation', {
      url: '/addquotation',
      views: {
        'menuContent': {
          templateUrl: 'templates/AddQuotation.html',
          controller: 'AddQuotationCtrl'
        }
      }
    })


    .state('app.products', {
      url: '/products',
      views: {
        'menuContent': {
          templateUrl: 'templates/products.html',
          controller: 'ProductsCtrl'
        }
      }
    })

 .state('app.product', {
      url: '/product/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/product.html',
          controller: 'ProductCtrl'
        }
      }
    })

    .state('app.user', {
      url: '/user/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/user.html',
          controller: 'UserCtrl'
        }
      }
    })

    .state('app.note', {
      url: '/note/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/note.html',
          controller: 'AddNoteCtrl'
        }
      }
    })

      .state('app.material', {
      url: '/material',
      views: {
        'menuContent': {
          templateUrl: 'templates/AddMaterial.html',
          controller: 'AddMaterialCtrl'
        }
      }
    })
    .state('app.login-into-menucontent', {
      url: "/login-into-menucontent",
      views: {
        'menuContent' :{
          templateUrl: "templates/login.html",
          controller: 'LoginCtrl'
        }
      }
    });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/login');

  localStorageServiceProvider
    .setPrefix('odoo')
    .setStorageType('localStorage')
    .setNotify(true, true)

});


and this should be my template (setting.html)

<ion-view view-title="Setting">
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"> Back
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>



<ion-content>
<ion-list class="list">

<ion-item class="item item-icon-right" href="#/app/project">

Add Project

<ion-item class="item item-icon-right" href="#/app/project">

Delete Project






newTask.html

JavaScript
<ion-view view-title="New task">
<ion-nav-bar class="bar-positive nav-title-slide-ios7"> 
    <ion-nav-back-button class="button-clear">class="icon ion-chevron-left"> Back</ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
     <!--  <ion-nav-buttons side="right" >
        <button class="button button-icon fa fa-map-marker"  ui-sref="app.maps">
        </button>
      </ion-nav-buttons>  -->  
</ion-nav-bar>
<ion-content >
<div ng-controller="newTaskCtrl">
<form name="newTaskForm" novalidate="true">
      <label class="item item-input ">
         <span class="input-label">Task Name</span>
    </label>
    <input type="text" name="tasknm" ng-model="user.tasknm"></input>
    <!-- <h1>{{user.tasknm}}</h1> -->
    <label class="item item-input item-select item-light">
        <span class="input-label">Employee</span>

      <select ng-model="user.selectedItem" ng-options="item.name for item in users">
      <option value="">Add New Employee</option>
      </select>
    </label>
       <input class="input-block-level ng-valid ng-dirty" ng-model="user.new_list_category" ng-show="!user.selectedItem" type="text" placeholder="new employee name">
    <label class="item item-input item-select item-light">
          <div class="input-label">Customer</div>
          <select ng-model="user.id" ng-options="s as s.name for s in customer" ng-change="changeCust(customer.name)">
            <option value="">Add New Company</option>
          </select>
    </label>
    <input class="input-block-level ng-valid ng-dirty" ng-model="user.new_list_company" ng-show="!user.id" type="text" placeholder="new employee name">
    <button class="button button-calm" ng-disabled="newTaskForm.$invalid" ng-click="save(newTaskForm.$valid)">Save</button>
    <button class="button button-stable" ng-click="cancel()">Cancel
    </button>
</form>
</div>
</ion-content>
</ion-view>
Posted
Updated 10-May-16 22:01pm
Comments
Anil Vaghasiya 11-May-16 2:57am    
Hello,

You don't define menuContent in "saleOrder","newtask" if you inherit the parent.

--AV

1 solution

Please Refer Below Code :-

JavaScript
.config(function($stateProvider, $urlRouterProvider,localStorageServiceProvider) {
 
  $stateProvider
   .state('login', {
       url : '/login',
       templateUrl : 'templates/login.html',
       controller : 'LoginCtrl'
     })
			
  .state('registration', {
      url: '/registration',
      templateUrl: "templates/registration.html",
      controller: 'RegisterCtrl'
    })
	
	 .state('app', {
        url : '/app',
        templateUrl : 'templates/menu.html',
        abstract : true,
        controller : 'AppCtrl'
    })
	.state('app.setting', {
      url: '/setting',
      views: {
        'menuContent': {
			templateUrl: "templates/setting.html",
			controller: 'SettingCtrl'
         }
       }
    })
	.state('app.tasks', {
         url: '/tasks',
         views: {
             'menuContent': {
                 templateUrl: 'templates/tasks.html',
                 controller : 'TasksCtrl'
             }
         }
     })
	 
	 .state('app.task', {
      url: '/task/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/task.html',
          controller: 'TaskCtrl'
        }
      })
 
	.state('app.newtask',{
      url:'/newtask',
      views: {
	  'menuContent': {
          templateUrl: 'templates/newTask.html',
          controller: 'newTaskCtrl'
		}
	  }
    })
    .state('app.project', {
      url: '/project',
      views: {
        'menuContent': {
          templateUrl: 'templates/project.html',
          controller: 'projectCtrl'
        }
 
      }
    })
    .state('app.saleOrder',{
      url:'/saleOrder',
      views:{
	    'menuContent': {
        templateUrl:'templates/saleOrder.html',
        controller:'saleOrderCtrl'
		}
	  }
    })
 
     .state('app.maps', {
      url: '/maps',
      views: {
        'menuContent': {
          templateUrl: 'templates/maps.html',
          controller: 'MapsCtrl'
        }
      }
    })
 
     .state('app.map', {
      url: '/map/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/maps.html',
          controller: 'MapsCtrl'
        }
      }
    })
 
    .state('app.direction', {
      url: '/direction/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/directions.html',
          controller: 'NavigationCtrl'
        }
      }
    }) 
 
     .state('app.customers', {
      url: '/customers',
      views: {
        'menuContent': {
          templateUrl: 'templates/customers.html',
          controller: 'CustomersCtrl'
        }
      }
    })
 
      .state('app.customer', {
      url: '/customer/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/customer.html',
          controller: 'CustomerCtrl'
        }
      }
    })
 
    .state('app.quotations', {
      url: '/quotations',
      views: {
        'menuContent': {
          templateUrl: 'templates/quotations.html',
          controller: 'QuotationsCtrl'
        }
      }
    })
 
    .state('app.quotation', {
      url: '/quotation/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/quotation.html',
          controller: 'QuotationCtrl'
        }
      }
    })
 
     .state('app.addquotation', {
      url: '/addquotation',
      views: {
        'menuContent': {
          templateUrl: 'templates/AddQuotation.html',
          controller: 'AddQuotationCtrl'
        }
      }
    })
 

    .state('app.products', {
      url: '/products',
      views: {
        'menuContent': {
          templateUrl: 'templates/products.html',
          controller: 'ProductsCtrl'
        }
      }
    })
 
 .state('app.product', {
      url: '/product/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/product.html',
          controller: 'ProductCtrl'
        }
      }
    })
 
    .state('app.user', {
      url: '/user/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/user.html',
          controller: 'UserCtrl'
        }
      }
    })
 
    .state('app.note', {
      url: '/note/:id',
      views: {
        'menuContent': {
          templateUrl: 'templates/note.html',
          controller: 'AddNoteCtrl'
        }
      }
    })
 
      .state('app.material', {
      url: '/material',
      views: {
        'menuContent': {
          templateUrl: 'templates/AddMaterial.html',
          controller: 'AddMaterialCtrl'
        }
      }
    })
   
 
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/login');


And After the Login You need to define "menu.html" View Look like :-
HTML
<ion-side-menus>
        <ion-pane ion-side-menu-content="">
            <ion-nav-bar type="bar-positive">
                         back-button-type="button-icon"
                         back-button-icon="ion-ios7-arrow-back"
                         animation="nav-title-slide-ios7"
                >

             </ion-nav-bar>
            <ion-nav-view name="menuContent"></ion-nav-view>
        </ion-pane>

        <ion-side-menu side="left">
            <header class="bar bar-header bar-assertive">
                <div class="title">Side Menu</div>
            </header>
            <ion-content has-header="true">
                <ul class="list">
                    <a ui-sref="entry" class="item">Back To Entry Page</a>
                    <a ui-sref="menuContent.menu" class="item" ng-click="toggleMenu()">Menu</a>
                    <a ui-sref="menuContent.setting" class="item" ng-click="toggleMenu()">Settings</a>
                </ul>
            </ion-content>
        </ion-side-menu>

    </ion-side-menus>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900