반응형
각도에서의 인라인템플릿 사용JS
인라인 뷰 템플릿을 로드하려고 합니다.
템플릿을 타입의 스크립트 태그로 감쌌다.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>
Ody, 당신은 올바른 방향으로 가고 있었습니다. 유일한 문제는 태그가 DOM 요소 밖에 있다는 것입니다.ng-app디렉티브가 사용됩니다.로 이동하면<body ng-app="LearningApp">요소 인라인 템플릿이 작동해야 합니다.
또, 다음의 질문이 관련하는 경우가 있습니다.Angular를 만들 수 있는 방법은 없나요?JS는 필요할 때 로드하지 않고 처음에 로드합니까?
id-Attribute of script-Element를 사용하여 템플릿의 이름을 설정합니다.
<script type="text/ng-template" id="temp1.html">
... some template stuff
</script>
언급URL : https://stackoverflow.com/questions/16124767/using-inline-templates-in-angularjs
반응형
'programing' 카테고리의 다른 글
| axios와 함께 bearer 토큰 전송 (0) | 2023.02.25 |
|---|---|
| 요소가 표시되는지 확인하려면 어떻게 해야 합니까? (0) | 2023.02.25 |
| 로그인 여부 확인 - 리액트 라우터 애플리케이션 ES6 (0) | 2023.02.20 |
| Wordpress 플러그인에서 미디어 업로더를 추가하는 방법 (0) | 2023.02.20 |
| 오류 java.sql.SQLException: ORA-00911: 잘못된 문자 (0) | 2023.02.20 |