i new whole phonegap , onsen ui framework (and web development, actually), tried following tutorials , asking around mobile app working.
my problem is, homepage reloaded twice before app becomes usable. it's because gets loaded upon startup, after it's loaded runs login check, , reloads it.
so basically, if debug in browser, appcontroller.js file running first (and going through couple of times, start, it's reloading or something), controller homepage.html , pages (except login.html, has logincontroller.js), , main.js has checklogin() function taken care of afterwards.
how can specify, checklogin() function should first thing running when application loads up?
synchronizing them number 1 problem, , quite frankly i'm lost in code.
here sketches of javascript files, index.html file
main.js
ons.ready(function() { checklogin(storage.getitem("username"),storage.getitem("password")); }); function checklogin(username, password) { if(correctlogin) { menu.setmainpage('homepage.html'); } else { menu.setmainpage('login.html'); } } var myapp = angular.module('app', ['onsen']); index.html
<html lang="en" ng-app="app" ng-csp> <script src="lib/angular/angular.js"></script> <script src="lib/onsen/js/onsenui.js"></script> <script src="js/jquery-3.1.0.js"></script> <script src="js/date.js"></script> <!-- angular controllers --> <script src="main.js"></script> <script src="logincontroller.js"></script> <script src="appcontroller.js"></script> <!--js--> <!--<script src="_assets/js/index.js"></script>--> <script src="js/jquery.mobile-1.4.5.min.js"></script> <script src="js/jqm/jquery.ui.datepicker.js"></script> <script id="mobile-datepicker" src="js/jqm/jquery.mobile.datepicker.js"></script> <ons-sliding-menu main-page="homepage.html" menu-page="menu.html" side="right" max-slide-distance="250px" var="menu"> </ons-sliding-menu> <ons-template id="menu.html"> <ons-page> <ons-list> <ons-list-item onclick="menu.setmainpage('navigator.html', {closemenu: true})"> home </ons-list-item> <ons-list-item onclick="menu.setmainpage('page1.html', {closemenu: true})"> page1 </ons-list-item> </ons-list> </ons-page> </ons-template> <ons-template id="navigator.html"> <ons-navigator title="navigator" var="mynavigator" page="homepage.html"> </ons-navigator> </ons-template> <ons-template id="homepage.html"> <ons-page id="homepage" ng-controller="appcontroller"> <ons-toolbar style="background-color:#222;"> <div class="right"> <ons-toolbar-button ng-click="menu.togglemenu()"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button> </div> <div class="center" style="color: white">welcome app</div> </ons-toolbar> <div style="width:80%; margin:0 auto;"> <ons-button modifier="large" ng-click="menu.setmainpage('settings.html', {closemenu: true})" > settings</ons-button> </div> </ons-page> </ons-template> </html> <ons-template id="page1.html"> <ons-page id="page1" ng-controller="appcontroller" ng-init="loadpage1()"> <span>this page1 appcontroller loaded it</span> <span>{{page1variable}}</span> </ons-page> </ons-template> the login.html has logincontroller attached it, when there saved credentials, never gets loaded. (which fine, guess)
appcontroller.js
myapp.controller('appcontroller', function ($scope, $timeout, sharedproperties) { $scope.loadpage1 = function() { $scope.page1variable = "hello world"; } $scope.loadsettingsvariables = function() { $scope.notificationsettings = true; } .... other logic , actions... } when hit refresh on page, $scope.function_name lines getting hit breakpoints, goes through file, , after that, main.js file called. , runs through again appcontroller...
what doing wrong in terms of chaining them together.
i want centralized function either put user homepage.html or login.html.
also, did sliding-menu made happen? or structured correctly?
note: using both sliding-menu , navigator navigation. problem? (the navigator handy, when have pop pages, when page structure multi-level)
note2: on different note, could related, started "uncaught typeerror: cannot read property 'concat' of undefined" error in jquery.mobile-1-4-5.min.js:4
Comments
Post a Comment