2013-04-20 27 views
79

Tôi muốn tải mẫu xem nội tuyến.Sử dụng Mẫu nội tuyến trong Góc

Tôi đã bọc mẫu trong thẻ tập lệnh loại text/ng-template và đặt id thành temp1.html. và đây là những gì mô-đun cấu hình của tôi trông giống như

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

Nó nói với tôi GET http://localhost:41685/temp1.html 404 (Not Found) trong cửa sổ giao diện điều khiển của tôi có nghĩa là nó đang tìm kiếm một tập tin của tên đó.

Câu hỏi của tôi là: Làm cách nào để định cấu hình tuyến đường của tôi để sử dụng mẫu nội tuyến?

Cập nhật: Đây là những gì máy chủ-rendered tôi DOM trông giống như

<!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> 

Trả lời

111

Ody, bạn đã đi đúng hướng, vấn đề duy nhất là các thẻ là ngoài của phần tử DOM mà trên đó các chỉ thị ng-app được sử dụng. Nếu bạn di chuyển nó đến các mẫu nội tuyến <body ng-app="LearningApp"> thì hoạt động.

Bạn cũng có thể tìm thấy câu hỏi này có liên quan: Is there a way to make AngularJS load partials in the beginning and not at when needed?

+0

Nó hoạt động. Cảm ơn rất nhiều – Ody

+2

Tôi bây giờ thấy lý do tại sao hầu hết các hướng dẫn thích thêm chỉ thị ng-app vào phần tử html. Đó là bởi vì bất cứ điều gì liên quan đến ứng dụng/mô-đun đó phải nằm trong phạm vi ng-app do đó đặt nó vào thẻ html tránh các vấn đề trong tương lai như thế này – Ody

+2

Đây là điều mà tài liệu phải đề cập đến. Tôi mất giờ tự hỏi tại sao những người 404 xuất hiện ... –

31

Hãy thử sử dụng id-Thuộc tính của kịch bản-Yếu tố để thiết lập tên của mẫu nên làm việc.

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

Tôi đã làm điều đó. Không làm việc. Tôi nghi ngờ một thực tế là trang chính của tôi thực sự không phải là tập tin html điển hình. như trong http: // server/controller/ – Ody

+0

lý do tại sao bạn không sử dụng tệp mẫu, nó rõ ràng hơn trong opionion của tôi. – tschiela

+0

Vâng, bạn nói đúng. Phương pháp đó hoạt động tốt, thực hiện tốt hơn và tất cả. Nhưng tôi có các ứng dụng mà tôi muốn di chuyển được viết trong các khung công tác cũ hơn như xương sống và chúng dựa nhiều vào các mẫu nội tuyến. Đó là lý do tại sao tôi muốn biết làm thế nào nó được thực hiện trong góc. – Ody

Các vấn đề liên quan