Willian Werlang Willian Werlang - 2 months ago 27
AngularJS Question

AngularJS Route - templateUrl not working

When accessing a route, the partial template is not being showed at all.

My Index HTML (Initial Layout):

<!DOCTYPE html>
<html ng-app="app">
<head>
<title>My App</title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/Script.js"></script>
</head>
<body>
<a href="#/home">Go to Home</a>
<div ng-view></div>
</body>
</html>


My Home.html

<h>I'm home</h>


My Script.js

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

app.config(function ($routeProvider) {
$routeProvider.when("/home", { templateUrl: "Templates/Home.html" })
});


Solution Files:

enter image description here

Obs: This works:

$routeProvider.when("/home", { template: "<h>I'm home</h>" })

Answer

Open the console (F12) and you'll see following error:

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

I bet you are opening index.html using Google Chrome without running the webserver. To fix the problem you need to run code from a webserver or just use Mozilla Firefox instead.

In Plunker it works fine.

Comments