Click here to Skip to main content
15,168,412 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>
   

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