Best IT Recipes

Using Inline Templates in Angular

I wanted to download 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 is what my module configurator looks like

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

He tells me GET http://localhost:41685/temp1.html 404 (Not Found) in my console window, which means that he is looking for a file with that name.

My question is: how do I set up routes to use the built-in templates?

Update: here is what my server-created 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>
+79
javascript angularjs
Apr 20 '13 at 20:18
source share
2 answers

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

You may also find this question relevant: Is there a way to make AngularJS partial load at the beginning, and not if necessary?

+111
Apr 20 '13 at 21:00
source share

Try using the script -Element attribute identifier to set the template name.

 <script type="text/ng-template" id="temp1.html"> ... some template stuff </script>
+30
Apr 20 '13 at 20:22
source share


More articles:


All Articles