Sử dụng Mẫu nội tuyến trong AngularJS

Question 1

Tôi muốn tải một mẫu chế độ xem nội tuyến.

Tôi đã bọc mẫu trong một loại thẻ script text/ng-templatevà đặt id thành temp1.html. và đây là cấu hình mô-đun của tôi trông như thế nào

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

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

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

Cập nhật: Đây là giao diện của DOM do máy chủ của tôi hiển thị

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

Question 2

Ồ, bạn đã đi đúng hướng, vấn đề duy nhất là các thẻ nằm ngoài phần tử DOM mà ng-appchỉ thị được sử dụng. Nếu bạn di chuyển nó đến các <body ng-app="LearningApp">phần tử mẫu trong dòng sẽ hoạt động.

Bạn cũng có thể thấy câu hỏi này có liên quan: Có cách nào để khiến AngularJS tải các phân phần ngay từ đầu và không tải khi cần thiết không?

Question 3

Hãy thử sử dụng id-Attribute của script-Element để đặt tên của mẫu sẽ hoạt động.

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