ASP.NET SPA with Angularjs - component templateUrl

Question

Hello I have SPA application with angularjs and I dont know how to create component with template url.

My directory structure is:

SpaApp
 - Scripts
  - App
   - test.component.js
 - Controllers
 - Views
  - Home
   - test.component.cshtml

test.component.js

app.component("appTest", {
    templateUrl: 'test.component.cshtml', //what is the address here?
    transclude: true,
    controller: function AppTest() {}
})

I tried add url to Views/Home/test.component.cshtml and it was not working. Then I tried add html template to same folder as is the component javascript and it is not working too. Where is my problem? What is the address to html template for component? Thanks you

Nikolaj Dam Larsen · Accepted Answer · 2017-12-22 08:16:17Z

1

You can't use razor views directly as angular templates. Razor views are compiled by ASP.NET and not served directly as static files by the web server, while Angular templates are either loaded asynchronously over http or retrieved through angulars templatecache.

You have two options.

Don't use razor views (i.e. .cshtml-files) as angular templates. Use regular .html-files instead.
Reference the ASP.NET MVC action, instead of a static file. In your case (assuming default routing configurations) your templateUrl should be /Home/Test instead.

I recommend the first option and keep ASP.NET MVC razor views completely separate from angular.

answered Dec 22, 2017 at 8:16

Nikolaj Dam Larsen

5,7146 gold badges37 silver badges46 bronze badges

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

2 Comments

bluray Over a year ago

Thank you, I tried your first option. I had html file in the same folder as js file but it is not working too. Must I have this html file path in bundle config?

Nikolaj Dam Larsen Over a year ago

The path to the html template must be the relative path, from the root of your application, where the root is the running directory of your ASP.NET application.

Collectives™ on Stack Overflow

ASP.NET SPA with Angularjs - component templateUrl

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related