2016-04-09 19 views
0

私はいくつかの単純な角度ルーティングを試みましたが、何がエラーかを指定することはできません。 ChromeはちょうどAngularがテンプレートをコンパイルできないと言っています。

次のリンクでは、私のディレクトリ構造を見ることができます。

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> 

これは私の誤りで、

Browser Error

ありがとうございます!

+2

'templateUrl'がtemplateUrl'ようにする必要があります: '/ページ/するlist.html'、 ' –

+0

はちょうどしようとした

は最終的に私はこのように、ルート自体にテンプレートを埋め込むことにしましたそれでもエラーが発生します –

+0

これをjsfiddleに置くことはできますか? – arman1991

答えて

0

EDIT。申し訳ありませんが、あなたのディレクトリ構造が見つかりませんでした。あなたは本当にページディレクトリに一般公開されていますか? pagesディレクトリをパブリックディレクトリに移動する必要がありますか?

旧答え:

エラーがtemplateUrl /pages/list.htmlが存在しないと言っています。あなたは/pages/list.htmlファイルにテンプレートファイルを保存するか、このようなHTML本体のインラインテンプレートを追加する必要があり、次のいずれかtemplateUrlファイルがロードされていないことができた(すべて:

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

私は同様の問題のようなものに遭遇しましたリソースはなかった)。私の場合は、アプリケーションがモバイルデバイスのブラウザにロードされたときに起こりました。それは、私はCSPがtemplateUrlが参照するテンプレートの以外のすべてのリソースにを許可するようになったコンテンツセキュリティポリシーの制限(How does Content Security Policy work?

によって引き起こされました。 scriptディレクティブ(https://docs.angularjs.org/api/ng/directive/script)でテンプレートをロードしようとしましたが、役に立たなくなりました。

testApp.config(function($routeProvider){ 
    $routeProvider.when('/list', { 
     template: '<li ng-repeat="etcetera"></li>', 
     controller: 'mainController' 
    }); 
}); 
0
<a data-target="#list">list</a> 
<a data-target="#insert">new</a> 
+1

なぜこれがうまくいくのか説明してください:) – neohope

+0

#の角度の草は他の意味です。 – hahah

関連する問題