title: Using Inline Templates in AngularJS
body: <p>I wanted to load an inline view template.</p>
  
  <p>I wrapped the template in a script tag of type <code>text/ng-template</code> and set the id to <code>temp1.html</code>. and here's what my module config looks like</p>
  
  <pre><code>learningApp.config(function ($routeProvider) {
      $routeProvider
          .when("/first",{ controller: "SimpleController", templateUrl: "temp1.html"})
          .when("/second", {controller: "SimpleController", templateUrl: "temp2.html"})
          .otherwise({redirectTo : "/first"});
  });
  </code></pre>
  
  <p>It tells me <code>GET http://localhost:41685/temp1.html 404 (Not Found)</code> in my console window meaning that it's looking for a file of that name.</p>
  
  <p>My Question is: How do I configure my routes to use inline templates?</p>
  
  <p>Update: Here's what my server-rendered DOM looks like</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src="/Scripts/angular.js"&gt;&lt;/script&gt;
      &lt;link href="/Content/bootstrap.css" rel="stylesheet"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;       
      &lt;h2&gt;Getting Started with Angular&lt;/h2&gt;
      &lt;div class="row"&gt;
          &lt;div class="panel" ng-app="LearningApp"&gt;
              &lt;div ng-view&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;script type="text/ng-template" id="temp1.html"&gt;
      &lt;div class="view"&gt;
          &lt;h2&gt;First View&lt;/h2&gt;
          &lt;p&gt;
              Search:&lt;input type="text" ng-model="filterText" /&gt;
          &lt;/p&gt;
          &lt;ul class="nav nav-pills"&gt;
              &lt;li ng-repeat="cust in customers | orderBy:'name' | filter: filterText "&gt;&lt;a href="#"&gt;{{cust.name}} - {{cust.school}}&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script type="text/ng-template" id="temp2.html"&gt;
      &lt;div class="view"&gt;
          &lt;h2&gt;Second View&lt;/h2&gt;
          &lt;p&gt;
             Search:&lt;input type="text" ng-model="filterText" /&gt;
          &lt;/p&gt;
          &lt;ul class="nav nav-pills"&gt;
              &lt;li ng-repeat="cust in customers | orderBy:'name' | filter: filterText "&gt;&lt;a href= "#"&gt;{{cust.name}} - {{cust.school}}&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/script&gt;
      &lt;/div&gt;
      &lt;script src="/Scripts/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/app/LearningApp.js"&gt;&lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>