[javascript] AngularJS에서 인라인 템플릿 사용

Program / 글쓴이

인라인보기 템플릿을로드하고 싶었습니다.

템플릿을 유형의 스크립트 태그로 래핑하고 text/ng-templateID를 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>

답변

오디, 당신은 올바른 길을 가고 있었지만 유일한 문제는 태그가 지시문이 사용 되는 DOM 요소 외부 에 있다는 것 ng-app입니다. <body ng-app="LearningApp">요소 로 이동하면 인라인 템플릿이 작동합니다.

이 질문과 관련이있을 수도 있습니다. AngularJS가 필요할 때가 아니라 처음에 부분을로드하도록 만드는 방법이 있습니까?

답변

스크립트 요소의 id-Attribute를 사용하여 템플릿 이름이 작동하도록 설정하십시오.

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

답변