munchschair munchschair - 1 month ago 9
AngularJS Question

Why isn't my angular working correctly?

I have been running into some issues running angular on my system. I've been learning from w3 schools demos of angular that demonstrate the different components.

Here is one I am trying:

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_routing_template

Here is the code I am using:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

<body ng-app="myApp">

<p><a href="#/">Main</a></p>

<a href="#banana">Banana</a>
<a href="#tomato">Tomato</a>

<p>Click on the links to change the content.</p>

<p>The HTML shown in the ng-view directive are written in the template property of the $routeProvider.when method.</p>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        template : "<h1>Main</h1><p>Click on the links to change this content</p>"
    })
    .when("/banana", {
        template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
    })
    .when("/tomato", {
        template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
    });
});
</script>

</body>
</html>


It won't switch between the header tags on my system.

Edit: The code works fine elsewhere but not on my system.
It is in my apache folder. Running off of localhost. JavaScript, php and html work fine. I've used jQuery too. Any idea why angular may be having issues?

Answer

Your file may be cached in your browser so even saving the file is not updating what is running in your browser.

Clear your browser cache. Restart your browser.