BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] AngularJSでインラインテンプレートを使用する

2023-07-19 17:35:59

質問

インラインビューテンプレートを読み込みたいのですが、どうすればいいですか？

タイプのスクリプトタグでテンプレートをラップしました。 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>

どのように解決するのですか？

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

この質問も関連性があるかもしれません。 AngularJSが必要なときにではなく、最初に部分的にロードする方法はありますか？

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します