Menu
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> 
432
An inline HTML template for a component is defined using template config in @Component decorator, as shown below. It can be a single line template wrapped inside double quotes or single quotes. It can also be a multi-line template wrapped inside backticks char `.
Angular HTML templates provide a structured way of binding data exposed by Angular components to the end-user. For instance, this example shows making a drop-down calendar with particular controls. Think of it like any other input form control in that it is going to render the UI and provide the backing logic.
You can define it inline using the template property, or you can define the template in a separate HTML file and link to it in the component metadata using the @Component decorator's templateUrl property.
Templates in AngularJS are simply HTML files filled or enriched with AngularJS stuff like attributes and directives. A directive is a marker element that is used to target a particular attribute or class to render its behavior according to the needs.
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?
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
