Javascript 角形ngRoute can'；t加载模板：错误[$compile:tpload]_Javascript_Angularjs_Angularjs Ng Route

Javascript 角形ngRoute can'；t加载模板：错误[$compile:tpload]

javascript angularjs

Javascript 角形ngRoute can'；t加载模板：错误[$compile:tpload],javascript,angularjs,angularjs-ng-route,Javascript,Angularjs,Angularjs Ng Route,我尝试了一些简单的角度布线，但我无法指定错误是什么。Chrome只是告诉我Angular无法编译模板在下面的链接中，您可以看到我的目录结构 --angular.js var testApp = angular.module('testApp', ['ngRoute']); testApp.config(function($routeProvider){ $routeProvider.when('/list', { templateUrl: 'pages/list.h

我尝试了一些简单的角度布线，但我无法指定错误是什么。Chrome只是告诉我Angular无法编译模板

在下面的链接中，您可以看到我的目录结构

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


酒蝇

这是我的错误

提前谢谢你

编辑。对不起，我没有看到您的目录结构。您确定公众可以访问pages目录吗？页面目录是否应移到公共目录中

旧答案：

错误是templateUrl/pages/list.html不存在。您应该将模板文件保存到/pages/list.html文件中，或者在html正文中添加一个内联模板，如下所示：

<script type="text/ng-template" id="/pages/list.html">
my template here
</script>

testApp.config(function($routeProvider){
    $routeProvider.when('/list', {
        template: '<li ng-repeat="etcetera"></li>',
        controller: 'mainController'
    });
});


我的模板在这里

我遇到了类似的问题：

模板URL

文件无法加载（所有资源都无法加载）。在我的例子中，它发生在移动设备的浏览器上加载应用程序时。它是由内容安全策略限制引起的（）

我让CSP允许所有资源，除了
templateUrl
引用的模板的。我还尝试通过
脚本指令（）加载模板，但没有成功最终我决定将模板嵌入路由本身，如下所示： <script type="text/ng-template" id="/pages/list.html"> my template here </script> testApp.config(function($routeProvider){ $routeProvider.when('/list', { template: '<li ng-repeat="etcetera"></li>', controller: 'mainController' }); }); testApp.config（函数（$routeProvider）{ $routeProvider.when（“/list”{ 模板：“”，控制器：“主控制器” }); }); 列表新的 templateUrl 应该像templateUrl:'/pages/list.html'，刚刚尝试过，错误仍然发生。你能把这个放在JSFIDLE上吗？angular的herf和#是另一个意思。