AngularJS Routing / Loading Files Issue

Question

I'm trying to create a single page web application using ng-view but I'm unable to progress. There seems to be a problem loading in the html pages and I don't know what to do about it. Would anybody be able to identify what's wrong with my program?

The following files are contained in a directory called Example:

angular.js (v1.4.3)
angular-route.js (v1.4.3)
script.js
index.html
first.html
second.html

index.html

<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="script.js"></script>
</head>

<body ng-app="RoutingApp">
<div>
<h2>AngularJS Routing Example</h2>
<p>Jump to the <a href="#first">first</a> or <a href="#second">second page</a></p>
<div ng-view></div>
</div>
</body>
</html>

script.js:

var app = angular.module('RoutingApp', ['ngRoute']);

app.config( [ '$routeProvider', function($routeProvider) {
$routeProvider
    .when('/first', {
        templateUrl: 'first.html'
    })
    .when('/second', {
        templateUrl: 'second.html'
    })
    .otherwise({
        redirectTo: '/'
    });
}]);

first.html

<h2>This is the first page.</h2>

second.html

<h2>This is the second page.</h2>

From the Chrome debugging console:

XMLHttpRequest cannot load file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/first.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/first.html'.
at Error (native)
at file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:10514:11
at sendReq (file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:10333:9)
at serverRequest (file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:10045:16)
at processQueue (file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:14567:28)
at file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:14583:27
at Scope.$eval (file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:15846:28)
at Scope.$digest (file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:15657:31)
at Scope.$apply (file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:15951:24)
at HTMLBodyElement.<anonymous> (file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:12086:24)(anonymous function) @ angular.js:12330 Error: [$compile:tpload] Failed to load template: first.html (HTTP status: undefined undefined)
http://errors.angularjs.org/1.4.3/$compile/tpload?p0=first.html&p1=undefined&p2=undefined
at angular.js:68
at handleError (angular.js:17530)
at processQueue (angular.js:14567)
at angular.js:14583
at Scope.$eval (angular.js:15846)
at Scope.$digest (angular.js:15657)
at Scope.$apply (angular.js:15951)
at HTMLBodyElement.<anonymous> (angular.js:12086)
at HTMLBodyElement.eventHandler (angular.js:3271)

Thanks in advance.

Its up and running! Thanks for all your help. The main problem was the lack of a web server, so I used Apache Tomcat. The other problem was I starting my template URLs with a /. — alteous, Aug 06 '15 at 16:31

score 1 · Accepted Answer · answered Aug 06 '15 at 16:04

1

It's because browsers don't allow to access local files through AJAX requests. You need to serve your page using a web server (e.g. apache) and access the page with http://localhost/index.html

answered Aug 06 '15 at 16:04

Jonas Flaam

251
2
7

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

First of all your <a href="#first">first</a> or <a href="#second">second page</a></p>

should have links in the following manner

 <a href="#/first">first</a>

also secondly, are you loading your template urls properly, Have a look at this post AngularJS writing an app with no server

edited May 23 '17 at 12:21

Community

1
1

answered Aug 06 '15 at 16:16

Bazinga777

5,140
13
53
92

AngularJS Routing / Loading Files Issue

2 Answers2