AngularJSでのインラインテンプレートの使用


82

インラインビューテンプレートをロードしたかったのです。

テンプレートをタイプのスクリプトタグでラップしtext/ng-template、IDをに設定しましたtemp1.html。これが私のモジュール設定の様子です

learningApp.config(function ($routeProvider) {
    $routeProvider
        .when("/first",{ controller: "SimpleController", templateUrl: "temp1.html"})
        .when("/second", {controller: "SimpleController", templateUrl: "temp2.html"})
        .otherwise({redirectTo : "/first"});
});

それは私に語ったGET http://localhost:41685/temp1.html 404 (Not Found)ことがその名前のファイルを探しているというのが私のコンソールウィンドウの意味で。

私の質問は、インラインテンプレートを使用するようにルートを構成するにはどうすればよいですか?

更新:サーバーでレンダリングされたDOMは次のようになります

<!DOCTYPE html>
<html>
<head>
    <script src="/Scripts/angular.js"></script>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
</head>
<body>
    <div class="container">       
    <h2>Getting Started with Angular</h2>
    <div class="row">
        <div class="panel" ng-app="LearningApp">
            <div ng-view></div>
        </div>
    </div>

<script type="text/ng-template" id="temp1.html">
    <div class="view">
        <h2>First View</h2>
        <p>
            Search:<input type="text" ng-model="filterText" />
        </p>
        <ul class="nav nav-pills">
            <li ng-repeat="cust in customers | orderBy:'name' | filter: filterText "><a href="#">{{cust.name}} - {{cust.school}}</a></li>
        </ul>
    </div>
</script>

<script type="text/ng-template" id="temp2.html">
    <div class="view">
        <h2>Second View</h2>
        <p>
           Search:<input type="text" ng-model="filterText" />
        </p>
        <ul class="nav nav-pills">
            <li ng-repeat="cust in customers | orderBy:'name' | filter: filterText "><a href= "#">{{cust.name}} - {{cust.school}}</a></li>
        </ul>
    </div>
</script>
    </div>
    <script src="/Scripts/jquery-1.9.1.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/app/LearningApp.js"></script>
 </body>
</html>

回答:


111

オディ、あなたは正しい方向に進んでいました。唯一の問題は、タグがディレクティブが使用されているDOM要素の外側にあることでしたng-app。それを<body ng-app="LearningApp">要素に移動すると、インラインテンプレートが機能するはずです。

この質問も関連しているかもしれません:AngularJSに必要なときにではなく最初にパーシャルをロードさせる方法はありますか?


2
これで、ほとんどのチュートリアルがng-appディレクティブをhtml要素に追加することを好む理由がわかりました。これは、そのアプリ/モジュールに関連するものはすべてng-appスコープ内にある必要があるため、htmlタグに
含めると

3
これは、ドキュメントで言及されていることです。それらの404が登場し、なぜ私は...思って時間を失った
ロブJuurlinkに

32

script-Elementのid-Attributeを使用して、テンプレートの名前を設定してみてください。

<script type="text/ng-template" id="temp1.html">
   ... some template stuff
</script>

私はそれをしました。動作しませんでした。私のメインページは実際には典型的なhtmlファイルではないという事実を疑っています。同様に、サーバ/コントローラ
ODY

テンプレートファイルを使用しない理由は、私の意見ではより明確です。
tschiela 2013

ええ、あなたは正しいです。その方法はうまく機能し、パフォーマンスが向上します。しかし、バックボーンなどの古いフレームワークで記述された移行したいアプリケーションがあり、それらはインラインテンプレートに大きく依存しています。だから私はそれがAngularでどのように行われるのか知りたかったのです。
オディ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.