CODEWITHSUNDEEP
javascriptangularjs
Craig
Craig

Reputation: 768

AngularJS won't run controller unless refreshed

Really simple (code below). I have two html pages, test.htm and ang.htm. I start on test.htm with a single hyperlink to the ang.htm page. The ang.htm contains angular js that has one simple controller that does a Hello World. I click on the hyperlink to navigate to ang.htm. However I need to refresh the ang.htm page in order for the angular code to run. Why is that?

test.htm

<html>
<body>
<a href="http://localhost/ang.htm">Click</a>
</body>
</html>

ang.htm

<html>
<body ng-app="testApp" ng-controller="testController">
    {{hello}}

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>

  <script>
        angular.module("testApp", []);

        angular.module( "testApp" ).controller( "testController", function( $scope )
        {
            $scope.hello = "Hello world";
        }); 
    </script>
</body>
</html>

Upvotes: 0

Views: 472

Answers (2)

user3519976
user3519976

Reputation:

I only changed localhost/ang.htm to /ang.htm in according to file structure. It works as expected.

Debugging with Firebug would be very helpful in your case.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
    </head>
    <body>
        <a href="/ang.htm">Click</a>
    </body>
</html>

Upvotes: 3

ngasull
ngasull

Reputation: 4216

Your code works, fiddle is talking: http://jsfiddle.net/m7beqvaf/

The {{hello}} token may not be replaced as soon as the page shows up loaded but that's all. Navigating to ang.htm can't be a problem.

Note that I copy/pasted your ang.htm content in the fiddle:

<body ng-app="testApp" ng-controller="testController">
    {{hello}}

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>

  <script>
        angular.module("testApp", []);

        angular.module( "testApp" ).controller( "testController", function( $scope )
        {
            $scope.hello = "Hello world";
        }); 
    </script>
</body>

Upvotes: 0

Related Questions