0

I tried some simple Angular Routing, but I cant specify what's the error. Chrome just tells me that Angular can't compile the Template.

In the following Link you can see my directory structure.

directory-structure

-- angular.js

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

testApp.config(function($routeProvider){
    $routeProvider.when('/list', {
        templateUrl: 'pages/list.html',
        controller: 'mainController'
    }).when('/insert', {
        templateUrl: 'pages/new.html',
        controller: 'newController'
    });
});


testApp.controller('mainController', function($scope){
    $scope.message = 'main';
});

testApp.controller('newController', function($scope){
    $scope.message = 'new';
});

--index.html

    <!DOCTYPE html>
<html lang="en" ng-app="testApp">
<head>
    <meta charset="UTF-8">
    <title>Barfly</title>
    <script src="/angular/angular.min.js"></script>
    <script src="/angular-route/angular-route.min.js"></script>
    <script src="/js/angularApp.js"></script>
</head>
<body ng-controller="mainController">
    <a href="#list">list</a>
    <a href="#insert">new</a>
    <div id="main">
        <div ng-view></div>
    </div>
</body>
</html>

This is my error,

Browser Error

Thank you in advance!

shershen
  • 9,875
  • 11
  • 39
  • 60
W. Marko
  • 1
  • 1

3 Answers3

0

EDIT. Sorry, I didn't see your directory structure. Are you sure pages directory is accessible to the public? Should the pages directory be moved into public directory?

Old answer:

The error is saying the templateUrl /pages/list.html does not exists. You should either save a template file into /pages/list.html file or add an inline template in the html body like this:

<script type="text/ng-template" id="/pages/list.html">
my template here
</script>
carlosdubusm
  • 1,063
  • 4
  • 11
  • 22
0

I encountered a sort of similar problem: templateUrl files could be not loaded (all resources didn't). In my case it happened when app was loaded on a browser on a mobile device. It was caused by Content Security Policy restrictions (How does Content Security Policy work?)

I got the CSP to permit all resources except for the templates referenced by templateUrl. I also tried loading the templates through the script directive (https://docs.angularjs.org/api/ng/directive/script), but to no avail.

Eventually I decided to embed the templates in the route itself, like this:

testApp.config(function($routeProvider){
    $routeProvider.when('/list', {
        template: '<li ng-repeat="etcetera"></li>',
        controller: 'mainController'
    });
});
Community
  • 1
  • 1
Tom Ritsema
  • 448
  • 2
  • 5
0
<a data-target="#list">list</a>
<a data-target="#insert">new</a>
hahah
  • 11
  • 2