Angular app only loads on page refresh

Question

I am building a wordpress site with a page that is an angular app. It was working until recently (and I can't recall which change broke it), but now the app does not load when I arrive at the page via a link (angular is loaded and the code snippet below processed, but nothing is logged), but it does work if I then refresh the page.

I've backed out all the real code to leave:

angular.module("af2015App", [])
.controller("TestCtrl", function() {
    console.log("test test");
});

And commented out everything in the HTML except

<div ng-app="af2015App" class="app">
    <p ng-controller="TestCtrl">Use the ...!</p>
</div>

I'm at a loss as to how to debug these circumstances. I'm not loading pages via AJAX.

As pointed out by @Arno_Geismar, you don't close div tag on this excerpt, can you post all relevant code ? How do you call angular on the document ? — enguerranws
– enguerranws, Commented Jul 8, 2015 at 9:56
It is loaded by WordPress at the end of the body. As i said the question is what to look for when coming via a link to the page rather than when doing a refresh — Simon H
– Simon H, Commented Jul 8, 2015 at 13:06
Just try calling Angular in the <head> element (with wp_head() if you use wordpress). — enguerranws
– enguerranws, Commented Jul 8, 2015 at 13:33
In my case i had to switch from chrome to mozila or edge and works nickel — Badr Bellaj
– Badr Bellaj, Commented Oct 21, 2017 at 11:20

Simon H · Accepted Answer · 2015-07-10 06:34:35Z

1

Thanks for your ideas everyone. I had another go at debugging and discovered that, even after turning off the script tag with angular, angular was still present. That gave me the idea to look at Batarang and, after deactivating that, all is working again. Perhaps this answer will help someone someday. Needless to say I don't know what the underlying problem was.

answered Jul 10, 2015 at 6:34

Simon H

21.2k14 gold badges83 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arno_Geismar · Accepted Answer · 2015-07-08 10:18:00Z

0

take a look at this plunker working plunker

they only thing I can think of when looking at your code is that you are not closing your div tag altough that is probably just an edit mistake otherwise move your ng-app definition to your html tag

    <html ng-app="af2015App">
      <head> 
         //make sure your scripts are loaded correctly

         <script src="path/to/angular.js"></script>
         <script src="path/to/app.js"></script>
         <script src="path/to/controller.js"></script>
      </head>
        <div class="app">
            <p ng-controller="TestCtrl">Use the ...!</p>
        </div>
    </html>

edited Jul 8, 2015 at 10:18

answered Jul 8, 2015 at 9:48

Arno_Geismar

2,3301 gold badge19 silver badges30 bronze badges

4 Comments

Simon H Over a year ago

Thanks for the idea. I just didn't bother including the div in the snippet - it is there. I tried moving to html tag but that didn't change anything. I'm so frustrated. I suspect I wil have to restart from the beginning and add things 1 by 1

enguerranws Over a year ago

How do you call angular in your document ?

Arno_Geismar Over a year ago

@Simon H In my document I add a script tag i updated my answer

enguerranws Over a year ago

You missed the body tag ;)

Collectives™ on Stack Overflow

Angular app only loads on page refresh

2 Answers 2

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Linked

Related