javascript - Ionic shows a blank page without any error -
i getting blank pages ionic. no errors show in chrome debugger. , when inspect debugger, saw nothing inside of ion-nav-view, means reason ui router not working. need in figuring out error.
here code:
index.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 rel="manifest" href="manifest.json"> <!-- un-comment code enable service worker <script> if ('serviceworker' in navigator) { navigator.serviceworker.register('service-worker.js') .then(() => console.log('service worker installed')) .catch(err => console.log('error', err)); } </script>--> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- if using sass (run gulp sass first), uncomment below , remove css includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="lib/ionic/js/angular/angular-resource.min.js"></script> <script src="lib/ionic/js/angular-ui/angular-ui-router.min.js"></script> <script src="lib/ngcordova/dist/ng-cordova.js"></script> <!-- cordova script (this 404 during development) --> <script src="cordova.js"></script> <!-- app's js --> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/controllers.js"></script> </head> <body ng-app="watchhoursapp"> <ion-nav-view> </ion-nav-view> </body> </html> menu.html:
<ion-side-menus enable-menu-with-back-views="false"> <ion-side-menu-content> <ion-nav-bar class="bar-stable"> <ion-nav-back-button> </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-bar> <ion-nav-view name="menucontent"></ion-nav-view> </ion-side-menu-content> <ion-side-menu side="left"> <ion-header-bar class="bar-stable" > <h1 class="title">watchhours</h1> </ion-header-bar> <ion-content> <ion-list> <ion-item menu-close ui-sref="app"> home </ion-item> <ion-item menu-close ng-if="currentuser" ui-sref="app.user({id: uid})"> {{username}} </ion-item> <ion-item menu-close ui-sref="app.search"> tv shows </ion-item> <ion-item menu-close ng-if="!currentuser" ng-click="login()"> log in </ion-item> <ion-item menu-close ng-if="!currentuser" ng-click="register()"> sign </ion-item> <ion-item menu-close ng-if="currentuser" ng-click="logout()"> log out </ion-item> </ion-list> </ion-content> </ion-side-menu> </ion-side-menus> app.js:
// ionic starter app // angular.module global place creating, registering , retrieving angular modules // 'starter' name of angular module example (also set in <body> attribute in index.html) // 2nd parameter array of 'requires' // 'starter.controllers' found in controllers.js angular.module('watchhoursapp', ['ionic']) .run(function($ionicplatform) { $ionicplatform.ready(function() { // hide accessory bar default (remove show accessory bar above keyboard // form inputs) if (window.cordova && window.cordova.plugins.keyboard) { cordova.plugins.keyboard.hidekeyboardaccessorybar(true); cordova.plugins.keyboard.disablescroll(true); } if (window.statusbar) { // org.apache.cordova.statusbar required statusbar.styledefault(); } }); }) .config(function($stateprovider, $urlrouterprovider) { $stateprovider .state('app', { url: '/app', abstract: true, templateurl: 'templates/menu.html', controller: 'sidemenuctrl' }); // if none of above states matched, use fallback $urlrouterprovider.otherwise('/app'); }); controller.js:
angular.module('watchhoursapp') .controller('sidemenuctrl', ['$scope', '$state', '$rootscope', 'shows', '$http', '$location', '$localstorage', 'homeservices', 'authfactory', '$ionicmodal', '$ionicsidemenudelegate', '$timeout', function ($scope, $state, $rootscope, shows, $http, $location, $localstorage, homeservices, authfactory, $ionicmodal, $ionicsidemenudelegate, $timeout) { console.log("hello"); // new view caching in ionic, controllers called // when recreated or on app start, instead of every page change. // listen when page active (for example, refresh data), // listen $ionicview.enter event: //$scope.$on('$ionicview.enter', function(e) { //}); // form data login modal $scope.logindata = $localstorage.getobject('userinfo','{}'); $scope.reservation = {}; $scope.registration = {}; $rootscope.currentuser = false; $rootscope.username = ''; $rootscope.admin = false; $rootscope.uid = ''; $rootscope.isverified = false; if(authfactory.isauthenticated()) { $rootscope.currentuser = true; $rootscope.username = authfactory.getusername(); $rootscope.admin = authfactory.isadmin(); $rootscope.isverified = authfactory.isverified(); $rootscope.uid = authfactory.uid(); } // create login modal use later $ionicmodal.fromtemplateurl('templates/login.html', { scope: $scope }).then(function (modal) { $scope.modal = modal; }); // triggered in login modal close $scope.closelogin = function () { $scope.modal.hide(); }; // open login modal $scope.login = function () { $scope.modal.show(); }; // perform login action when user submits login form $scope.dologin = function () { console.log('doing login', $scope.logindata); $localstorage.storeobject('userinfo',$scope.logindata); authfactory.login($scope.logindata); $scope.closelogin(); }; $scope.logout = function() { authfactory.logout(); $rootscope.currentuser = false; $rootscope.username = ''; $rootscope.admin = false; $rootscope.isverified = false; $rootscope.uid = ''; $state.go("app"); }; // on successful login $rootscope.$on('login:successful', function () { $rootscope.currentuser = authfactory.isauthenticated(); $rootscope.username = authfactory.getusername(); $rootscope.admin = authfactory.isadmin(); $rootscope.uid = authfactory.uid(); $rootscope.isverified = authfactory.isverified(); }); // create login modal use later $ionicmodal.fromtemplateurl('templates/register.html', { scope: $scope }).then(function (modal) { $scope.registerform = modal; }); // triggered in login modal close $scope.closeregister = function () { $scope.registerform.hide(); }; // open login modal $scope.register = function() { $scope.registerform.show(); }; // perform login action when user submits login form $scope.doregister = function() { console.log('doing registration', $scope.registration); $scope.logindata.username = $scope.registration.username; $scope.logindata.password = $scope.registration.password; authfactory.register($scope.registration); // simulate login delay. remove , replace login // code if using login system $timeout(function () { $scope.closeregister(); }, 1000); }; // on successful registration $rootscope.$on('registration:successful', function () { $rootscope.currentuser = authfactory.isauthenticated(); $rootscope.username = authfactory.getusername(); $rootscope.admin = authfactory.isadmin(); $rootscope.uid = authfactory.uid(); $rootscope.isverified = authfactory.isverified(); }); $scope.toggleleft = function() { $ionicsidemenudelegate.toggleleft(); }; }]);
you need inject ui-router module in angular app initialization.
angular.module('watchhoursapp', ['ionic','ui.router'])
Comments
Post a Comment