Using Inline Templates in AngularJS

Question

I wanted to load an inline view template.

I wrapped the template in a script tag of type text/ng-template and set the id to temp1.html. and here's what my module config looks like

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

It tells me GET http://localhost:41685/temp1.html 404 (Not Found) in my console window meaning that it's looking for a file of that name.

My Question is: How do I configure my routes to use inline templates?

Update: Here's what my server-rendered DOM looks like

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

Community · Accepted Answer · 2017-05-23 11:33:24Z

110

Ody, you were on the right track, the only problem was that the tags are outside of the DOM element on which the ng-app directive is used. If you move it to the <body ng-app="LearningApp"> element in-line templates should work.

You might also find this question relevant: Is there a way to make AngularJS load partials in the beginning and not at when needed?

edited May 23, 2017 at 11:33

CommunityBot

11 silver badge

answered Apr 20, 2013 at 21:00

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ody Over a year ago

I now see why most tutorials prefer to add the ng-app directive to the html element. That's because anything that is related to that app/module must be within the ng-app scope hence putting it in the html tag avoids future problems like this

Rob Juurlink Over a year ago

This is something the documentation has to mention. I lost hours wondering why those 404 appeared...

tschiela · Accepted Answer · 2013-04-20 20:22:22Z

33

Try use the id-Attribute of the script-Element to set the name of the template should work.

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

answered Apr 20, 2013 at 20:22

tschiela

5,2714 gold badges30 silver badges35 bronze badges

3 Comments

Ody Over a year ago

I did that. Didn't work. I'm suspecting the fact that my main page is actually not typical html file. as in server/controller

tschiela Over a year ago

why you dont use template files, its more clear in my opionion.

Ody Over a year ago

Yeah you're right. That method works well, performs better and all. But I have applications that I want to migrate that were written in older frameworks like backbone and they rely heavily on inline templates. That's why I wanted to know how it's done in angular.

Collectives™ on Stack Overflow

Using Inline Templates in AngularJS

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related