CODEWITHSUNDEEP
javascriptangularjs
thetekkenmaster
thetekkenmaster

Reputation: 9

Angularjs not working and page loading too slow

I'm going through a tutorial on w3schools and I copied one of their snippets. When I try to view the page in my browser it takes like half a minute to load. Also, the functions simply aren't working. This code seems to work only on w3schools. They've provided cdn's (which are outdated but should still work). Any assistance is greatly appreciated.

<!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>

Upvotes: 0

Views: 924

Answers (2)

Nitheesh
Nitheesh

Reputation: 19986

The angular route file you have used is not valid. Please use a valid cdn URL

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>

Upvotes: 0

Leo
Leo

Reputation: 13838

Loading time may due to your network connection, as the page needs to download the angular core from google CDN. Load it locally may solve it.

However, I noticed you have such code:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

So I'm wondering, how are you visiting your HTML? Do you have a localhost server or directly via file:/// protocol?

If your answer is latter, then it definitely won't work, as the URL for angular-router may be auto-prefixed as via file:/// protocol too, which is 404 I guess.

Upvotes: 1

Related Questions