Bug: Any code in the index.html repeats to infinity

ionic-v1
1

Hello,

I am building an app with the Cordova seed and when I add code to the index.html file any code replicates.
Does anyone might know what is going on.

<!--

THIS IS THE FISRT PAGE THE USER WILL SEE WHEN THEY DOWNLOAD BONJOUR.

–>

Bonjour 
<!-- ionic css -->
<link href="lib/css/ionic.css" rel="stylesheet">

<!-- your app's css -->
<link href="css/app.css" rel="stylesheet">

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

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

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

<!-- 
  The nav bar that will be updated as we navigate between views
  Additional attributes set its look, ion-nav-bar animation and icons
  Icons provided by Ionicons: http://ionicons.com/ 
-->
<ion-nav-bar type="bar-positive" animation="nav-title-slide-ios7" back-button-type="button-icon button-clear" back-button-icon="ion-ios7-arrow-back"></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></ion-nav-view>

<header class="bar bar-header bar-positive">
    <h1 class="title">Sign Up</h1>
</header>

<br/>
<br/>
<div align="center">
    <p>
        <br/>
        <img src="img/icon.png" alt="bonjour-icon" height="100" width="100" />
    </p>
</div>

Thank you

2

You’re putting your markup out side of the ion-nav-view. As the comments say, your templates will render inside the ion-nav-view so anything outside will cause issues.

Word of advice, its probably not a best practice to add headers and additional template specific markup in your index.html, you should separate them into either other html files or have inline script-templates.

3

I am building an app that ask for your mobile number the first time you use the app for two-factor auth. is there a way that you would recommend so that it would load first without usibng the index.html file like you recommended not doing. And rembering not to load that page ever again after the user has signed up.
Thank you for your help.

4

My thinking is I have a cookie and everytime the app is run that cookie is check and the user data is saved in. And if the cookie is missing than load a page. What do you think?

5

My advice would be to use localStorage rather than a cookie. If you app’s run, check the existing of the stored item on every state change. If it exists, allow any desired state. If it does not exist, redirect to the state the requests the mobile number.

Something like this:

.run(function ($http, $rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function (event, next, current) {
        console.log(next);

        // If any page other than login is accessed:
        if(next.name.indexOf('login') !== -1 ) {

            var hasToken = AccountService.hasToken();

            if(!hasToken) {
                event.preventDefault();
                $state.go('login');
            } 
        }

    });
})

NOTE : You’d probably really want to use a Service to get the token rather than getting it directly in your run function.

1 Like